单击后禁用表单按钮
我想在单击后禁用表单提交按钮以防止多次提交表单。我使用下面的代码以禁用按钮,添加一个类,使得它显示为禁用:单击后禁用表单按钮
$("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;
});
但你可以看到我不知道如何从点击处理程序内得到表单的引用。
你的代码没有意义!首先,您禁用默认提交,然后手动提交。
$("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');
});
this.form
会给你参考。
所有表单元素(按钮,输入,选择等)都有一个属性形式它指向它们所属的表单元素。
+1不过我还是很想知道原因,原来的代码不会在Chrome中工作? – 2012-02-19 17:23:28
我想这是因为你在提交表单前禁用了按钮,看起来像这样可以防止点击传播。除了使用submit()之外,它也应该可以在禁用按钮之前使用一个很短的延迟(在某些情况下,这可能很重要,例如,当您需要有关服务器侧的单击按钮的信息时)。 – 2012-02-19 18:29:43
您可能可以通过使用jquery的submit()函数而不是click()函数来绕过此问题。包含的功能只会在发生提交操作后触发。
您的建议是代码原本看着,即没有返回声明。该表单未在Chrome中提交,代码为 – 2012-02-19 19:17:54
@Don。也许你有另一个提交处理程序返回false,从而阻止提交? – gdoron 2012-02-19 19:29:59