JavaScript/jQuery无按钮提交表单提示函数未定义解决方法

报函数未定义+提交时刷新页面，是你代码里4个写法错误导致的：

• 作用域错误：你把submit_1form()定义在$(document).ready()的回调函数内部，属于局部函数，写在div上的全局onclick事件根本访问不到这个函数，直接触发未定义报错。
• 逻辑顺序错误：函数内第一行就执行了原生fo1rm.submit()，这会触发表单默认的同步提交行为，一运行就直接刷新/跳页，后面写的AJAX无刷新提交逻辑根本不会执行。
• 资源重复引入：你已经在header引入了jQuery 3.2.1，代码里额外加的3.3.1版本CDN属于重复加载，可能引发版本冲突。
• 参数拼接不规范：手动拼接POST参数字符串容易出现特殊字符转义错误，jQuery自带表单序列化方法，不需要手动拼接参数。

推荐直接用jQuery绑定事件替代行内onclick，删掉原生表单提交的逻辑，全程通过AJAX提交数据，不会触发页面刷新。修正后代码如下：

<!-- 保留header里引入的jQuery即可，删掉重复的jQuery引入标签 -->
<form id="my_1form" action="" method="POST">
    <input type="text" name="acc_name" id="acc_name" value="name"/>
    <br/>
    <input type="text" name="with_id" id="with_id" value="1"/>
    <!-- 去掉行内onclick，加类名方便绑定事件 -->
    <div class="submit-btn">Submit</div>
</form> 

<script>
$(document).ready(function() {
  // 直接绑定点击事件，不需要声明全局函数
  $('.submit-btn').on('click', function() {
    // 直接序列化表单数据，自动处理参数转义
    const formData = $('#my_1form').serialize();
    $.ajax({
      type: "POST",
      url: "submit-withdraw.php",
      data: formData,
      cache: false,
      success: function(result) {
        // 此处写提交成功后的业务逻辑，比如弹出提示
        console.log('提交成功', result);
      },
      error: function(err) {
        // 此处写提交失败的兜底逻辑
        console.log('提交失败', err);
      }
    });
  })
});
</script>

如果你一定要保留行内onclick的写法，只需要把submit_1form函数移到$(document).ready()外部变成全局函数，同时删掉fo1rm.submit()这行原生提交代码即可，但不推荐这种污染全局作用域的写法。

内容的提问来源于stack exchange，提问作者Steven Helson