我编写此代码是为了在单击后禁用我的网站上的提交按钮:
$('input[type=submit]').click(function(){
$(this).attr('disabled', 'disabled');
});
不幸的是,它没有发送表格。我该如何解决这个问题?
编辑 我想绑定提交,而不是表单:)
做吧
onSubmit()
:
$('form#id').submit(function(){
$(this).find(':input[type=submit]').prop('disabled', true);
});
发生的情况是在按钮实际触发提交事件之前完全禁用该按钮。
您可能还应该考虑使用 ID 或 CLASS 来命名元素,这样您就不会选择页面上提交类型的所有输入。
演示:http://jsfiddle.net/userdude/2hgnZ/
(注意,我使用
preventDefault()
和 return false
,因此示例中的表单并未实际提交;在使用时请将其关闭。)
特别是如果有人在
Chrome
中遇到问题:
要解决此问题,您需要做的是使用
onSubmit
元素中的 <form>
标签来设置提交按钮 disabled
。这将允许 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>
禁用的控件不会提交其值,这无助于了解用户是否单击了“保存”或“删除”。
所以我将按钮值存储在隐藏的值中,该值确实被提交了。隐藏按钮的名称与按钮名称相同。我用
button
来称呼我所有的按钮。
例如
<button type="submit" name="button" value="save">Save</button>
基于此我找到了here。只需将单击的按钮存储在变量中即可。
$(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");
}
});
这是我的
IsNull
功能。使用或替换您自己的版本 IsNull 或 undefined 等。
function IsNull(obj)
{
var is;
if (obj instanceof jQuery)
is = obj.length <= 0;
else
is = obj === null || typeof obj === 'undefined' || obj == "";
return is;
}
简单有效的解决方案是
<form ... onsubmit="myButton.disabled = true; return true;">
...
<input type="submit" name="myButton" value="Submit">
</form>
来源:这里
这应该在您的应用程序中处理它。
$(":submit").closest("form").submit(function(){
$(':submit').attr('disabled', 'disabled');
});
如果您使用的是提交类型的按钮,并且还想提交按钮的值(如果按钮被禁用,则不会发生这种情况),您可以设置表单数据属性并随后进行测试。
// 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);
}
});
});
更简单的方法。 我已经尝试过了,它对我来说效果很好:
$(':input[type=submit]').prop('disabled', true);
你的代码实际上可以在 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>
最简单的纯 JavaScript 解决方案是简单地禁用按钮:
<form id="blah" action="foo.php" method="post" onSubmit="return checkForm();">
<button id="blahButton">Submit</button>
</form>
document.getElementById('blahButton').disabled = true ;
无论有/没有
onSubmit
都可以使用。表格保持可见,但无法提交任何内容。
就我而言,我必须稍微延迟一下,以便表单正确提交,然后禁用按钮
$(document).on('submit','#for',function()
{
var $this = $(this);
setTimeout(function (){
$this.find(':input[type=submit]').attr('disabled', 'disabled')
},1);
});
如何禁用提交按钮
只需在 onclick 事件上调用一个函数,然后...返回 true 来提交,返回 false 来禁用提交。 或 在 window.onload 上调用函数,如下所示:
window.onload = init();
并在 init() 中执行如下操作:
var theForm = document.getElementById(‘theForm’);
theForm.onsubmit = // what ever you want to do
以下对我有用:
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 来避免禁用或隐藏按钮上的浏览器不兼容。
http://malsup.com/jquery/block/#element
然后我的按钮有一个类自动按钮:
$(".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();
});
那么表格就是这样的:
<form>
....
<button class="autobutton">Submit</button>
</form>
按钮代码
<button id="submit" name="submit" type="submit" value="Submit">Submit</button>
禁用按钮
if(When You Disable the button this Case){
$(':input[type="submit"]').prop('disabled', true);
}else{
$(':input[type="submit"]').prop('disabled', false);
}
注意:您的案例可能有多个,这次可能需要更多条件
简单方法:
Javascript 和 HTML:
$('form#id').submit(function(e){
$(this).children('input[type=submit]').attr('disabled', 'disabled');
// this is just for demonstration
e.preventDefault();
return false;
});
<!-- begin snippet: js hide: false console: true babel: false -->
<form id="id">
<input type="submit"/>
</form>
注意:在镀铬和边缘上完美工作。