提交按钮上的Javascript函数-等待它完成

我想在按下表单上的submit按钮时触发一个函数，等待javascript函数完成，然后继续表单提交。我不希望表单在javascript函数完成之前提交**

这就是我目前的情况：

函数自动建议（）{
var input=document.getElementById（'location'）；
变量选项={
类型：[]，
};
var autocomplete=new google.maps.places.autocomplete（输入，选项）；
}
函数getLatLng（）{
var geocoder=new google.maps.geocoder（）；
var address=document.getElementById（'location'）。值；
地理编码({
“地址”：地址
}，功能（结果、状态）{
if（status==google.maps.GeocoderStatus.OK）{
var latLng=results[0]。geometry.location；
$（'#lat'）.val（结果[0].geometry.location.lat（））；
$（'#lng'）.val（结果[0].geometry.location.lng（））；
}否则{
警报（“地理编码因以下原因未成功：“+状态”）；
}
});
}
window.onload=自动建议；

---

在这里，您需要调用

myFunction

onSubmit事件。

首先，您需要阻止提交表单，在

getLatLng（）

函数末尾添加一个

return false

然后在完成地理编码后，使用

document.getElementsByTagName（'form'）[0]手动提交表单。submit（）

---

这里有一个更新的JSFIDLE:

正如MasterAM所说的，您需要做的只是以下几点：

/// I've included the following function to allow you to bind events in a 
/// better way than using the .onevent = function(){} method.
var addEvent = (function(){
  if ( window.addEventListener ) {
    return function(elm, eventName, listener, useCapture){
      return elm.addEventListener(eventName,listener,useCapture||false);
    };
  }
  else if ( window.attachEvent ) {
    return function(elm, eventName, listener){
      return elm.attachEvent('on'+eventName,listener);
    };
  }
})();

/// add another window.onload listener
addEvent(window,'load',function(){
  /// find the form, obviously should use whatever id you have on your form
  var form = document.getElementById('my_form');
      form.preventSubmit = true;
  /// add our onsubmit handler
  addEvent(form,'submit',function(e){
    /// only stop the form if we haven't already
    if ( form.preventSubmit ) {
      /// place/call whatever code you need to fire before submit here.
      alert('submit was blocked!');
      /// after that code is complete you can use the following
      form.preventSubmit = false;
      form.submit();
      /// return false prevents the submit from happening
      return false;
    }
  });
});

---

您可以截取表单提交，中止表单提交，并将地理编码请求发送给Google

当服务器响应时，您可以从回调重新提交表单（或者在失败时显示错误）

将请求的状态存储在某个地方（为了简单起见，我在示例中使用了一个全局变量）。在本例中，它只是一个标志，指示地理编码请求是否成功完成（因此，现在，当提交表单并重新触发侦听器时，它将知道不重新发送地理编码请求）

请随意删除控制台日志记录

您可能还希望隐藏横向/纵向字段

var GeoCoded = {done: false}; // this holds the status of the geo-coding request

$(document).ready(function(){
    autosuggest(); // place your auto-suggest (now called autocomplete) box

    $('#myform').on('submit',function(e){

        if(GeoCoded.done)
            return true;

        e.preventDefault();
        console.log('submit stopped');
        var geocoder = new google.maps.Geocoder();
        var address = document.getElementById('location').value;

        // disable the submit button
        $('#myform input[type="submit"]').attr('disabled',true);

        // send the request
        geocoder.geocode({
            'address': address
        },
        function (results, status) {
            // update the status on success
            if (status == google.maps.GeocoderStatus.OK) {
                var latLng = results[0].geometry.location;
                $('#lat').val(results[0].geometry.location.lat());
                $('#lng').val(results[0].geometry.location.lng());
                // if you only want to submit in the event of successful 
                // geocoding, you can only trigger submission here.
                GeoCoded.done = true; // this will prevent an infinite loop
                $('#myform').submit();
            } else { // failure
                console.log("Geocode was not successful for the following reason: " + status);
                //enable the submit button
                $('#myform input[type="submit"]').attr('disabled',false);
            }


        });        

    });   

});

---

从我的研究中，我发现这是我可能需要的，但我并不真正理解它的用途：document.getElementById（'disable-submit'）.submit（）；我不完全确定您的问题出在哪里，但是一般的过程是监听表单的提交事件，取消它，执行您希望执行的任何异步操作，然后使用表单本身或使用AJAX提交您想要的回调。是的，我不知道如何做，点击按钮触发该功能，完成后运行submit。我将此代码添加到我的fiddle中，但无法使其工作：我已将fiddler链接添加到我的答案。您好。为什么

$（'#myform'）.submit（）不提交

重新触发

$（'#myform'）。在（'submit'，函数（e）{

？@MasterAM上，它将是一个连续循环，不断调用自己？是因为范围吗？是因为回调成功运行时我设置的标志（

GeoCoded.done=true；

）。还有其他向服务器提交数据的方法，例如使用AJAX。我更新了答案，使其更具描述性。

/// I've included the following function to allow you to bind events in a 
/// better way than using the .onevent = function(){} method.
var addEvent = (function(){
  if ( window.addEventListener ) {
    return function(elm, eventName, listener, useCapture){
      return elm.addEventListener(eventName,listener,useCapture||false);
    };
  }
  else if ( window.attachEvent ) {
    return function(elm, eventName, listener){
      return elm.attachEvent('on'+eventName,listener);
    };
  }
})();

/// add another window.onload listener
addEvent(window,'load',function(){
  /// find the form, obviously should use whatever id you have on your form
  var form = document.getElementById('my_form');
      form.preventSubmit = true;
  /// add our onsubmit handler
  addEvent(form,'submit',function(e){
    /// only stop the form if we haven't already
    if ( form.preventSubmit ) {
      /// place/call whatever code you need to fire before submit here.
      alert('submit was blocked!');
      /// after that code is complete you can use the following
      form.preventSubmit = false;
      form.submit();
      /// return false prevents the submit from happening
      return false;
    }
  });
});

var GeoCoded = {done: false}; // this holds the status of the geo-coding request

$(document).ready(function(){
    autosuggest(); // place your auto-suggest (now called autocomplete) box

    $('#myform').on('submit',function(e){

        if(GeoCoded.done)
            return true;

        e.preventDefault();
        console.log('submit stopped');
        var geocoder = new google.maps.Geocoder();
        var address = document.getElementById('location').value;

        // disable the submit button
        $('#myform input[type="submit"]').attr('disabled',true);

        // send the request
        geocoder.geocode({
            'address': address
        },
        function (results, status) {
            // update the status on success
            if (status == google.maps.GeocoderStatus.OK) {
                var latLng = results[0].geometry.location;
                $('#lat').val(results[0].geometry.location.lat());
                $('#lng').val(results[0].geometry.location.lng());
                // if you only want to submit in the event of successful 
                // geocoding, you can only trigger submission here.
                GeoCoded.done = true; // this will prevent an infinite loop
                $('#myform').submit();
            } else { // failure
                console.log("Geocode was not successful for the following reason: " + status);
                //enable the submit button
                $('#myform input[type="submit"]').attr('disabled',false);
            }


        });        

    });   

});