提交表单时禁用按钮的最简单方法是什么？ [英] Simplest way to disable button on submission of a form?

问题描述

我一直试图找到防止双重提交表单的正确方法。 SO上有很多相关的帖子，但没有一个在我这里找到。下面两个问题。

I've been trying to find the "right" way to prevent double submits of forms. There are lots of related posts on SO but none of them hit the spot for me. Two questions below.

这是我的表格

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

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

Here is my first attempt to disable double submits:

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

这是这里建议的方法：使用JS / Jquery发布后禁用按钮。该帖子表明提交元素必须是输入而不是按钮，但测试两者没有区别。您可以使用这个小提琴自己尝试： http://jsfiddle.net/uT3hP/

This is the approach suggested here: Disable button after post using JS/Jquery. That post suggests the submitting element must be an input rather than a button, but testing both makes no difference. You can try it yourself using this fiddle: http://jsfiddle.net/uT3hP/

如您所见，这会禁用该按钮，但也会阻止提交表单。如果提交元素是一个按钮和一个输入元素。

As you can see, this disables the button, but also prevents submission of the form. In cases where the submitting element is a button and an input element.

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

Question 1: why does this click handler stop submission of the form?

搜索更多我找到这个解决方案（来自当我禁用提交按钮以阻止双击时，为什么我的表单没有发布？）

Searching around some more I find this solution (from 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/

You can play with this using this fiddle: http://jsfiddle.net/uT3hP/1/

这样做工作，但是...

This does work, but...

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

Question 2: Is this the best we can do?

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

I thought this would be an elementary thing. Approach 1 does not work, approach 2 does, but I don't like it and sense there must be a simpler way.

推荐答案

您可以使用jQuery的 submit（）。在这种情况下，它看起来应该是这样的：

You can use jQuery's submit(). In this case, it should look something like this:

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

这是一个有效的jsFiddle（由Mike制作） - http://jsfiddle.net/gKFLG/1/ 。

Here is a working jsFiddle (made by Mike) - http://jsfiddle.net/gKFLG/1/.

如果您提交 - 按钮是不是表单元素的直接子元素，您需要用替换 children find 。此外，您的提交按钮也可能是按钮元素，而不是输入元素。例如。如果您使用的是 Bootstrap水平表单，则会出现这种情况。以下是该片段的不同版本：

If your submit-button is not a direct child of the form-element you will need to replace children with find. Additionally, your submit-button may also be a button element instead of an input element. E.g. This is the case if you are using Bootstrap horizontal forms. Below is a different version of the snippet:

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

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

Demo jsFiddle - http://jsfiddle.net/devillers/fr7gmbcy/

这篇关于提交表单时禁用按钮的最简单方法是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！