Jquery - Internet Explorer 重复提交表单

Question

我有以下代码，用来提交带有超链接的表单（而不是按钮）。这样我们就可以对它们进行一些CSS hover效果的处理。

$('a.css_submit').click(submit_form);
$('a.inactive_submit').click(submit_form);

function submit_form(event) {
  if ($(this).parents('form:first').length > 0 && !$(this).hasClass('inactive_submit'))   {
        $(this).toggleClass("css_submit inactive_submit");
    $(this).parents('form:first').submit();
    return false;
  } else {
    return true;
  }
}

问题在于Internet Explorer偶尔会提交表单两次。我自己无法复制这个问题，但我可以在生产服务器日志中验证它。这个问题在IE6 - IE9中仍然存在。其他所有浏览器都正常工作。我看到一些帖子说要从链接返回false，但我已经这样做了。

任何帮助都将不胜感激。

- Kevin Whitaker

---

也许用户在非常快地点击提交按钮。尝试在第一次点击后禁用该链接。 - Ilia Choly

如果将event.preventDefault()作为submit_form的第一行（而非return false;），它是否能够达到相同的效果？ - Mike Robinson

+1 @ilia 这种情况经常发生。普通人习惯于双击 Windows 图标，因此他们倾向于双击一切东西。几年前我写了一个在线支付系统，为了防止重复提交我们禁用了提交按钮 onclick（除了服务端验证）。 - Adrian J. Moreno

我可能应该添加一些内容，在第一次单击后禁用链接，但问题仅出现在IE中。理论上，任何浏览器都可能重复点击-但其他浏览器没有产生重复提交。 - Kevin Whitaker

我不认为那些双击所有东西的人也是使用IE的人是不可能的。 - JJJ

可能是由于重复加载某个文件而导致了两个绑定。 - Worthy7

Answer 1

当您自行提交表单时，还需要取消事件的默认处理。

jQuery的方法是 event.preventDefault():

$(this).parents('form:first').submit();
event.preventDefault();

在jQuery中，返回true/false没有任何效果。

- rustyx

Answer 2

您可以添加一些额外的验证，以确保它不会被点击两次：

var formSubmitted = false;

function submit_form(event) {
  if(formSubmitted  == true) { alert('Form already submitted.'); return false; } // determine if form is already submitted
  if ($(this).parents('form:first').length > 0 && !$(this).hasClass('inactive_submit'))   {
        $(this).toggleClass("css_submit inactive_submit");
    $(this).parents('form:first').submit();
    return false;
  } else {
    formSubmitted  = true;
    $('a.css_submit').attr('disabled', true); // disable form submit button
    $('a.css_submit').val('Processing...'); // set form submit button text to say processing
    return true;
  }
}

- Paul Graffam

Answer 3

对于IE浏览器，您可以使用以下代码：

event.returnValue = false;

我们可以检查 preventDefault 是否存在，以避免错误：

event.preventDefault ? event.preventDefault() : (event.returnValue = false);

- DependencyHell

Answer 4

对于IE浏览器，我找到了这个：

event.returnValue = false;

首先检查是否存在 event.preventDefault 以防止可能的错误：

event.preventDefault ? event.preventDefault() : (event.returnValue = false);

- DependencyHell