Javascript 表单提交问题

Javascript Form Submission issue

本文关键字：问题 表单提交 Javascript      更新时间：2023-09-26

我需要提交一个表单，但是当它提交时，我需要它来禁用该按钮，因为查询需要几秒钟才能运行，并且使用此表单的人不了解加载页面，因此他们会多次单击按钮上提交表单的方式。我在 Chrome 中有一个工作方法，但在 IE 中它提交了两次，我知道为什么，但我不知道如何让它同时适用于两者。这是表单行：

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

我已经尝试了各种版本，例如使用 onSubmit 或其他相关想法，但没有一个有效。在 Chrome 中提交两次的"工作"解决方案是表单调用和以下 JS：

$( document ).on( "click", ".once-only", function(){
    $(".once-only").prop('disabled', true);
    $('form').submit();
});
类"仅一次"附加到提交按钮，

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

试试这个：

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

但在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 而不是表单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

编辑

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

所以真正的答案是这个

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

说明：这将指示浏览器稍后禁用该按钮;由于 JS 在事件循环中工作，因此您将超时事件排队，该事件将在该 onClick 事件之外执行。

我认为Chrome让我做这个把戏只是愚蠢的。

相关文章：