Unable to use callback to get response from ajax call

Question

I'm using the jQuery Validator plugin to try to check whether an email address getting entered into the form is unique after an ajax call which passes the email to a script which checks to see if the email is already in the database. I'm using a callback function to try to get the results of the ajax query but the function always returns undefined. I'm not sure what I'm doing wrong. Here is the code:

jQuery.validator.addMethod("unique", function () {
    function foo(callback) {
        $.ajax({
            type: 'POST',
            async: true,
            url: '/form_processor',
            data: 'action=email_validate&email=' + $("#email").val(),
            success: callback
        });
    }
    var return_value = foo(function (result) {

        if (result !== 'g') {
            return false;
        } else {
            return true;
        }
    });
    alert(return_value);
}, "Email address taken. Choose another.");

Possible duplicate of [How to return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call) — 4castle, Nov 21 '17 at 03:34
I'm using a callback as suggested in that answer to try to avoid the problem but I'm still having the problem. — StevieD, Nov 21 '17 at 03:36
I think the problem is you alert before the callback is called? — Tree Nguyen, Nov 21 '17 at 03:41
Yes, but you're still attempting to return a value from the callback function, which doesn't work (as explained in that question). The `alert` needs to be inside the callback function, because that's the function that gets called when the `result` is received. — 4castle, Nov 21 '17 at 03:41

Jomy Joseph · Accepted Answer · 2017-11-21T04:57:42.420

If you are using jquery validator, in built method is their to validate, So your validate code will like,

$(document).ready(function(){
   $( "#myform" ).validate({
      rules: {
        email: {
          required: true,
          email: true,
          remote: {
            url: "form_processor",
            type: "post",
            data: {
              email: function() {
                return $( "#email" ).val();
              }
            }
          }
        }
      },
    messages:
         {
         email:
             {
                required: "Please enter your email address.",
                remote: "Email already taken"
             }
         }
    });
})

In server side you have to return (print) true or false code will be (if you are using php)

<?php 
$email =  $_POST['email'];
    $query = "SELECT ID FROM users WHERE user_email = "$email" LIMIT 1;";
    $results = $mysqli->query($query);
    if($results->num_rows == 0)
    {
        echo "true";  //good to register
    }
    else
    {
        echo "false"; //already registered
    }
}
else
{
    echo "false"; //invalid post var
}

?>

Unable to use callback to get response from ajax call

1 Answers1