CODEWITHSUNDEEP
javascriptphpjqueryajax
user7951652
user7951652

Reputation:

how do i redirect using ajax and php together?

I am trying to redirect my users from the login page to the profile. I am using ajax to validate the form but when I login successfully, it displays the profile page on top of the index page. how do I redirect to the profile page in a new page?

Index. php:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Yahbang</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script>
        $(document).ready(function() {

            $("#signup-form").submit(function(event) {
                event.preventDefault();
                var first = $("#signup-first").val();
                var last = $("#signup-last").val();
                var email = $("#signup-email").val();
                var pwd = $("#signup-pwd").val();
                var submit = $("#signup-submit").val();
                $(".signup-message").load("include/signup.inc.php", {
                    first: first,
                    last: last,
                    email: email,
                    pwd: pwd,
                    submit: submit
                });
            });
        });

            $(document).ready(function() {

            $("#login-form").submit(function(event) {
                event.preventDefault();
                var email = $("#login-email").val();
                var pwd = $("#login-pwd").val();
                var submit = $("#login-submit").val();
                $(".login-message").load("include/login.inc.php", {
                    email: email,
                    pwd: pwd,
                    submit: submit
                });
            });
        });

</script>

</head>
<body>
<header>

    <div class="header_index">
            <div class="headerlogo">
                <nav>
                    <ul>
                        <li><a href="index.php">Yahbang</a></li>
                    </ul>
                </nav>
            </div>


                <form id="login-form" class="loginform" action='include/login.inc.php' method='POST'>
                        <input  id="login-email" type='text' name='email' placeholder='Email'>
                        <input  id="login-pwd" type='password' name='pwd' placeholder='Password'>
                        <p><a href="forgotpassword.php">Forgot Password</a></p>
                        <button id="login-submit" type='submit'>Login</button>
                        <p class="login-message"></p>
                    </form>



</header>


                <form id="signup-form" class="signup" action='include/signup.inc.php' method='POST'>
                    <input id="signup-first" type='text' name='first' placeholder='First Name'><br>
                    <input id="signup-last" type='text' name='last' placeholder='Last Name'><br>
                    <input id="signup-email" type='text' name='email' placeholder='Email'><br>
                    <input id="signup-pwd" type='password' name='pwd' placeholder='Password'><br>
                    <button id="signup-submit" type='submit'>Sign Up</button>
                    <p class="signup-message"></p>
                </form>





<footer>
    <div class="footer_index">
    <nav>
        <ul>
            <li><a href="contact.php">Contact Us</a></li>
            <li><a href="TermsofUse.php">Terms of Use</a></li>
        </ul>
    </nav>
    </div>
</footer>
</body>
</html>

login.php:

<?php
session_start();
include '../dbh.php';

if (isset($_POST['submit'])) {
$email = $_POST['email'];
$pwd = $_POST['pwd'];

$sql = "SELECT * FROM user WHERE email='$email'";
$result = $conn->query($sql);
$row = $result->fetch_assoc();
$hash_pwd = $row['pwd'];
$hash = password_verify($pwd, $hash_pwd);

    $errorEmpty = false;
    $errorEmail = false;

if ($hash == 0) {
    echo "<span class='login-error'>Your Email or password is incorrect!</span>";
    $errorEmpty = true;

} else {
    $sql = "SELECT * FROM user WHERE email='$email' AND pwd='$hash_pwd'";
    $result = $conn->query($sql);


    if (!$row = $result->fetch_assoc()) {
        echo "<span class='login-error'>Your Email or password is incorrect!</span>";
        $errorEmpty = true;
    } 

else {
        $_SESSION['id'] = $row['id'];
            header("Location: ../profile.php");
}
}

}

?>



<script> 
$("#login-email, #login-pwd").removeClass("input-error");

    var errorEmpty = "<?php echo $errorEmpty; ?>";
    var errorEmail = "<?php echo $errorEmail; ?>";

 if (errorEmpty == true) {
  $("#login-email, #login-pwd").addClass("input-error");
 }

 if (errorEmail == true) {
  $("#login-email").addClass("input-error");
 } 

 if (errorEmpty == false && errorEmail == false) {
  $("#login-email, #login-pwd").val("");
}

 </script>

Upvotes: 0

Views: 82

Answers (1)

Hossein Shahsahebi
Hossein Shahsahebi

Reputation: 7288

You should consider multiple note to do this right.

Gathering All Respond In An Array
You should create an array and put the data you want to respond there. eg: 

$respond = array(
    'status'   => false,
    'message'  => 'Message Seen By User',
    'redirect' => 'Destination URL'
);

Whenever you process request you should change these indexes. for example if authentication was successful change status to true and redirect to destination url and etc. Eventually when you process everything do not user any header nor echo, at the end convert array to json and echo it: 

echo json_encode($response);

Refactor Your JS
Instead of using multiple $(document).ready use this for each event you want. eg: 

$(document).on('submit', '.login-message', function(){
    //Write Event Handling Here
});

Using JQuery AJAX
Instead of load use ajax: 

$.ajax({
    url: 'url/to/php',
    type: 'POST',
    data: {email: email, pwd: pwd, submit: submit},
    dataType: 'json',
    success: function(respond){
        if(!respond.status)
        {
            //Show respond.message to user
        }
        else
            Window.Location.href = respond.redirect;
    }
});

Or With JQuery Load
Using load for these kind of request is not appropriate enough, but: 

$(".login-message").load("include/login.inc.php", {email: email, pwd: pwd, submit: submit}, function(response, status, xhr){
    respond = JSON.parse(response);
    if(!respond.status)
    {
        //Show respond.message to user
    }
    else
        Window.Location.href = respond.redirect;
});

Upvotes: 1

Related Questions