Ajax function in form submit

The problem here is that you are doing the validation check outside the AJAX call.

You should do the whole validation thing inside the AJAX response function.

The reason it works fine when you add an alert before that validation is because the AJAX thing will need a second or two to complete and while the user clicks on the alert message, the ajax is complete and the variable emailExists will be filled with a new value.

But when there is no alert there is no “wait time” and so the script will complete even though the AJAX is still in progress. To fix that you need to put the whole validation of the Email inside the response function of the AJAX requrest.

Optional: You could make that inside a separate javascript function such as validateEmail() and then call that function inside the response function of the AJAX request.

Ok, thanks: I’ll try that.

I had tried this:

for(var i=0;i<60;i++){
    if(emailExists=='true'){
      warning=document.getElementById('email_r');
      warning.innerHTML='This email is already taken';
      warning.style.display='inline';
      warning.scrollIntoView();
      return false;
    }else if(emailExists=='false'){
      return true;
    }
    sleep(1000);
  }

function sleep(delay) {
  var start = new Date().getTime();
  while (new Date().getTime() < start + delay);
}

Firefox will timoout with a dialog box asking you to terminate the script or continue. If you “Continue”, then the Ajax call completes. In other words, the same behaviour as the “alert(‘somestuff’)”.

However, this isn’t consistent amongst other browsers.

That’s not what Igor meant. ??

You have to do the checks inside the response function that happens after the result is returned. Like this..

function validate_form(){
  var emailExists='';
  jQuery(document).ready( function($) {
        data={'action': 'checkemail_exists','umail': document.getElementById('email').value};
        jQuery.post( ajax_url, data, function(response) {
              emailExists=response;

              // Your checks go in this area.

              if(emailExists=='true'){
                  warning=document.getElementById('email_r');
                  warning.innerHTML='This email is already taken';
                  warning.style.display='inline';
                  warning.scrollIntoView();
                  return false;
              }
        });
    });

  return true;
}

Again, your issue is that you have to wait until after the result comes back before you can check anything, and the best way to do this is to do this inside the response function as you know that you will have a response.

Yes, I posted that as a possible solution before I tried your suggestion of placing the validation code inside the Ajax function.

Placing the validation code inside the Ajax function works fine in Firefox, but not in Chrome where the submit button does not return so the user is left wondering why there is no response to him clicking the submit button.

I’ve (sort of) resolved this by adding an “onblur” event to the email field which calls the ajax function which sets a global variable if the email already exists and checking this variable in the validation code.

While this seems to work, I’m not convinced it is the recommended best practice, so I won’t mark this thread as “RESOLVED” just yet.

The JavaScript is your examples isn’t the best, and doesn’t quite do things the way that it should. It will work, but… ?? For a start, the call to jQuery(document).ready() should be a wrapper for everything.

I’d suggest something like this. You’d need to substitute your own ID’s for the submit button and the form, but this is more likely the way that it should be structured. This will also let you remove the onclick="" attribute from your form as that is all taken care of by the click action on your submit button.

jQuery (document).ready (function () {

    jQuery ('#submit_button_id').click (validate_form);

});

function validate_form (e) {
    e.preventDefault ();

    var data = {
        'action': 'checkemail_exists',
        'umail': jQuery ('#email').val ()
    };

    jQuery.post (ajax_url, data, function (response) {
        if (response == 'true') {
            warning = jQuery ('#email_r');
            warning.html ('This email is already taken');

            warning.style.display = 'inline';
            warning.scrollIntoView ();
        }
        else {
            jQuery ('#registration').submit ();
        }
    });
}

Thanks!

When I get a moment, I’ll study that.

I’m afraid that the JQuery stuff is a little esoteric for me and I tend to stick to plain Javascript where I can.

:+)