How to stop a form from submitting until an ajax function, that was called by onSubmit, has finished

Question

My code is below. I want the form to submit until after the ajax function has finished, that way the submit variable can be set properly. But submit always has the defaulted false value. How do I get the form to wait until the ajax call is completed and the submit variable is given a new value?

$("#CreateCandidateForm").on('submit', function (event) {
    var theFirstName = $("#FirstName").val();
    var theLastName = $("#LastName").val();
    var submit = false;

    $.ajax({
        type: "POST",
        url: "CreateSearch", // the method we are calling
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify({ firstName: theFirstName, lastName: theLastName }),
        dataType: "json",
        success: function (result) {
            if (result == false) {
                submit = true;
            }                     
        },
        error: function (exception) {
            event.preventDefault();
            console.log(exception);
            alert('Exception: ' + exception);        
        }
    });    
    return submit;
});

Run ajax post first, if result is true `$('#yourFormId').submit();` can solve your problem. — Berkay Yaylacı, Jun 22 '16 at 22:51

score 1 · Answer 1 · answered Jun 22 '16 at 23:21

jQuery.when() Provides a way to execute callback functions based on zero or more objects, usually Deferred objects that represent asynchronous events.

It will set the submit = true when the ajax requests is successful.

$.when( $.ajax({

          type: "POST",
          url: "CreateSearch", 
          contentType: "application/json; charset=utf-8",
          data: JSON.stringify({ firstName: theFirstName, lastName: theLastName })

       })).then( 

           function(result ){ // Success function
             if (result == false) {
                 submit = true;
             }

           },function(exception){ // failure function
                event.preventDefault();
                console.log(exception);
                alert('Exception: ' + exception);  
         });

So the create candidate form does in fact wait for the ajax CreateSearch call to finish, however, the value of submit does not change. I have tried leaving "return submit" after the .when().then, and having it in the success part of the .then() and same result — , Jun 24 '16 at 16:49

score 0 · Answer 2 · edited May 23 '17 at 11:46

Hi as i understood you need the submit set to true only when you get response from the server inside the result function , jQuery now defines a 'when' function for this purpose.

You may see the full answer in this question and use it for your ajax request :

Wait until all jQuery Ajax requests are done?

 $.when(ajax1()).done(function(a1){
  //a1 includes ajax1 response
    submit=true;
 });

 function ajax1() {
  return $.ajax({
    url: "someUrl",
    dataType: "json",
    data:  yourJsonData,            
    ...
  });
 }

score 0 · Answer 3 · answered Jun 22 '16 at 23:21

0

Just always return false;. This will always prevent the submit.

You can then submit it in the success callback:

success: function (result) {
    if (!result) {
        $(this).unbind('submit').submit();
    }                     
}

Don't forget to unbind the submit to prevent an infinite loop.

You should also remove the event.preventDefault() since you don't need it anymore.

answered Jun 22 '16 at 23:21

Simon

774
4
21

Sounds good, I tried it but still didn't work, don't know why, `ajax` just doesn't seem to work in `onsubmit` event. – Jose Manuel Abarca Rodríguez Jul 28 '21 at 21:00

How to stop a form from submitting until an ajax function, that was called by onSubmit, has finished

3 Answers3