【问题标题】:How to disable submit button once it has been clicked?单击后如何禁用提交按钮?
【发布时间】:2011-03-22 23:07:11
【问题描述】:

我在表单末尾有一个提交按钮。

我在提交按钮中添加了以下条件:

onClick="this.disabled=true;
this.value='Sending…';
this.form.submit();"

但是当它移动到下一页时,参数没有传递,并且传递了空值。

【问题讨论】:

  • 这可能不是您显示的呼叫的错。请显示表单的完整 HTML。
  • 不要使用提交按钮的onclick事件——使用表单的onsubmit事件。否则,您将无法从键盘捕获提交。

标签: javascript jquery html jsp form-submit


【解决方案1】:

在这个工作示例中,用户在 JavaScript 中确认他确实想要中止。如果为 true,则禁用该按钮以防止双击,然后运行更新数据库的代码。

<asp:button id="btnAbort" runat="server" OnClick="btnAbort_Click" OnClientClick="if (!abort()) {return false;};" UseSubmitBehavior="false" text="Abort" ></asp:button>

我遇到了问题,因为 .net 可以更改按钮的名称

function abort() {
    if (confirm('<asp:Literal runat="server" Text="Do you want to abort?" />')) {
        var btn = document.getElementById('btnAbort');
        btn.disabled = true;
        btn.innerText = 'Aborting...'
        return true;
    }
    else {
        return false;
    }  
}

因为您使用 OnClientClick 覆盖 OnClick,所以即使您的验证方法成功,后面的代码也不会工作。这就是您将 UseSubmitBehavior 设置为 false 以使其工作的原因

PS:如果您的代码在 vb.net 中,则不需要 OnClick!

