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

2019-06-25T11:57:00

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

具体代码如下:

<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!

当前页面是本站的「Baidu MIP」版。发表评论请点击:完整版 »