JavaScript表单提交问题

Question

我需要提交一个表单，但是在提交表单时，我需要它禁用按钮，因为查询需要运行几秒钟，并且使用此表单的人不了解加载页面，因此他们将点击5或6次该按钮多次提交表单。 我在Chrome浏览器中有一种有效的方法，但是在IE中它提交了两次，我知道为什么，但是我不知道如何使它同时适用于两者。 这是表格行：

    <form method="post" id="submitItem" action="secondPage.php">

我已经尝试过各种版本，例如使用onSubmit或其他相关思路，但是没有用。 在IE中提交两次的chrome中的“工作”解决方案是该表单调用和以下JS：

$( document ).on( "click", ".once-only", function(){
    $(".once-only").prop('disabled', true);
    $('form').submit();
});

“仅一次”类附加到了“提交”按钮上，因此在单击“提交”后，在两个浏览器中都禁用了该按钮，但是由于我在表单实例化行中使用了“ action ='....'”，因此它使用“ 。提交（）”。 Chrome不会使用操作提交，而仅使用“ .submit（）”提交。 有没有办法让这个工作？ 我已经尝试过将JS更改为使用函数或取出“ .submit（）”，甚至更改表格行中的内容的大组合，但是我还没有弄清楚。 有任何想法吗？ 每当我使用JS时，IE都给我带来了这个网站的问题，AJAX在其他所有页面上仅适用于chrome，所以我真的很讨厌使用IE，但是超过半数的使用该网站的人甚至不知道chrome是什么。 有小费吗？ 如果需要，我可以共享任何其他代码！

Answer 1

尝试这个：

$( document ).on( "click", ".once-only", function(event) {
  event.preventDefault(); //this should disable the default form submit action
  $(".once-only").prop('disabled', true);
  $('form').submit();
});

Answer 2

但在IE中，它会提交两次

对于您可以先off或者取消绑定点击之后on

// If the button is not dynamically generated , there is no need to delegate the event
$('.once-only).off('click').on( "click",function(event){
   // Rest of the code
})

第二期

您可以使用button type = "button"然后使用ajax代替form action

您也可以使用button type="submit"

$('.once-only').off('click').on( "click",function(event) {
  event.preventDefault(); //prevent default behavior 
  $(".once-only").prop('disabled', true);
   $.ajax({
    url:'some url'
    //Rest of code
    })
});

注意ajax也可以在IE中使用

Answer 3

编辑

或类似这样： onclick="this.form.submit();this.enabled=false;"

---

所以真正的答案是这样

onclick="setTimeout((function(){ this.disabled = true; }).bind(this),0);"

说明 ：指示浏览器稍后禁用按钮； 由于JS在事件循环中工作，因此您需要排队一个超时事件，该事件将在onclick事件之外进行。

我认为让我做这招只是愚蠢的铬。