in Jquery how to run code with callback before submit

问题

I need to run some jquery code before submitting a form and there seem to be some issues.

Just hear me out before you rush to recommend this:

$(function() {
     $('form').submit( function() {
         /* some code */
         return true;
     });
});

I need , after pressing the "submit" button first calculate the longtitude and latitude variables of an address using google API and then submit the form. That requires listening for a response in a callback function.

The code I have so far looks like this:

  $("form input:submit").click(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").submit();
          }
       });  
  });

If I do the same using the "submit" function, the form submits before the callback function is triggered and the code behind executes with missing values.

If I use the "click" event on the button like the code above and submit manually, then the code executes correctly but the submit doesn't trigger the code behind of the form.

I think I am close to getting this to work but I can't find the magic combination that will run the code, process the callback values and then submit the form correctly, so that the code behind executes.

回答1:

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

回答2:

Simply:

call the callback function.
return false when submit is thrown by the user (i.e. don't submit).
at the end of the callback, put a code that do the submit with trigger function

Fast example code:

$('elem').click(function{
  callback();
  return false;
})

and in callback() you should submit the form. This is a good practice also when you execute transitions.

EDIT TO ANSWER TO YOUR COMMENT For sake of completenes, I will provide the full example for my answer. Please, consider that my answer does not require further variables, as suggested by Guffa.

You can check it here, and here follows the code:

$('input[type="submit"]').click(function(e){
    var address = 'London, UK';
    var geocoder = new google.maps.Geocoder();
    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());
        alert("DATA TAKEN BEFORE TO SUBMIT");
        $('form').submit();
      }
    });

  return false;
});

Finally, consider that the common user will do as follows:

User click the submit button
User suppose to see the subsequent page, while the client is waiting for the callback to be complete.
So, impatient user will click again to the send button.

Hence, I also suggest to disable the submit button after that "click" event is triggered by the user.

Finally, I suggest to always use return false instead of preventDefault() in order to stop such a event propagation, read here why.

回答3:

I've come up with a probably simpler solution to avoid Guffa's initial submission loop.

Once the callback ends, simply unbind (using unbind() or off()) submit handler and then do the submit the form. The loop is broken;)

回答4:

This may be against some arbitrary standard acceptable practice, but I would just prevent form submission via the enter key with something like this:

$('form').bind("keyup keypress", function(e) {
  var pressedKey = e.keyCode || e.which; 
  if (pressedKey  == 13) {               
    e.preventDefault();
    return false;
  }
});

Then I would set the actual submit button to display:none and use a element to fire the original code you had in the question using .click() as suggested by Guffa. Done deal without the extraneous User/Callback conditional logic.

$("button#Submit").click(function(){
      var address = $("form").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 input:submit").click();
          }
       });  
  });

来源：https://stackoverflow.com/questions/14241980/in-jquery-how-to-run-code-with-callback-before-submit

标签

jquery

events

callback

click

submit