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

Question

单击后，我编写了以下代码以禁用网站上的提交按钮：$('input[type=submit]').click(function(){    $(this).attr('disabled', 'disabled');});不幸的是，它没有发送表格。我怎样才能解决这个问题？编辑 我想绑定提交，而不是表格:)

Answer 1

特别是如果有人遇到以下问题Chrome：

要解决此问题，您需要使用元素中的onSubmit标记<form>设置提交按钮disabled。这将允许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 2

禁用的控件不会提交其值，这不利于了解用户是否单击了保存或删除。

因此，我将按钮值存储在确实提交的隐藏值中。隐藏的名称与按钮名称相同。我将所有按钮都称为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或未定义的版本等。

function IsNull(obj)

{

    var is;

    if (obj instanceof jQuery)

        is = obj.length <= 0;

    else

        is = obj === null || typeof obj === 'undefined' || obj == "";

    return is;

}