jQuery调用.submit()无法触发表单提交 仅点击提交按钮生效
问题描述
- 预期逻辑:用户离开文本输入框(输入框触发blur失焦事件)时,弹出内容为"HH"的alert提示,同时自动提交表单,运行对应的PHP后端脚本。
- 实际异常:输入框失焦后alert提示可正常弹出,但表单不会自动提交,只有手动点击表单的submit提交按钮,才能正常触发PHP脚本执行。
- 原始问题代码:
<html> <head> <script src="vendor/jquery/jquery-3.2.1.min.js"></script> <script> $(document).ready(function(){ $("#faults_form input").blur(function(){ alert("HH"); $("#faults_form").submit(); return false; }); }); </script> </head> <body> <form id="faults_form" name="faults_form" action="/index.php" method="post" enctype="multipart/form-data"> <label for="name">Enter server name:</label> <input type="text" name="name" value="" > <input type="submit" name="submit" value="Submit"> </form> </body> </html>
故障原因
- 核心冲突:表单内的提交按钮设置了
name="submit",该属性会覆盖表单DOM对象原生的submit()方法,导致代码中调用$("#faults_form").submit()时,无法触发原生的表单提交逻辑,这是提交失效的根本原因。 - 绑定范围过大:blur事件绑定的选择器为
$("#faults_form input"),会选中表单下所有input元素,包括type为submit的提交按钮,后续容易出现失焦重复触发提交的异常。 - 冗余代码:blur事件回调中的
return false没有实际作用——blur事件不存在需要阻止的默认行为,属于多余代码。
修复方法
按以下三点调整代码即可:
- 修改提交按钮的name属性,不要使用
submit作为name值,比如改为name="submit_btn",如果后端不需要接收该按钮的提交值,也可以直接删除该name属性,解除对原生submit方法的覆盖。 - 缩小blur事件的绑定范围,只绑定到需要监听的文本输入框,比如将选择器改为
$("#faults_form input[type='text']"),避免把提交按钮纳入监听范围。 - 删除blur回调中无意义的
return false。
修复后的完整可运行代码:
<html> <head> <script src="vendor/jquery/jquery-3.2.1.min.js"></script> <script> $(document).ready(function(){ // 仅绑定文本输入框的失焦事件 $("#faults_form input[type='text']").blur(function(){ alert("HH"); $("#faults_form").submit(); }); }); </script> </head> <body> <form id="faults_form" name="faults_form" action="/index.php" method="post" enctype="multipart/form-data"> <label for="name">Enter server name:</label> <input type="text" name="name" value="" > <!-- 修改提交按钮的name,避免覆盖原生submit方法 --> <input type="submit" name="submit_btn" value="Submit"> </form> </body> </html>
注:如果不想修改提交按钮的name属性,也可以用原生DOM方法直接调用提交,绕过方法冲突,比如把提交代码改为
$("#faults_form")[0].submit();,但优先推荐修改name属性的方案,从根源避免冲突。
内容的提问来源于stack exchange,提问作者user1980099
相关产品推荐
相关产品推荐

