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!
当前页面是本站的「Google AMP」版。查看和发表评论请点击:完整版 »