Can not get ajax callback to a function

Question

I have a form for user to register new account. I use jquery + ajax to check availability of email address on form submission. In Jquery code I used e.preventDefault(); to prevent form submission if there is any error occurs. I tried the existed email address in the email input and click submit the form. It allows form to submit. It should not do this because ajax reponseText return true means that the email address is already existed in database.

Could anyone please tell me how to fix my code so that if ajax response returns true, it will prevent form submission and shows up errors.

I tried to read and follow this article but fails after so many attempts.

Here is my form:

<form role="form" method="post" id="signupForm" action="index.php?view=signup-gv">
                <div class="col-xs-6 border-right">
                    <div class="form-group">
                        <label for="exampleInputEmail1">Full Name</label>
                        <input type="text" class="form-control" id="regname" name="regname" placeholder="Full Name">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputEmail1">Email Address</label><span id="emailcheck"></span>
                        <input type="email" class="form-control" id="regemail" name="regemail" placeholder="Enter email">
                    </div>
                </div>
                <div class="form-group col-xs-6">
                    <label for="exampleInputPassword1">Password</label>
                    <input type="password" class="form-control" id="regpass" name="regpass" placeholder="Password">
                </div>
                <button style="position:relative; left: 15px; top: 10px;" class="btn btn-default" name="register" id="register">Register</button>
            </form>

Here my jquery code:

$(document).ready(function(){
$('#regname').focus(); 
$('#signupForm').submit(function(e) {
var regname = $('#regname'); 
var regemail = $('#regemail'); 
var regpass = $('#regpass'); 
var register_result = $('#register_result'); 
register_result.html('Loading..'); 
if(regname.val() == ''){ 
    regname.focus();
    register_result.html('<span class="errorss"> * Full name can not be blank</span>');
    e.preventDefault();
}
else if ($.trim(regemail.val()).length == 0) {
    regemail.focus(); 
    register_result.html('<span class="errorss">* Email address can not be blank</span>');
    e.preventDefault();
}
else if(regpass.val() == ''){ 
    regpass.focus();
    register_result.html('<span class="errorss">* Password can not be blank</span>');
    e.preventDefault();
}
emailCheck().done(function(r){
    if(r){
        $('#regemail').focus(); 
        $('#register_result').html('<span class="errorss"> This email address is already existed. Please choose another one </span>');
        e.preventDefault();
        }
    }); 

});
});
function emailCheck() {
var regemail = $('#regemail'); 
var emailcheck = $('#emailcheck');
emailcheck.html(''); 
var UrlToPass = {regemail:regemail.val()} ;
    $.ajax({ 
    type : 'POST',
    cache: false,
    data : UrlToPass,
    url  : 'emailcheck.php',
    success: function(responseText){ 
        if(responseText == 0){
            return false; // good to go
        }
        else{
            emailcheck.html('<span class="errorss"> This email is existed.</span>');
            return true; // This email is registered. Please try different one
        }
    }
    });

}

Use return false, with preventDefault() – Abhisek Malakar Feb 26 '15 at 05:45 — Abhisek Malakar, Feb 26 '15 at 05:45
tried this but still ... – Giang Nguyen Feb 26 '15 at 05:48 — Giang Nguyen, Feb 26 '15 at 05:48

score 0 · Answer 1 · edited May 23 '17 at 11:43

0

You are confusing yourself with sync and async functions. An ajax function makes an Async call and returns output in its callback. You are trying to wrap an Async function inside a normal function and expecting it to behave synchronously.

Your function returns before the Ajax call receives its output. Use

async: false