【讨论】:

    【解决方案2】:

    需要在&lt;form&gt;onsubmit事件中禁用按钮:

    <form action='/' method='POST' onsubmit='disableButton()'>
        <input name='txt' type='text' required />
        <button id='btn' type='submit'>Post</button>
    </form>
    
    <script>
        function disableButton() {
            var btn = document.getElementById('btn');
            btn.disabled = true;
            btn.innerText = 'Posting...'
        }
    </script>
    

    注意:如果您有一个具有required 属性的表单元素,这种方式将起作用。

    【讨论】:

      【解决方案3】:

      我成功了。设置超时后,它可以完美运行并发送所有值。

          $(document).ready(function () {
              document.getElementById('btnSendMail').onclick = function () {
                  setTimeout(function () {
                      document.getElementById('btnSendMail').value = 'Sending…';
                      document.getElementById('btnSendMail').disabled = true;
                  }, 850);
              }
          });
      

      【讨论】:

      • 人们会在850ms内点击几次
      【解决方案4】:

      我认为禁用按钮的简单方法是:data =&gt; { disable_with: "Saving.." } 这将提交一个表单,然后禁用按钮,如果您有任何验证,例如required = 'required'.

      ,它也不会禁用按钮

      【讨论】:

      • 这种行为似乎是 Ruby on Rails 特有的。
      【解决方案5】:

      在 IE11、FF53、GC58 上测试:

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

      【讨论】:

      • 这应该被接受;其他人不发送表格
      • 这很好用,但是点击时如何更改“值”?
      【解决方案6】:

      这是一个扩展 Andreas Köberle 解决方案的插入式示例。它使用 jQuery 作为事件处理程序和文档就绪事件,但可以将它们切换为纯 JS:

      (function(document, $) {
      
        $(function() {
          $(document).on('click', '[disable-on-click], .disable-on-click', function() {
            var disableText = this.getAttribute("data-disable-text") || 'Processing...';
      
            if(this.form) {
              this.form.submit();
            }
      
            this.disabled = true;
      
            if(this.tagName === 'BUTTON') {
              this.innerHTML = disableText;
            } else if(this.tagName === 'INPUT') {
              this.value = disableText;
            }
          });
        });
      
      })(document, jQuery);
      

      它可以像这样在 HTML 中使用:

      <button disable-on-click data-disable-text="Saving...">Click Me</button>
      <button class="disable-on-click">Click Me</button>
      <input type="submit" disable-on-click value="Click Me" />
      

      【讨论】:

      • 我喜欢这个解决方案,因为它遵循“不要重复自己”(DRY)原则。添加第一个块后,您可以简单地通过使用一个类来重新使用它。
      【解决方案7】:

      在我的情况下,这是需要的。

      Disable submit button on form submit

      没有它,它在 Internet Explorer 和 Firefox 中运行良好,但在谷歌浏览器中无法运行。

      问题是您在按钮实际触发提交事件之前禁用了按钮。

      【讨论】:

      • 在您的答案中显示适当的代码而不是仅显示链接通常是一种很好的做法。
      【解决方案8】:
      function xxxx() {
      // submit or validate here , disable after that using below
        document.getElementById('buttonId').disabled = 'disabled';
        document.getElementById('buttonId').disabled = '';
      }
      

      【讨论】:

        【解决方案9】:
         
            A better trick, so you don't lose the value of the button is
        
            function showwait() {
            document.getElementById('WAIT').style['display']='inline';
            document.getElementById('BUTTONS').style['display']='none';
            }
         

        包装代码以显示在 div 中

        id=WAIT style="display:none"> 要显示的文本(结束 div)

        包装代码以隐藏在 div 中

        id=BUTTONS style="display:inline"> ... 按钮或任何隐藏的东西
        onclick="showwait();" (结束 div)

        【讨论】:

          【解决方案10】:

          我使用的另一个解决方案是移动按钮而不是禁用它。在这种情况下,您没有那些“禁用”问题。 最后,您真正想要的是人们不要按两次,如果按钮不存在他们就无法做到。

          您也可以用另一个按钮替换它。

          【讨论】:

            【解决方案11】:

            使用 JQuery,你可以做到这一点..

            $("#submitbutton").click(
               function() {
                  alert("Sending...");
                  window.location.replace("path to url");
               }
            );
            

            【讨论】:

            • 请不要使用alerts,他们会阻止页面直到被点击
            【解决方案12】:

            诀窍是延迟禁用按钮,并提交您可以使用的表单 window.setTimeout('this.disabled=true',0); 是的,即使是 0 MS 也能正常工作

            【讨论】:

            • 但是如果用户在那段时间内按下按钮呢?
            【解决方案13】:

            您应该先提交表单,然后更改提交的值:

            onClick="this.form.submit(); this.disabled=true; this.value='Sending…'; "
            

            【讨论】:

            • 这是最好的答案。一些浏览器不知道事先提交表单,这个解决方案可以解决这个问题。
            • onclick 应为小写
            • 如果先触发 HTML5 验证,将无法正常工作。
            • 对我来说,'this.disabled=true' 阻止后端函数触发,即使它出现在提交之后!为了解决这个问题,我实现了一个 bool 值和 if 语句来检查第一次或后续点击,并为后续返回 false。
            • 使用 ASP.NET 更新面板我禁用了提交行为。 'OnClick="btnSave_Click" OnClientClick="this.disabled=true; this.value='正在保存...请稍候。';" UseSubmitBehavior="false"'
            【解决方案14】:

            如果您禁用该按钮,那么它的 name=value 对确实不会作为参数发送。但是应该发送剩余的参数(只要它们各自的输入元素和父表单没有被禁用)。您可能只是在测试按钮,或者其他输入字段甚至表单都被禁用?

            【讨论】:

              【解决方案15】:

              当您提交表单时,禁用的 HTML 表单元素不会与 post/get 值一起发送。因此,如果您在单击后禁用提交按钮,并且此提交按钮设置了 name 属性,则不会在 post/get 值中发送,因为该元素现在已禁用。这是正常行为。

              解决此问题的一种方法是使用隐藏的表单元素。

              【讨论】:

                【解决方案16】:

                您的问题令人困惑,您确实应该发布一些代码,但这应该可以:

                onClick="this.disabled=true; this.value='Sending...'; submitForm(); return false;"
                

                我认为当您使用this.form.submit() 时,它会在您单击提交按钮时自然发生。如果你想要同页提交,你应该考虑在 submitForm() 方法中使用 AJAX(上图)。

                此外,在 onClick 属性值的末尾返回 false 会禁止触发默认事件(在这种情况下是提交表单)。

                【讨论】:

                  【解决方案17】:

                  您可能要提交两次表单。 删除this.form.submit() 或在末尾添加return false

                  你应该以onClick="this.disabled=true; this.value='Sending…';"结束

                  【讨论】:

                  • 小心,因为这在 IE8 和 Chrome 中不起作用......它的工作原理是它按照脚本所说的去做,但结果是它也禁用了表单的提交。
                  • 查看@andreaskoberle 的回答
                  • 对于button type=submit 标签将this.value 替换为this.innerText
                  • @Andreas Köberle 下面的答案更好,尤其是在使用任何 ASP.NET 框架时。
                  【解决方案18】:

                  我认为你不需要this.form.submit()。禁用代码应该运行,然后它将传递单击表单。

                  【讨论】:

                  • 如果你不放 "this.form.submit()" 那么在这种情况下表单将不会提交。
                  • 我正在使用 如果我刷新页面禁用消失,如何解决这个问题?
                  猜你喜欢
                  • 2022-10-22
                  • 2013-10-02
                  • 2016-05-31
                  • 2013-12-21
                  • 1970-01-01
                  • 1970-01-01
                  • 2016-12-01
                  • 1970-01-01
                  • 2011-04-04
                  相关资源
                  最近更新 更多