单击后如何禁用提交按钮?

问题描述 投票:36回答:19

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

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

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

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

javascript jquery html jsp form-submit
19个回答
45
投票

可能你要两次提交表格。删除this.form.submit()或在最后添加return false

你最终应该使用onClick="this.disabled=true; this.value='Sending…';"


1
投票

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

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


1
投票
function xxxx() {
// submit or validate here , disable after that using below
  document.getElementById('buttonId').disabled = 'disabled';
  document.getElementById('buttonId').disabled = '';
}

0
投票

你的问题很混乱,你真的应该发布一些代码,但这应该有效:

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

我认为当你使用this.form.submit()时,它正在做你点击提交按钮时自然发生的事情。如果你想要同页提交,你应该考虑在submitForm()方法中使用AJAX(上面)。

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


0
投票
 
    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)


0
投票

就我而言,这是必要的。

Disable submit button on form submit

它没有它在Internet Explorer和Firefox中正常工作,但它在谷歌浏览器中不起作用。

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


0
投票

这是一个扩展了AndreasKö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" />

0
投票

我认为禁用按钮的简单方法是:data => { disable_with: "Saving.." }这将提交一个表单,然后禁用按钮,如果你有任何验证,如required = 'required'.它也不会禁用按钮


0
投票

我做了伎俩。设置超时时,它可以正常工作并发送所有值。

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

0
投票

在这个工作示例中,用户在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!


0
投票
$('form#id').submit(function(e){
//OnClick code 
$(this).children('input[type=submit]').attr('disabled','disabled');
e.preventDefault();
return false;
});

80
投票

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

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

11
投票

在IE11,FF53,GC58上测试:

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

9
投票

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

克服此问题的方法之一是使用隐藏的表单元素。


6
投票

诀窍是延迟按钮被禁用,并提交表格你可以使用window.setTimeout('this.disabled=true',0);是甚至0 MS正在工作


5
投票

您需要在onsubmit<form>事件中禁用该按钮:

<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属性的表单元素将起作用。


4
投票

使用JQuery,你可以这样做..

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

2
投票

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


1
投票

如果禁用该按钮,则其名称=值对确实不会作为参数发送。但是应该发送参数的残余(只要它们各自的输入元素和父形式没有被禁用)。您可能只测试按钮或其他输入字段甚至表单被禁用?

© www.soinside.com 2019 - 2024. All rights reserved.