我编写此代码是为了在单击后禁用我网站上的提交按钮：
$('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<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");
}
});
这是我的
IsNullfunction 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>注意：在镀铬和边缘上完美工作。
manpreet 的 answer 正确解决了这样一个事实：如果禁用提交按钮，它将不会与其他表单数据一起发送。任何依赖于检查请求正文中按钮值或“提交”是否存在的操作都将失败，因为它将完全丢失。
我创建了该答案的修改版本，它执行不需要$(document).ready(function () {
的相同功能，并且看起来更干净一些。这将搜索表单中的所有
<button>元素以及所有
input(type='submit')元素，并向它们添加
disabledCSS 类以提供禁用外观。这假设您有一个用于按钮/输入的
disabledCSS 类，许多流行的前端模板已包含该类。
// if a form has the 'form-once-only' class, prevent double submits;
$('form.form-once-only').submit(function(e) {
// check if the form has a isFormSubmitted data attribute set to true;
// if so, prevent the submit and return
if ($(this).data('isFormSubmitted') === true) {
e.preventDefault();
return;
}
// first time submitting, set the isFormSubmitted flag to prevent future submissions
$(this).data('isFormSubmitted', true);
// add a 'disabled' class to all inputs with type 'submit' and all form button elements
$(this).find('input[type="submit"], :button').each(function() {
$(this).addClass('disabled');
});
});