在Jquery中如何在提交前使用回调运行代码 [英] in Jquery how to run code with callback before submit

问题描述

我需要在提交表单之前运行一些 jquery 代码，但似乎存在一些问题.

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

我需要，按下提交"按钮后，首先使用谷歌 API 计算地址的经度和纬度变量，然后提交表单.这需要在回调函数中监听响应.

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.

推荐答案

你应该在表单上使用 submit 事件，而不是按钮的 click 事件.某些浏览器允许在表单中的某些字段获得焦点时不使用提交按钮而直接提交表单.

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.

preventDefault 方法会停止表单的提交，以便稍后提交:

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

要使用按钮提交表单，您需要跟踪提交表单的原因:

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

这篇关于在Jquery中如何在提交前使用回调运行代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！