You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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>
故障原因
  1. 核心冲突:表单内的提交按钮设置了name="submit",该属性会覆盖表单DOM对象原生的submit()方法,导致代码中调用$("#faults_form").submit()时,无法触发原生的表单提交逻辑,这是提交失效的根本原因。
  2. 绑定范围过大:blur事件绑定的选择器为$("#faults_form input"),会选中表单下所有input元素,包括type为submit的提交按钮,后续容易出现失焦重复触发提交的异常。
  3. 冗余代码: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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.27 02:15:26