最简单的方法来禁用按钮提交表单？

我一直在试图找到防止双重提交表单的“正确”方法。 SO上有很多相关的帖子，但没有一个对我来说很重要。下面有两个问题。最简单的方法来禁用按钮提交表单？

这里是我的形式

<form method="POST"> 
    <input type="text" name="q"/> 
    <button class="once-only">Send</button> 
</form>

这是我第一次禁止双的提交尝试：

$(document).ready(function(){ 
    $(".once-only").click(function(){ 
     this.disabled = true; 
     return true; 
    }); 
});

这是建议的方法在这里：Disable button after post using JS/Jquery。该帖子建议提交元素必须是输入而不是按钮，但测试两者都没有区别。你可以使用这个小提琴自己尝试一下：http://jsfiddle.net/uT3hP/

正如你所看到的，这会禁用按钮，但也会阻止提交表单。在提交元素是按钮和输入元素的情况下。

问题1：为什么这个click处理程序停止提交表单？

搜索周围的一些更多的，我觉得这个解决方案（从Why doesn't my form post when I disable the submit button to prevent double clicking?）

if($.data(this, 'clicked')){ 
    return false; 
} else{ 
    $.data(this, 'clicked', true); 
    return true; 
}

你可以利用这个使用这个小提琴演奏：http://jsfiddle.net/uT3hP/1/

这并不工作，但...

问题2：这是我们能做的最好的吗？

我认为这将是一件基本的事情。方法1不起作用，方法2起作用，但我不喜欢它，并且感觉必须有一个更简单的方法。

来源

2013-03-20 Mike Hogan

可能重复（http://stackoverflow.com/questions/5691054/disable-submit-button-on-form-submit） – mcastle 2015-06-26 15:43:23

您可以使用jQuery的submit()。在这种情况下，它应该是这个样子：

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

这里是一个工作的jsfiddle（由迈克） - http://jsfiddle.net/gKFLG/1/。

如果您的提交按钮是不表单元素的直接孩子，你将需要find更换children。此外，您的提交按钮也可以是button元素，而不是一个input元素。例如。如果您使用Bootstrap horizontal forms，则是这种情况。下面是一个不同版本的代码段：

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

演示的jsfiddle - http://jsfiddle.net/devillers/fr7gmbcy/

来源

2013-03-20 16:55:29 lifetimes

@MikeHogan的的jsfiddle张贴到我似乎正在使用一个点击处理程序，而不是我的提交，我想这可能是为什么。我会尝试再次看看，一旦我回来工作 – lifetimes 2013-03-20 17:10:41

小提琴在这里：http://jsfiddle.net/gKFLG/1/ – 2013-03-25 12:20:13

@MikeHogan谢谢，我会更新到我的答案，如果没关系（为未来的观众），并会相信你。 – lifetimes 2013-03-25 20:57:23

你可以尝试使用下面的代码：

$(document).ready(function(){ 
    $(".once-only").click(function(){ 
     this.submit(); 
     this.disabled = true; 
     return true; 
    }); 
});

来源

2013-03-20 16:56:46

小提琴在这里：http://jsfiddle.net/nwpRr/ - 这也适用。 – 2013-03-20 17:04:32

这应有助于：

<form class="form-once-only" method="POST"> 
    <input type="text" name="q"/> 
    <button type="submit" class="once-only">Send</button> 
</form>

Javascript：

$(document).ready(function(){ 
    $("form.form-once-only").submit(function() { 
     $(this).find(':button').prop('disabled', true); 
    }); 
}

来源

2013-03-20 17:03:27

简单而有效的解决方案是

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

来源：here

来源

2016-07-16 22:58:12 Zia

迄今为止最好的解决方案IMO。它适用于验证，并且不需要任何外部库。 – jQwierdy 2017-11-17 17:12:09

@迈克霍根我想说这应该是公认的答案 - 作品，并且是最简单的。 – jQwierdy 2017-11-17 17:13:14

同样我见过的几个例子，这一个允许您更改按钮多久是残疾人，可以通过超时。它也只触发表单提交而不是按钮点击事件，这最初引起了我几个问题。

$('form').submit(function() { 
     var button = $('#Button'); 
     var oldValue = button.value; 

     button.attr('disabled', true); 
     setTimeout(function() { 
      button.value = oldValue; 
      button.attr('disabled', false); 
     }, 3000) 
    });

的[禁用提交表单按钮提交]

来源

2017-03-21 16:48:33

最简单的方法来禁用按钮提交表单？

回答

相关问题