在表单提交上禁用提交button

我写了这个代码来禁用点击后在我的网站上提交button:

$('input[type=submit]').click(function(){ $(this).attr('disabled', 'disabled'); }); 

不幸的是,它不发送表单。 我怎样才能解决这个问题?

编辑我想绑定提交,而不是forms:)

onSubmit()

 $('form#id').submit(function(){ $(this).find(':input[type=submit]').prop('disabled', true); }); 

发生了什么事是你真正触发提交事件之前完全禁用button。

你也应该考虑用ID或CLASSes来命名你的元素,所以你不要在页面上select所有提交types的input。

示范: http : //jsfiddle.net/userdude/2hgnZ/

(请注意,我使用了preventDefault()return false因此表单在示例中不会实际提交;请在您的使用中将其closures。

具体来说,如果有人在Chrome中遇到问题

你需要做什么来解决这个问题是使用元素中的onSubmit标签来设置提交button被禁用。 这将允许Chrome在按下button后立即禁用button,表单提交仍将继续。

例如

 <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名称相同。 我通过button的名称来调用所有的button

例如<button type="submit" name="button" value="save">Save</button>

基于这个我在这里find。 只需将点击的button存储在一个variables中。

 $(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函数。 使用或replace您自己的版本的IsNull或未定义等

 function IsNull(obj) { var is; if (obj instanceof jQuery) is = obj.length <= 0; else is = obj === null || typeof obj === 'undefined' || obj == ""; return is; } 

这应该照顾它在你的应用程序。

 $(":submit").closest("form").submit(function(){ $(':submit').attr('disabled', 'disabled'); }); 

简单而有效的解决scheme是

 <form ... onsubmit="myButton.disabled = true; return true;"> ... <input type="submit" name="myButton" value="Submit"> </form> 

来源: 这里

如前所述,如果在提交button上添加了禁用属性,数据将不会被发送。

来自@Valamas的技巧可行,但我find了一个很容易实现的解决scheme:

 $('#yourform').submit(function(){ $('#mySubmitButton').addClass('disabled'); }); 

你可以这样定义CSS中的禁用类:

 .disabled{ cursor:not-allowed; } 

这将与disabled =“disabled”一样,但对发送的数据没有影响。

如何禁用提交button

只需在onclick事件上调用一个函数,并返回true以提交,false则禁用提交。 或者在window.onload上调用一个函数,如:

 window.onload = init(); 

并在init()中做这样的事情:

 var theForm = document.getElementById('theForm'); theForm.onsubmit = // what ever you want to do 

你的代码实际上在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>