使用jQuery，如何在提交表单事件触发之前等待onChange事件完成？

Question

使用jQuery，如何在提交表单事件触发之前等待onChange事件完成？

3

假设我的网页中有一个文本框，并且我使用jQuery在此文本框上附加了“change”事件。

$('.myFormClass').on('change', '.amount', function () {            
    // Some AJAX call here, and the response is assigned to a variable
});

我还有一个表单提交事件，

$('.myFormClass').on('submit', 'form', function (e) {
  // some code in which I use the response from the earlier AJAX call returned against 'change' event
});

问题在于“change”事件单独使用时可以正常工作，但在提交表单时它们几乎同时触发，直到针对“change”事件的AJAX调用被返回（应该是），表单已经被提交，因此我无法使用需要在表单提交之前出现的AJAX响应。

是否有jQuery内置的解决这种情况的方法？如果没有，有任何其他有效的解决方案吗？

- user1451111

将您的.submit()方法注册到第一个ajax调用的success函数中。 - Vasu Kuncham

@VasuKuncham，您的建议在我的情况下无效，因为我不想在每个onChange事件上提交表单，而是在用户使用传统方法实际提交表单时提交。 - user1451111

3个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ellipsis · Answer 1

添加一个按钮。当用户点击按钮时，布尔值将设置为true，如果为true，则仅提交操作将发生，否则仅onchange函数将起作用而不是提交函数。

var sub=false;
$(document).ready(function(){
$('button').click(function(){sub=true;console.log(sub)})
$('.myFormClass').on('change', '.amount', function () {            
    // Some AJAX call here, and the response is assigned to a variable
    console.log('changed')
});

$('.myFormClass').keypress((e)=>{if(e.keyCode=='13'){e.preventDefault();console.log('not submitted on enter')}})
$('.myFormClass').click( function (e) {

e.preventDefault();
console.log("submit cancelled")
if(sub)
  $(this).submit();
  // some code in which I use the response from the earlier AJAX call returned against 'change' event

});

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="myFormClass">
aa
<input class="amount">
<input type="submit">
</form>
<button>Want to submit the form?</button>

- Vanojx1 · Answer 2

在表单提交处理程序中存储ajax承诺并等待其解决

let amountReady = null;

$('.testForm').on('change', '.amount', function(ev) {
  amountReady = $.ajax({
    method: 'POST',
    url: 'https://httpbin.org/post',
    data: {
      amount: $(this).val()
    }
  });
});


$('.testForm').on('submit', 'form', function(e) {
  e.preventDefault();
  if (!amountReady) return;
  amountReady.then((amountAjaxResult) => {
    console.log('submit now', amountAjaxResult.form.amount);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="testForm">
  <form>
    <input type="number" class="amount" />
    <button type="submit">Submit</button>
  </form>
</div>

- Mukyuu · Answer 3

你可以使用：

function method1(){
   // some code

}

function method2(){
   // some code
}

$.ajax({
   url:method1(),
   success:function(){
   method2();
}
})

在函数完成后，或者嵌套函数：

function test () {
    console.log('test');   
}

function test2 (callback) {
    console.log('test2');
    callback();
}


test2(test);

可能会相关