Javascript 禁用表单提交上的提交按钮

我编写此代码是为了在单击后禁用网站上的提交按钮：

$('input[type=submit]').click(function(){
    $(this).attr('disabled', 'disabled');
});

不幸的是，它没有发送表单。我怎样才能解决这个问题

编辑 我想绑定提交，而不是表单：）

doit

onSubmit（）

：

发生的情况是，在按钮实际触发提交事件之前，您将完全禁用该按钮

您可能还应该考虑使用ID或类来命名元素，这样就不会在页面上选择所有提交类型的输入

演示：

---

（注意，我使用了

preventDefault（）

和

return false

，因此在示例中表单不会实际提交；请在使用时禁用此选项。）

如何禁用提交按钮

只需在onclick事件上调用一个函数，然后。。。返回true表示提交，返回false表示禁用提交。 或 在window.onload上调用函数，如下所示：

window.onload = init();

在init（）中，执行如下操作：

var theForm = document.getElementById(‘theForm’);
theForm.onsubmit =  // what ever you want to do 

---

这应该在你的应用程序中解决

$(":submit").closest("form").submit(function(){
    $(':submit').attr('disabled', 'disabled');
});

---

禁用的控件不提交其值，这无助于了解用户是否单击了保存或删除

因此，我将按钮值存储在一个隐藏文件中，该文件将被提交。隐藏按钮的名称与按钮名称相同。我用

按钮

的名字来调用我所有的按钮

例如，

保存

基于此我发现。只需将单击的按钮存储在变量中

$(document).ready(function(){
    var submitButton$;

    $(document).on('click', ":submit", function (e)
    {
        // you may choose to remove disabled from all buttons first here.
        submitButton$ = $(this);
    });

    $(document).on('submit', "form", function(e)
    {
        var form$ = $(this);
        var hiddenButton$ = $('#button', form$);
        if (IsNull(hiddenButton$))
        {
            // add the hidden to the form as needed
            hiddenButton$ = $('<input>')
                .attr({ type: 'hidden', id: 'button', name: 'button' })
                .appendTo(form$);
        }
        hiddenButton$.attr('value', submitButton$.attr('value'));
        submitButton$.attr("disabled", "disabled");
    }
});

---

特别是当某人在

浏览器中遇到问题时：

要解决此问题，需要使用
元素中的
onSubmit
标记来设置已禁用的提交按钮
。这将允许Chrome在按下按钮后立即禁用该按钮，表单提交仍将继续

<form name ="myform" method="POST" action="dosomething.php" onSubmit="document.getElementById('submit').disabled=true;"> 
     <input type="submit" name="submit" value="Submit" id="submit"> 
</form>

简单有效的解决方案是

<form ... onsubmit="myButton.disabled = true; return true;">
    ...
    <input type="submit" name="myButton" value="Submit">
</form>


...

来源：
您的代码实际上在FF上工作，但在Chrome上不工作

这适用于FF和Chrome

$(document).ready(function() {
        // Solution for disabling the submit temporarily for all the submit buttons.
        // Avoids double form submit.
        // Doing it directly on the submit click made the form not to submit in Chrome.
        // This works in FF and Chrome.
        $('form').on('submit', function(e){
          //console.log('submit2', e, $(this).find('[clicked=true]'));
          var submit = $(this).find('[clicked=true]')[0];
          if (!submit.hasAttribute('disabled'))
          {
            submit.setAttribute('disabled', true);
            setTimeout(function(){
              submit.removeAttribute('disabled');
            }, 1000);
          }
          submit.removeAttribute('clicked');
          e.preventDefault();
        });
        $('[type=submit]').on('click touchstart', function(){
          this.setAttribute('clicked', true);
        });
      });
    </script>

$（文档）.ready（函数（）{
//为所有提交按钮临时禁用提交的解决方案。
//避免双重表单提交。
//直接在“提交”按钮上执行此操作可使表单不在Chrome中提交。
//这适用于FF和Chrome。
$（'form'）。关于（'submit'，函数（e）{
//log（'submit2'，e，$（this）.find（'clicked=true'）；
var submit=$（this.find（'[clicked=true]'）[0]；
如果（！submit.hasAttribute（'disabled'））
{
submit.setAttribute（'disabled'，true）；
setTimeout（函数（）{
submit.removeAttribute（“已禁用”）；
}, 1000);
}
submit.removeAttribute（'clicked'）；
e、 预防默认值（）；
});
$（'[type=submit]'）。在（'单击touchstart'，函数（）上{
this.setAttribute（'clicked'，true）；
});
});
更简单的方法。
我试过这个，效果很好：

$(':input[type=submit]').prop('disabled', true);

