单击后禁用表单按钮

我想在单击后禁用表单提交按钮以防止多次提交表单。我使用下面的代码以禁用按钮，添加一个类，使得它显示为禁用：单击后禁用表单按钮

$("form button.primaryAction").click(function() { 
    $(this).prop("disabled", true).addClass('disabledBtn'); 
    return true; 
});

它工作在IE和Firefox罚款，但在Chrome 17的形式没有得到提交。我想我可以代替上面的代码有：

$("form button.primaryAction").click(function() { 
    $(this).prop("disabled", true).addClass('disabledBtn'); 

    var form = // how can I get a reference to the form from the button 'this' ? 
    form.submit(); 
    return false; 
});

但你可以看到我不知道如何从点击处理程序内得到表单的引用。

来源

2012-02-19 Dónal

你的代码没有意义！首先，您禁用默认提交，然后手动提交。

$("form button.primaryAction").click(function() { 
    $(this).prop("disabled", true).addClass('disabledBtn'); 

    var form = this.form; 
    form.submit(); // submits the form 
    return false; // disable the defualt submit.... ?! 
});

不要取消自动提交，就是这样！

$("form button.primaryAction").click(function() { 
    $(this).prop("disabled", true).addClass('disabledBtn'); 
});

我会这样写：

$("form").submit(function() { 
    $('button.primaryAction').prop("disabled", true).addClass('disabledBtn'); 
});

来源

2012-02-19 17:26:08 gdoron

您的建议是代码原本看着，即没有返回声明。该表单未在Chrome中提交，代码为 – 2012-02-19 19:17:54

@Don。也许你有另一个提交处理程序返回false，从而阻止提交？ – gdoron 2012-02-19 19:29:59

this.form会给你参考。

所有表单元素（按钮，输入，选择等）都有一个属性形式它指向它们所属的表单元素。

来源

2012-02-19 17:03:05

+1不过我还是很想知道原因，原来的代码不会在Chrome中工作？ – 2012-02-19 17:23:28

我想这是因为你在提交表单前禁用了按钮，看起来像这样可以防止点击传播。除了使用submit（）之外，它也应该可以在禁用按钮之前使用一个很短的延迟（在某些情况下，这可能很重要，例如，当您需要有关服务器侧的单击按钮的信息时）。 – 2012-02-19 18:29:43

您可能可以通过使用jquery的submit（）函数而不是click（）函数来绕过此问题。包含的功能只会在发生提交操作后触发。

来源

2012-02-19 17:07:22

单击后禁用表单按钮

回答

相关问题