禁用表单提交上的提交按钮

Question

我写了这段代码,点击后禁用我网站上的提交按钮:

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

不幸的是,它没有发送表格.我怎样才能解决这个问题？

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

Answer 1

这样做onSubmit():

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

发生的事情是你在实际触发提交事件之前完全禁用了按钮.

您可能还应考虑使用ID或CLASS来命名元素,因此不要在页面上选择提交类型的所有输入.

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

(注意,我使用preventDefault(),return false因此表单在示例中没有实际提交;请在使用时将其保留.)

Answer 2

特别是如果有人在Chrome中遇到问题

要解决此问题,您需要使用元素中的onSubmit标记将提交按钮设置为禁用.这将允许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>

Answer 3

已禁用的控件不会提交其值,这无助于了解用户是否单击了保存或删除.

所以我将按钮值存储在隐藏的内容中.隐藏的名称与按钮名称相同.我叫所有按钮的名字button.

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

基于此我在这里找到了.只需将单击的按钮存储在变量中即可.

$(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;
}

Answer 4

简单有效的解决方案是

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

来源：这里

Answer 5

这应该在您的应用程序中处理它。

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