禁用表单提交上的按钮但发布按钮值

Question

我想阻止多个表单提交,但我需要将submit元素的值发回服务器(以便我知道用户点击了哪个按钮).

大多数关于抑制多个表单提交的Internet Wisdom似乎都涉及在表单提交期间禁用提交按钮.这样可以防止第二次单击该按钮,但也会阻止其过帐.

我找到了一些隐藏提交按钮的JS代码示例,它允许发布它们的值.但是这些例子都用某种"处理......"消息取代了(现在隐藏的)按钮.我真的想要一个解决方案,向用户显示一个禁用按钮,但仍然发布按钮值.

我应该补充一点,我更喜欢一种适用于大多数形式的标准HTML的解决方案.没有神奇的IFrame,隐藏字段,id或类名等等.我想要一个JS函数,我可以藏在库中,并引用我现有的所有表单来启用这个新行为.

(我有一个解决方案,我将作为答案发布.但我不得不提出问题,以遵守SO的禅宗.)

Answer 1

这是(又一个)回答如何处理阻止用户多次点击表单提交按钮的问题.此解决方案使按钮显示已禁用.

在封面下,它会创建一个禁用按钮以显示给用户,并隐藏实际按钮以便发布其值.我还移动隐藏按钮,以便额外的元素不会搞乱CSS选择器.

另请注意检查无效表单字段.如果省略此检查,并且表单验证失败,则用户将使用未发布的表单(因为客户端验证失败),但禁用了按钮.

// Disables buttons when form is submitted
$('form').submit(function () {
    // Bail out if the form contains validation errors
    if ($.validator && !$(this).valid()) return;

    var form = $(this);
    $(this).find('input[type="submit"], button[type="submit"]').each(function (index) {
        // Create a disabled clone of the submit button
        $(this).clone(false).removeAttr('id').prop('disabled', true).insertBefore($(this));

        // Hide the actual submit button and move it to the beginning of the form
        $(this).hide();
        form.prepend($(this));
    });
});