如何实现点击非默认提交按钮提交表单，调用submit方法报错如何解决？

架构老林

2026-10-8

问题解决方法

问题根源

你代码中获取的form.onSubmit属性默认值为null，你没有手动给它赋值过处理函数，调用formSubmitFunc()时自然会抛出「o is not a function」的类型错误。
你给表单全局绑定了submit事件并统一执行preventDefault()拦截所有提交，如果你用jQuery的submit()方法触发提交，会再次进入事件回调被拦截，导致提交失效；原生form.submit()方法本身不会触发submit事件监听，不会被拦截，如果你之前测试时用的是jQuery封装的提交方法就会出现提交无响应的问题。

修复方案

推荐用状态标记法控制提交拦截逻辑，不需要拆分提交方法：

const form = document.querySelector('.form_submit');
// 新增确认状态标记，默认未确认
let isFormConfirmed = false;

// 表单提交拦截逻辑
form.addEventListener('submit', function(event) {
  // 仅未确认状态下拦截提交
  if (!isFormConfirmed) {
    event.preventDefault();
    confirmDlg.show();
  }
});

// 确认按钮点击逻辑
confirmDlgConfirmBtn.on('click', function() {
  console.log('yes');
  confirmDlg.hide();
  // 标记为已确认
  isFormConfirmed = true;
  // 触发表单提交，此时不会被拦截
  form.submit();
  // 如果使用jQuery触发提交，写法为 $(form).submit()
});

// 取消按钮点击逻辑
confirmDlgCancelBtn.on('click', function() {
  console.log('no');
  confirmDlg.hide();
});

// Save按钮默认会触发表单提交，不需要额外绑定弹框逻辑，如果有其他业务逻辑可以保留
saveButton.on('click', function() {
  // 注意：原逻辑此处设置disabled = false可能存在逻辑问题，正常点击保存后应该禁用按钮避免重复提交，提交完成后再恢复可用
  saveButton.disabled = false;
  console.log('save');
});