form.submit() 不能提交表单的原因

公司项目做的排序功能，每次修改列表上的某条记录的排序号，自动提交表单。

具体代码如下：

<input type="text" value="<?php echo $v['charge_order'];?>" onblur="this.form.action='?moduleid=<?php echo $moduleid;?>&file=<?php echo $file;?>&action=charge_order&itemid=<?php echo $v['itemid'];?>&charge_order='+this.value;this.form.submit();" style="width: 2rem;"/>

在修改了 input text 值后，自动拼接当前的值，并提交表单，其中主要参数都通过 action 以 GET 方式传递到后台。

当时做的时候没有 bug，提交正常。但是在其他某个页面这样添加时，表单未提交，请求未发送。

一开始以为是 this 的问题， var that = this ，没有作用。后面输出 form ，也未发现问题。最终聚焦在最后一句 this.form.submit();， 没有像预期的那样，提交表单。

反反复复地琢磨，都找不到原因。只好求助度娘。

找到了以下两个可能的原因：

• 表单中存在 name 属性值为 submit 的项
• 提交按钮的 id 值为 submit

经过测试，当存在 name='submit' 的项时，使用 form.submit() 方法会报错，因为会混淆，然后取到 name='submit' 的项的值；当提交按钮 id='submit' 时（其他项其实也是一样），同样会报错，提示 Uncaught TypeError: this.form.submit is not a function 。

总结：表单中不能存在 name 或者 id 属性值为 submit 的项，否则表单将提交失败！

因为是在 input text blur 回调中执行的，未发现有 id 为 submit 的按钮或者其他项，排除。但找到了 name 为 submit 的项，是一个提交按钮，type = 'submit' name = 'submit'。

去除 name 属性，再次修改 text 值，ok！