AJAX request before regular form is being submitted

Question

I have a jQuery form validation script that is executed while user is trying to submit. I would like another function with AJaX request to be executed (and completed) after the form is validated but before it is sent.

Here is the script. The zglosip function works okay when called separately; i.e. not from inside the submit() function.

zglosip(); (function that I want to be called)

function zglosip() {
        $.ajax({
            type : 'post',
            url : 'res/php/nZglos.php',
            data : {
            "erepid" : "111",
            "ip" : "222",
            "poz" : "333"
            },
            success : function(data, textStatus, jqXHR) {
            tempor.html(data);
            },
            error : function(XMLHttpRequest, textStatus, errorThrown) {
            tempor.html(errorThrown);
            },
            dataType : 'text'
            return true;
        });
    };

validation script (created by Joren Rapini and modified by me)

pole & tempor are variables containing names of some divs

$("#forml").submit(function(){  
    //Validate required fields
    if ((pole.val() == "") || (pole.val() == blad)) {
        pole.addClass("podkresl");
        pole.val(blad);
    } else {
        pole.removeClass("podkresl");
    }
    // Validate the e-mail.
    if (!/\b(https?|ftp|file):\/\/[\-A-Za-z0-9+&@#\/%?=~_|!:,.;]*[\-A-Za-z0-9+&@#\/%=~_|]/.test(pole.val())) {
        pole.addClass("podkresl");
        pole.val(blad);
    }


    if ($(":input").hasClass("podkresl")) {
        return false;
    } else {
      if (zglosip() == true) {
          return true
      }
    }
});

As you have already found out, I had tried to return true of the submit() function after the zglosIp() returned true (the if statement at bottom of the script). This did not work unfortunately, I have also tried calling zglosip() with separate function{return true} in it but surely I have not used it properly. Please help me.

Answer 1

In my case I had to remove the submit type from the button and then I had to call a method that checked the validity of the data I had to submit.

<input type="button" value="Save" class="btn btn-success" id="submitbutton" /> 

Then I wrote a method that does the check and returns true if I have to stop and ask to continue:

 public ActionResult CheckBeforeSubbmission(datatype  var1)
 {
    if(var1>0)
         return Json(new { result1 = true });
    else
        return Json(new { result1 = false });
 }

After that I added the javascript/ajax the code below:

  $("#submitbutton").click(function (e) {

        var self = $('#form');
        //A value from the form to post to the controller
        var var1 = $('#var1elementid').val();


        $.ajax({
            type: "POST",
            url: "/SomeController/CheckBeforeSubbmission",
            data: {
                var1: var1
            },success: function (response) {
                if (response.result1) {
                    bootbox.confirm({
                        message: "The check failed! Do you want to submit?",
                        buttons: {
                            confirm: {
                                label: 'Yes',
                                className: 'btn-success'
                            },
                            cancel: {
                                label: 'Cancel',
                                className: 'btn-danger'
                            }
                        },
                        callback: function (result) {
                            if (result) {
                                self.submit();
                            } else {
                                bootbox.hideAll();
                                return false;
                            }
                            return false;
                        }
                    });
                } else {
                    self.submit();
                }
            },
            cache: false
        });
    });

Answer 2

You want to first ensure the form is not being submitted, then run your ajax call, and if the call is successful, proceed to submit. Note I removed the ajax call from zgoslip and put it in the submit handler for the form. you can restructure it the way you want:

$('form').submit(function(e) { 

     // this code prevents form from actually being submitted
     e.preventDefault();
     e.returnValue = false;

     // some validation code here: if valid, add podkres1 class

     if ($('input.podkres1').length > 0) { 
        // do nothing
     } else {

        var $form = $(this);

        // this is the important part. you want to submit
        // the form but only after the ajax call is completed
         $.ajax({ 
             type: 'post',
             url: someUrl, 
             context: $form, // context will be "this" in your handlers
             success: function() { // your success handler
             },
             error: function() { // your error handler
             },
             complete: function() { 
                // make sure that you are no longer handling the submit event; clear handler
                this.off('submit');
                // actually submit the form
                this.submit();
             }
         });
     }
});