我在表单末尾有一个提交按钮。
我在提交按钮中添加了以下条件:
onClick="this.disabled=true;
this.value='Sending…';
this.form.submit();"
但是当它移动到下一页时,没有传递参数并且传递了空值。
您应该首先提交表单,然后更改提交的值:
onClick="this.form.submit(); this.disabled=true; this.value='Sending…'; "
可能您要提交两次表单。删除 this.form.submit()
或在末尾添加 return false
。
你应该以 onClick="this.disabled=true; this.value='Sending…';"
结束
button type=submit
标记,将 this.value
替换为 this.innerText
在 IE11、FF53、GC58 上测试:
onclick="var e=this;setTimeout(function(){e.disabled=true;},0);return true;"
您需要在 <form>
的 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
属性的表单元素,这种方式将起作用。
提交表单时,禁用的 HTML 表单元素不会与 post/get 值一起发送。因此,如果您在单击后禁用提交按钮并且此提交按钮设置了 name
属性,则不会在 post/get 值中发送它,因为该元素现在已禁用。这是正常行为。
克服这个问题的方法之一是使用隐藏的表单元素。
诀窍是延迟禁用按钮,并提交您可以使用的表单 window.setTimeout('this.disabled=true',0);
是的,即使 0 MS 正在工作
使用 JQuery,你可以做到这一点..
$("#submitbutton").click(
function() {
alert("Sending...");
window.location.replace("path to url");
}
);
alerts
,它们会阻止页面直到被点击
如果您禁用该按钮,那么它的 name=value 对确实不会作为参数发送。但是应该发送剩余的参数(只要它们各自的输入元素和父表单没有被禁用)。可能您只测试按钮或其他输入字段甚至表单被禁用?
这是一个扩展 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" />
我认为您不需要this.form.submit()
。禁用代码应该运行,然后它将传递单击表单的单击。
我使用的另一个解决方案是移动按钮而不是禁用它。在这种情况下,您没有那些“禁用”问题。最后,您真正想要的是人们不要按两次,如果按钮不存在,他们就无法做到。
您也可以用另一个按钮替换它。
function xxxx() {
// submit or validate here , disable after that using below
document.getElementById('buttonId').disabled = 'disabled';
document.getElementById('buttonId').disabled = '';
}
您的问题令人困惑,您确实应该发布一些代码,但这应该可以:
onClick="this.disabled=true; this.value='Sending...'; submitForm(); return false;"
我认为当您使用 this.form.submit()
时,它会在您单击提交按钮时自然发生。如果您想要同页提交,您应该考虑在 submitForm()
方法(如上)中使用 AJAX。
此外,在 onClick
属性值的末尾返回 false
会禁止触发默认事件(在本例中是提交表单)。
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)
就我而言,这是需要的。
Disable submit button on form submit
没有它,它在 Internet Explorer 和 Firefox 中运行良好,但在 Google Chrome 中无法运行。
问题是您在实际触发提交事件之前禁用了按钮。
我认为禁用按钮的简单方法是 :data => { disable_with: "Saving.." }
这将提交一个表单,然后禁用按钮,如果您有任何验证,例如 required = 'required'.
,它也不会禁用按钮
在这个工作示例中,用户在 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!
我成功了。设置超时后,它可以完美运行并发送所有值。
$(document).ready(function () {
document.getElementById('btnSendMail').onclick = function () {
setTimeout(function () {
document.getElementById('btnSendMail').value = 'Sending…';
document.getElementById('btnSendMail').disabled = true;
}, 850);
}
});