Return value from ajax form

Question

I have a login form in php. I have used ajaxform so that the page does not get reloaded when the username or password is wrong. I have another page checklogin.php which checks whether the username and pw is there in the database and it returns the count of the number of rows. I want to compare the count in the login.php and display the error message if the count=1 and redirect to another page if count=2. I tried to display the count in an errordiv using target: 'errordiv' and checking its innerHTML but it failed to do so.

My login.php

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
  <script type="text/javascript" src="scripts/jquery.form.js"></script>
<!--Slider-in icons-->
<script type="text/javascript">


    function checklogin()
    {
     var request=$("#login-form").ajaxForm(
                    {

                  target:'#errordiv'

                    }).abort();
                request.submit();
        var divmsg=document.getElementById("errordiv");
        if (divmsg.childNodes[0].nodeValue == "1")
            {
        divmsg.childNodesp[0].nodeValue="Sorry";
        alert ("Invalid username or password");} //I didn't get the alert as well a the divmsg content didn't change


                    };
</script>

</head>
<body>

<!--WRAPPER-->
<div id="wrapper">

<!--LOGIN FORM-->
<form name="login-form" id="login-form" class="login-form" action="checklogin.php" method="post">


    <!--CONTENT-->
    <div class="content">
    <!--USERNAME--><input name="un" type="text" class="input username" placeholder="Username" onfocus="this.value=''" required="required" /><!--END USERNAME-->
    <!--PASSWORD--><input name="pw" type="password" class="input password" placeholder="Password" onfocus="this.value=''" required="required" /><!--END PASSWORD-->
    </div>
    <!--END CONTENT-->

    <!--FOOTER-->
    <div class="footer">
    <!--LOGIN BUTTON--><input type="submit" name="submit" value="Login" class="button" onclick="checklogin()" /><!--END LOGIN BUTTON-->

    </div>
    <!--END FOOTER-->

</form>
<div id="errordiv" class="errordiv"></div>
<!--END LOGIN FORM-->

checklogin.php

<?php

 include ('dbconn.php');
       $user = trim($_POST['un']);
        $pass = trim($_POST['pw']);
        $user = mysql_real_escape_string($user);
        $pass = mysql_real_escape_string($pass);
       $result=mysql_query("select Id from login where Username='$user' and Password='$pass'") or die (mysql_error());
      $result= mysql_fetch_assoc($result);
     $num= count ($result);
    echo $num;
?>

How can I get the value of $num in login.php without displaying it to a div and compare the value of $num and accordingly display the errormsg in errordiv or if $num==2 redirect to another page.

possible duplicate of [How to return the response from an AJAX call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call) — elclanrs, Jul 11 '13 at 02:41
They're similar enough, since they both use AJAX. The critical thing to remember is that AJAX is Asynchronous, it doesn't wait for the response. Anything that depends on the response has to be done in the callback function. — Barmar, Jul 11 '13 at 02:48

score 1 · Answer 1 · answered Jul 11 '13 at 02:47

Change your code to include the code which change the div and provide alert to be included in the callback.

     var request=$("#login-form").ajaxForm(
                 {
                  target:'#errordiv', 
                  success: function (html) {
                      if ($("#errordiv).html() == "1") {
                          $("#errordiv).html("Sorry");
                          alert ("Invalid username or password");  
                      }
                  }
                    }).abort();
                request.submit();

Not working It redirects the page to checklogin.php and displays 1 — user1583647, Jul 11 '13 at 02:56

Chickenrice · Answer 2 · 2013-07-11T03:11:50.280

0

Maybe try to make the checking request asynchronously and process user feedback in AJAX callback:

JS:

    $(function(){
        $("#login-form").ajaxForm(function(response){
            if(response.count===1){
                $("#errordiv").html("msg you want to show");
            }else if(response.count===2){
                //redirect
            }
        });
    });

php:

<?php
    header("Content-Type: application/json");

    //your database check logic
    $user = trim($_POST['un']);
    $pass = trim($_POST['pw']);
    $user = mysql_real_escape_string($user);
    $pass = mysql_real_escape_string($pass);
    $result=mysql_query("select Id from login where Username='$user' and Password='$pass'") or die (mysql_error());
    $result= mysql_fetch_assoc($result);
    $num= count ($result);

    //and return response in JSON
    echo json_encode(array("count"=>$num));

?>

Hope this is helpful for you.

[EDIT]

remove the form submit button inline JS function invoking:

onclick="checklogin()"

and put checklogin function logic to document ready callback, initialize the form when the DOM is ready

edited Jul 11 '13 at 03:11

answered Jul 11 '13 at 02:56

Chickenrice

5,727
2
22
21

Didn't work. It redirects the page to checklogin.php and displays {"count":1} – user1583647 Jul 11 '13 at 03:04
It is still being redirected to checklogin.php – user1583647 Jul 11 '13 at 03:19
$(document).ready(function() { $(function() { ("#login-form").ajaxForm(function(response) { if(response.count ===1){ $("#errordiv").innerHTML("Sorry invalid username or password"); } else {$("#errordiv").innerHTML("Correct");} }); }); }); – user1583647 Jul 11 '13 at 03:35
Try to remove the outer one: $(document).ready(function() {}). $(document).ready(function() {}) is equal to $(function(){}) – Chickenrice Jul 11 '13 at 03:38
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/33237/discussion-between-user1583647-and-chickenrice) – user1583647 Jul 11 '13 at 03:44

Return value from ajax form

2 Answers2