Im working with a combination of Ajax (with native JavaScript) and php to construct a login from.
The from sits in a php file (login.php). When it gets submitted, it runs a JS onlclick function which posts the form data to another php file which validates the form data :
<input type="button" name="submit" value="Submit" onclick="JavaScript:xmlhttpPost('validator.php')"/>
The results from validator.php are returned in a div using JavaScript:
function updatepage(str){
document.getElementById("result").innerHTML = str;
}
Finally if the password and username are both correct, validator.php runs a redirect like this:
if ( // form data is valid ) {
header("Location: welcome.php");
}
However, because everything's running through ajax, this results in the "welcome.php" page being displayed in the "results" div on the original login page.
Is there a way to send a redirect via JavaScript instead?
window.location.href='welcome.php';
or using real path
window.location.href='http://www.yourdomain.com/welcome.php';
You can redirect via javascript using code below;
window.location.href = 'welcome.php';
When you make an ajax call, you can not redirect via server side application like php.
You have to get a response and do it in your js.
Ajax Request Example with jQuery and PHP.
Put this code on your frontend (view):
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
url: 'your-php-file.php',
dataType: 'html',
success: function(response) {
window.location.href = response;
}
});
});
</script>
https://api.jquery.com/jQuery.ajax/
In your php file, after you did what you want; echo the path or file to redirect as response.
<?php
echo "file-or-path-to-redirect.php";
you can use window object
window.location.href="http://example.com/welcome.php";
The easiest way to do this is to emulate it with a json response. then you parse the json to see what kind of response you got . here is a working example :
Index.html
<!DOCTYPE html>
<html>
<head>
<script>
function updatepage(str){
document.getElementById("result").innerHTML = str;
}
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var jsonParse = JSON.parse(xmlhttp.responseText);
if(jsonParse.redirect){
window.location.replace(jsonParse.redirect);
}
if(jsonParse.success){
updatePage(success);
}
}
}
xmlhttp.open("GET","login.php",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>
login.php
<?php
// if($error)
echo json_encode(array('redirect'=>'welcome.php'));
//else
echo json_encode(array('success'=>'<div>logged in</div>'));
?>
In lieu of an answer that actually works, I've figured out a workable solution. I'm not sure whether this is the correct way of doing this but it works well.
In my validator.php when the form values are correct I put the following:
if ( // form data is valid ) {
echo 'redirect';
}
Then, on my login page, when returning the string from the php page I put this:
function updatepage(str){
if (str.match(/redirect/)) {
window.location.replace('welcome.php');
}
else {
document.getElementById("result").innerHTML = str;
}
}
The idea is that when validator.php confirms the login credentials are correct it returns a string.
If that string matches "redirect", JavaScript will redirect the page.
If anyone has any input on this, please comment. I feel this is a pretty good solution. Surprised I didn't think of it earlier.