How to Do a Jquery Callback After Form Submit

How to do a Jquery Callback after form submit?

I just did this -

 $("#myform").bind('ajax:complete', function() {

         // tasks to do 


   });

And things worked perfectly .

See this api documentation for more specific details.

JavaScript/jQuery Callback on(submit)

You need to call the callback after the alert, not after binding the submit handler.

function formSubmit(callback) {
    $("form").on("submit", function(e){
        e.preventDefault();
        alert("I just submitted the form.");
        callback();
    });   
}

callback when form submitted using submit() method

Attach handler in you form's onsubmit event first, then inside that handler call ajax, when ajax is successful the display message done:

   $form = $("#form"); 
    $form.on("submit",function()
    {
       alert("submitting..");
       //do ajax
       $.ajax({
                 url:<submit url>,
                 type:post/get,
                 success:function() { alert("done");  }
             });
    });
     $form.submit();

Please read more about DOM event handling and ajax using JQuery/Javascript.

jQuery callback after Gravity Form submit

You can call jQuery that has to be run after gravity form submit like this

<script type="text/javascript">
jQuery(document).bind('gform_post_render', function(){
   addServiceListeners();
});

Here is detail about 'gform_post_render' that is provided by Gravity form.
https://www.gravityhelp.com/documentation/article/gform_post_render/

Call a function when submit finish

The way I've done this in projects is to have the response containing the PDF set a cookie (since I can't have it run code, it's not a web page). Then I can poll for the cookie in the page sending the form. In pseudo-code:

$(form).submit();
var timeout = Date.now() + TIMEOUT_IN_MILLISECONDS;
poll();
function poll() {
    if (theCookieValueExists()) {
        // Done
    } else if (Date.now() > timeout) {
        // Give up
    } else {
        // Keep waiting
        setTimeout(poll, POLL_INTERVAL);
    }
}

I send the cookie name and value with the form, ensuring that they're (very likely to be) unique, so that if this is happening in multiple windows the code doesn't get confused.

in Jquery how to run code with callback before submit

You should use the submit event on the form, not the click event of the button. Some browsers allow the form to be submitted without using the submit button by just pressing enter when some field in the form has focus.

The preventDefault method will stop the submitting of the form, so that you can submit it later:

$("form").submit(function(e){
  e.preventDefault();
  var address = $(this).find('.address').val();
  geocoder.geocode( { 'address': unescape(address)}, function(results, status) 
  {
      if (status == google.maps.GeocoderStatus.OK) 
      {
        $(".latSelector input:hidden").val(results[0].geometry.location.lat());
        $(".lngSelector input:hidden").val(results[0].geometry.location.lng());
        $("form")[0].submit();
      }
   });  
});

Edit:

To submit the form using the button, you need to keep track of why the form is submitted:

var reason = 'user';

$("form").submit(function(e){
  if (reason == 'user') {
    e.preventDefault();
    var address = $(this).find('.address').val();
    geocoder.geocode( { 'address': unescape(address)}, function(results, status) 
    {
      if (status == google.maps.GeocoderStatus.OK) 
      {
        $(".latSelector input:hidden").val(results[0].geometry.location.lat());
        $(".lngSelector input:hidden").val(results[0].geometry.location.lng());
        reason = 'callback';
        $("form input:submit").click();
      }
    });
  }
});

How to create callback for form submit event (without ajax)

A solution has come to me that will allow me to submit my form without reloading the page, not use an iframe or JSONP, and while it probably technically counts as AJAX, it does not have this same "cross origin" issue.

function uploadFile() {

    var file = document.getElementById('file').files[0];
    var fd = new FormData();

    fd.append('key', "${filename}");
    fd.append("file",file);

    xhr = new XMLHttpRequest();

    xhr.upload.addEventListener("progress", uploadProgress, false);
    xhr.addEventListener("load", uploadComplete, false);
    xhr.addEventListener("error", uploadFailed, false);
    xhr.addEventListener("abort", uploadCanceled, false);

    xhr.open('POST', 'http://fake-bucket-name.s3-us-west-1.amazonaws.com/', true); //MUST BE LAST LINE BEFORE YOU SEND 

    xhr.send(fd);
}

function uploadProgress(evt) {
    if (evt.lengthComputable) {
      var percentComplete = Math.round(evt.loaded * 100 / evt.total);
      document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
    }
    else {
      document.getElementById('progressNumber').innerHTML = 'unable to compute';
    }
}

function uploadComplete(evt) {
    /* This event is raised when the server send back a response */
    alert("Done - " + evt.target.responseText );
}

function uploadFailed(evt) {
    alert("There was an error attempting to upload the file." + evt);
}

function uploadCanceled(evt) {
    alert("The upload has been canceled by the user or the browser dropped the connection.");
}

With a simple form like this:

<form id="form1" enctype="multipart/form-data" method="post">
    <div class="row">
      <label for="file">Select a File to Upload</label><br>
      <input type="file" name="file" id="file">
    </div>
    <div id="fileName"></div>
    <div id="fileSize"></div>
    <div id="fileType"></div>
    <div class="row">
      <input type="button" onclick="uploadFile()" value="Upload">
    </div>
    <div id="progressNumber"></div>
</form>

The uploadComplete(evt) function being the callback. As you can see, it also gives you the percentage complete you can show your users.

Note: To do this you have to set the correct upload policy and CORS
policy in your S3 account.
– RonSper

JQuery form submit doesn't work when callback function is used

According to submit API

handler
Type: Function( Event eventObject )
A function to execute each time the event is triggered.

so you need to bind handler and then call action

$("#form_exceller").submit(function(e){
  console.log("frustrating");
});
$("#form_exceller").submit();

jQuery form Submit doesn't work when there is a callback function

Well, there are multiple things to say here.

First of all, you bound the "submit" handler to the form -- this is correct because forms have a "submit" event, not buttons.

Second all, HTML tags don't submit forms unless their type is "submit". So that explains why the handler you bound to the form's submit handler doesn't run.

Third, every time you execute .bind( ) it will bind another "copy" of the handler to the event, so when you finally click the tag, it will execute multiple times.

And fourth, you don't have to write "javascript:" in your onclick="" attribute. In fact, it's much better practice to leave active javascript code out of your HTML, and instead bind the events -- much like you are doing above -- in a function passed to jQuery. See http://api.jquery.com/ready/

Finally, since you are doing alert right before the submit, I'm guessing you might want to cancel the form submit -- so look into http://api.jquery.com/event.preventDefault/

Here is javascript code that does what you might actually want:

    jQuery(function ($) {
            $('#form').submit(function (e) {
                    // do what you have to do
                    e.preventDefault();
            });
    });

---

Related Topics