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

Question

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

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

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

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

Answer 1

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

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

Answer 2

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

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

Answer 3

在IE11,FF53,GC58上测试:

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

Answer 4

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

一来解决这个问题的方法是使用隐藏的表单元素.

Answer 5

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

Answer 6

您需要在禁用按钮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属性的表单元素，它将起作用。