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

Answer 1

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();
             }
         });
     }
});

Answer 2

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
        });
    });