Javascript / Ajax / PHP - 小问题让我疯狂

Question

I need some guidance, as im literally going crazy here.

Ive created code with php/js/ajax to check if email address exist when submitting.

So ive tested the ajax and the correct values are being returned. (checked via firebug)

Either 1 for user exists
or     2 for user doe not exist.

Now ive added an alert box to check the value and for some strange reason it always displays value 1! (even though ajax value is 2)

    function validateForm() {
        var x3=document.forms["newuser"]["email"].value;

        //Check if username exists.
        $.post(
            "http://...check_user_exists.php",  
            {
                x3 : x3  //user email
            },

            function(data) {
                email_check = parseInt((data.email_exists),10);
            }
        );

        //Additional Checks      
        if (email_check = 1) {
            $("#form_status").fadeIn("slow");
            $("#form_status").text("Email Address Taken.");
            alert(email_check);
            return false;   
        }

        if (email_check = 2) {
            $("#form_status").fadeIn("slow");
            $("#form_status").text("Email ok.");
            alert(email_check);
            return true;    
        }

        more validation checks....

Hi all, and again... thank you for your kind guidance. Firstly, I would like to apologize as i'm quite new to this... I've moved forward slightly but stuck on the last part and not sure how to proceed.

So the form now validates the form elements and checks the email to see if it exists. The only issue I have left is if the email value is ok, the form does not process. Is there a way to set submit value to true with the ajax callback function?

<form name="newuser" id="form" method="post" action="do_new_user.php" onsubmit="return    validateForm()"> 

function validateForm()
{
var x=document.forms["newuser"]["name"].value;
var x2=document.forms["newuser"]["surname"].value;
var x3=document.forms["newuser"]["email"].value;
var x4=document.forms["newuser"]["password1"].value;
var x5=document.forms["newuser"]["password2"].value;

if (x==null || x=="") 
  {

  $("#form_status").fadeIn("slow");
  $("#form_status").text("Please enter your name.");
  return false;
  }

  //more validation.....

//Check if username exists.
$.post("http://ryangosden.com/breadcrumbs/check_user_exists.php",  
         {
            x3 : x3
         } , 

         function(data)
          { 

            var obj = jQuery.parseJSON(data);

            if (obj.email_exists == 1) 
              {   
                $("#form_status").fadeIn("slow");
                $("#form_status").text("Email Address Taken.");

            }  

            if (obj.email_exists == 2)   
              {   
            $("#form_status").fadeIn("slow");
                $("#form_status").text("Email ok.");
                validateForm(true);
              }  
});

return false;  

}

Thanks again all.

Answer 1

The callback function is called asynchronously. Therefore you cannot call validateForm() in the way that you are expecting to, which contacts the server, parses the result, and returns true or false. What actually happens is that the $post( ... code runs, but does not wait for the response. Instead, it immediately continues through the code if (email_check = 1) { ... (which should have a == instead of =) without waiting for the POST response. Only later when the response is received is email_check actually set via the callback function, but the remainder of validateForm() has already completed.

Instead, whatever you intend to do with the return value, you must do in the callback function itself. That is, replace

function(data)
    { 
    email_check = parseInt((data.email_exists),10);
    });

with

function(data)
    { 
    email_check = parseInt((data.email_exists),10);
    alert("In callback: email_check = "+email_check);
    if (email_check == 1) {
        $("#form_status").fadeIn("slow");
        $("#form_status").text("Email Address Taken.");
    }

    if (email_check == 2) {
        $("#form_status").fadeIn("slow");
        $("#form_status").text("Email ok.");
    }
    });

Anything else you were doing with the return value of validateForm() should also go in the callback function.