$.ajax({ 
    type : 'POST',
    cache: false,
     async: false,
    data : UrlToPass,

Refer to following for dettails:

How to make JQuery-AJAX request synchronous

edited May 23 '17 at 11:43

Community

1
1

answered Feb 26 '15 at 06:15

adnan kamili

8,967
7
65
125

i understood async and sync. Thats why i tried solution from this article: https://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call. But techniquely, i dont know what i did was correct or not? So if you find it a stupid error, please point it out and please how to fix it for my case. thank you very much – Giang Nguyen Feb 26 '15 at 06:30

Arun P Johny · Accepted Answer · 2015-02-26T08:01:12.733

0

First you are not returning anything from the emailCheck() function, but you are using it as if it is returning a promise object.

So

$(document).ready(function () {
    $('#regname').focus();
    $('#signupForm').submit(function (e) {
        var regname = $('#regname');
        var regemail = $('#regemail');
        var regpass = $('#regpass');
        var register_result = $('#register_result');
        register_result.html('Loading..');
        //prevent the form submit
        e.preventDefault();

        if (regname.val() == '') {
            regname.focus();
            register_result.html('<span class="errorss"> * Full name can not be blank</span>');
        } else if ($.trim(regemail.val()).length == 0) {
            regemail.focus();
            register_result.html('<span class="errorss">* Email address can not be blank</span>');
        } else if (regpass.val() == '') {
            regpass.focus();
            register_result.html('<span class="errorss">* Password can not be blank</span>');
        } else {
            emailCheck().done(function (r) {
                if (r) {
                    $('#regemail').focus();
                    $('#register_result').html('<span class="errorss"> This email address is already existed. Please choose another one </span>');
                } else {
                    $('#signupForm')[0].submit();
                }
            });
        }
    });
});

function emailCheck() {
    var regemail = $('#regemail');
    var emailcheck = $('#emailcheck');
    emailcheck.html('');
    var UrlToPass = {
        regemail: regemail.val()
    };
    var deferred = jQuery.Deferred();
    $.ajax({
        type: 'POST',
        cache: false,
        data: UrlToPass,
        url: 'emailcheck.php',
        success: function (responseText) {
            if (responseText == 0) {
                deferred.resolve(false);
            } else {
                emailcheck.html('<span class="errorss"> This email is existed.</span>');
                deferred.resolve(true);
            }
        },
        error: function () {
            deferred.reject();
        }
    });
    return deferred.promise();
}

edited Feb 26 '15 at 08:01

answered Feb 26 '15 at 06:31

Arun P Johny

384,651
66
527
531

Set your async:false in the ajax call in emailcheck function – Abhisek Malakar Feb 26 '15 at 06:37
@AbhisekMalakar why would anybody do that? – Arun P Johny Feb 26 '15 at 06:38
i got this error from firebug: TypeError: deferred.pomise is not a function? – Giang Nguyen Feb 26 '15 at 06:41
@GiangNguyen a typo `return deferred.promise();` – Arun P Johny Feb 26 '15 at 06:43
you save my bunches of time. It works now. thank you very much! – Giang Nguyen Feb 26 '15 at 06:50
what is r stand for in this line of code: `emailCheck().done(function (r) { if (r)` – Giang Nguyen Feb 26 '15 at 07:18
@GiangNguyen that is the `true/false` passed to `deferred.resolve()` – Arun P Johny Feb 26 '15 at 07:18
so if (r) is true or false? – Giang Nguyen Feb 26 '15 at 07:19
sorry Arun P Johny, please help me this time. According to your code, if I tried new email address in email field and leave all other field blank, it will let the form submitted.? How to overcome this issue please? – Giang Nguyen Feb 26 '15 at 07:45
in my form action ="process.php". This process.php file actually got this line of code: `if (isset($_POST['submit'])){ //some code here}`. But in the jquery You put this code: `$('#signupForm')[0].submit();`. Then php file won't regconize submit button, so it won't do anything. I would like to keep isset($_POST['submit'] part for good purpose, then how to fix jquery code? – Giang Nguyen Feb 26 '15 at 08:16
you can't because the form submit is done after a ajax request.... though you can create a hidden input element with name `submit` and set a value to it – Arun P Johny Feb 26 '15 at 08:19
excellent. I did not think of that. Thank you very much. Now my code working great. Thanks you very much Arun ! – Giang Nguyen Feb 26 '15 at 08:32

Can not get ajax callback to a function

2 Answers2