以下几点对我很有用：

var form_enabled = true;
$().ready(function(){
       // allow the user to submit the form only once each time the page loads
       $('#form_id').on('submit', function(){
               if (form_enabled) {
                       form_enabled = false;
                       return true;
               }

               return false;
        });
});

如果用户多次尝试提交表单（通过单击提交按钮、按Enter键等），这将取消提交事件。
我一直在使用blockUI以避免浏览器在禁用或隐藏按钮上不兼容


然后我的按钮有一个类自动按钮：

  $(".autobutton").click(
     function(event) {
        var nv = $(this).html();
        var nv2 = '<span class="fa fa-circle-o-notch fa-spin" aria-hidden="true"></span> ' + nv;
        $(this).html(nv2);
        var form = $(this).parents('form:first');

        $(this).block({ message: null });
        form.submit();                
        });   

$（“.autobutton”）。单击(
功能（事件）{
var nv=$（this.html（）；
var nv2=''+nv；
$（this.html（nv2）；
var form=$（this.parents（'form:first'）；
$（this.block（{message:null}）；
表单提交（）；
});   

那么一种形式是这样的：

<form>
....
<button class="autobutton">Submit</button>   
</form>


....
提交
按钮代码

<button id="submit" name="submit" type="submit" value="Submit">Submit</button>

注意：您的案例可能是多个，这一次可能需要更多的条件
是否也要提交按钮的值并防止双重表单提交？
如果您使用的是submit类型的button，并且希望提交button的值（如果禁用该按钮，则不会发生这种情况），则可以设置表单数据属性，然后进行测试

// Add class disableonsubmit to your form
    $(document).ready(function () {
        $('form.disableonsubmit').submit(function(e) {
            if ($(this).data('submitted') === true) {
                // Form is already submitted
                console.log('Form is already submitted, waiting response.');
                // Stop form from submitting again
                e.preventDefault();
            } else {
                // Set the data-submitted attribute to true for record
                $(this).data('submitted', true);
            }
        });
    });

简易方法：

Javascript和HTML：
$（'form#id'）。提交（函数（e）{
$（this）.children（'input[type=submit]'））.attr（'disabled'，'disabled'）；
//这只是为了示范
e、 预防默认值（）；
返回false；
});

最简单的纯javascript解决方案是简单地禁用按钮：

<form id="blah" action="foo.php" method="post" onSubmit="return checkForm();">
  <button id="blahButton">Submit</button>
</form>

document.getElementById('blahButton').disabled = true ;


提交
document.getElementById（'blahButton'）。disabled=true；

它在提交时使用/不使用
onSubmit
。表单保持可见，但无法保存任何内容。
是的，事实上我真的很想绑定页面中的所有提交内容。因此，我不介意ID或类的这种方式：）尝试使用
$（'input[type=submit]'）。提交（function（）
：表单已发送，但按钮不再禁用…您需要将
submit（）放入
在表单上，而不是在输入上。请看演示。是的，它很有效！唯一的问题是我在表单上有一个onSubmit函数，所以这是由jquery影子绑定的！我需要在我的原始函数上实现它，或者更改整个调用！感谢我发现奇怪的是，我不能在提交时绑定一个单击事件，在表单提交时绑定另一个单击事件之后：）在我的情况下，我需要用$（文档）包装这个。准备好让它工作了。可能很明显。不明显的是，如果接收POST（或GET）的程序正在查找submit按钮的值，如果该按钮被禁用，那么它将不会包含在POST值中，这需要一些工作才能弄清楚。至少我的测试表明了这一点。这不是开发人员的主要部分想要的。Javascript内容不应在HTML代码中内联。可能使用
.on（'submit'，function（）{..}）
（或
.submit（function（）{..}）
）会更好。即使在这种情况下，从回调内部重新触发表单上的
.submit（）
，也会遇到问题，陷入无休止的loo
if(When You Disable the button this Case){
 $(':input[type="submit"]').prop('disabled', true); 
}else{
 $(':input[type="submit"]').prop('disabled', false); 
}

// Add class disableonsubmit to your form
    $(document).ready(function () {
        $('form.disableonsubmit').submit(function(e) {
            if ($(this).data('submitted') === true) {
                // Form is already submitted
                console.log('Form is already submitted, waiting response.');
                // Stop form from submitting again
                e.preventDefault();
            } else {
                // Set the data-submitted attribute to true for record
                $(this).data('submitted', true);
            }
        });
    });

<form id="blah" action="foo.php" method="post" onSubmit="return checkForm();">
  <button id="blahButton">Submit</button>
</form>

document.getElementById('blahButton').disabled = true ;