How to use return properly in Ajax jQuery?

Question

I am having problem with this login form. It is not letting me login to next page. It shows me if email and password match but it just doesn't let me log in. Please have a look and tell me what is wrong with it or suggest me something that will work. Thank you

HTML CODE

<div id="loginForm">
    <form id="formLogin" method="post" action="login.php"  >
    <input type="text" id="eMailTxt" placeholder="Email Address" />
    <input type="password" id="passWordTxt" placeholder="password" />
    <p></p>
    <input type="submit" value="Login" id="submitBtn" class="Btn" />
    </form>
</div>

jQuery AJAX CODE

    $(document).ready(function(){

        $("#formLogin").submit(function(){
        $a = $("#eMailTxt").val();
        $b = $("#passWordTxt").val();


        $.post("loginCheck.php",{
            email: $a,
            pass: $b
            },function(data){
                if (data=="false")
                {
                    $(".loginForm p").html("Password does not match").css({'color':'red'});
                    return false;
                }
                else
                {
                    $(".loginForm p").html("Password match").css({'color':'green'});
                    $("#formLogin").submit(); //I've tried return true and this submit function but none worked.
                }
            });
            return false; 
//If I turn this true, it logs in everytime even if password doesn't match. And if it's false, it will return false everytime even if password is correct
        });
    });

PHP CODE

<?php
    $q=$_POST["email"];
    $s=$_POST["pass"];
    $con=mysqli_connect("localhost","root","","SocialNetwork");
    $check="SELECT PassWord FROM people WHERE EMAIL = '".$q."'";
    $data=mysqli_query($con,$check);
    $result=mysqli_fetch_array($data);
    if ($s != $result[0])
    {
        echo "false";
    }
    else
    {
        echo "true";
    }
?>

*Tell us what you've tried to do, why it didn't work, `[...]` see also: [**Stack Overflow question checklist**](http://meta.stackexchange.com/questions/156810/stack-overflow-question-checklist)* — Jeff Noel, Jul 08 '13 at 17:20
You don't need the `$.post()` here at all. Just perform your validation in the "submit" handler, and return `true` if everything is valid. Otherwise, return false. — Pointy, Jul 08 '13 at 17:21
You can't return from an asynchronous callback. A solution similar to the one posted here will work: http://stackoverflow.com/questions/17238994/confirmation-to-pause-form-submit-until-ok-has-beenpushed/17239093#17239093 Prevent the submit completely, do the ajax request, then if successful, submit the form via the native submit method. — Kevin B, Jul 08 '13 at 17:23

score 0 · Answer 1 · answered Jul 08 '13 at 17:33

Try this different AJAX structure - it may work better for you.

Also, I changed your PHP code to just echo back what you sent (as a test, to verify that the PHP processor file is receiving what you expect).

From here, you should be able to add things back one at a time and make it all work.

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

        <script type="text/javascript">

            $(document).ready(function() {

                $("#formLogin").submit(function(){
                    $a = $("#eMailTxt").val();
                    $b = $("#passWordTxt").val();

                    //alert($a +' '+ $b);

                    $.ajax({
                        type:"POST",
                        url: "loginCheck.php",
                        data: 'email=' +$a+ '&pass=' +$b,
                        success: function(data) {
                            alert(data);
                        }
                    });
                    return false; //This line prevents form submit -- REMOVE when done testing
                });

            }); //END $(document).ready()

        </script>
    </head>
<body>

    <div id="loginForm">
        <form id="formLogin" method="post" action="login.php"  >
        <input type="text" id="eMailTxt" placeholder="Email Address" />
        <input type="password" id="passWordTxt" placeholder="password" />
        <p></p>
        <input type="submit" value="Login" id="submitBtn" class="Btn" />
        </form>
    </div>

</body>
</html>

PHP CODE: loginCheck.php

<?php
$q=$_POST["email"];
$s=$_POST["pass"];

die('Received: ['.$q.'] and ['.$s.']'); //Remove this line when done first test

$con=mysqli_connect("localhost","root","","SocialNetwork");
$check="SELECT PassWord FROM people WHERE EMAIL = '".$q."'";
$data=mysqli_query($con,$check);
$result=mysqli_fetch_array($data);
if ($s != $result[0])
{
    echo "false";
}
else
{
    echo "true";
}

How to use return properly in Ajax jQuery?

HTML CODE

jQuery AJAX CODE

PHP CODE

1 Answers1