当提交按钮被命名为"提交"时,为什么我的表单不提交？

Question

我需要检查表单是否由用户提交,然后在以编程方式提交表单之前执行某些操作.

所以我有这个代码:

$('form').submit(function (e) {
    e.originalEvent && e.preventDefault();

     //I change some things in the form here.

    !e.isTrigger && $(this).submit();
}); 

这样可以正常工作,但是当表单提交按钮被命名为"提交"时,它不会.

如果按钮名为"提交",它甚至可以正常工作.(大写"S")

我只是好奇为什么会这样？

这是一个演示小提琴

Answer 1

你成了一些古老的DOM怪癖的牺牲品.也就是说,DOM中的表单通过各自的名称将所有输入元素(以及按钮)公开为属性:

<form>
  <input name="foo">
</form>

结果是:

var form = document.forms[0];
form.foo === document.getElementsByName('foo')[0];

这是不幸的,当你对名称有任何控制submit权时,因为它会影响原始表单的提交方法.

编辑:顺便说一下,为了阅读许多这些陷阱,我建议你看一下Kangax的精彩DOMLint文档.