同一表单内按钮调用另一按钮方法的实现方案咨询

我来帮你梳理下这个问题的解决思路，核心是把每个按钮的业务逻辑封装成独立可复用的函数，这样就能轻松实现一个按钮调用另一个的处理逻辑了，而且还能避免原代码中绑定多个submit事件导致的重复执行问题。

步骤1：封装独立的处理函数 #

首先把两个按钮对应的AJAX逻辑拆成单独的函数，这样不管哪个按钮需要调用，直接执行函数就行：

// 封装Add/Modify按钮的处理逻辑
function handleAdd() {
  const formData = $("#form").serialize();
  $.ajax({
    method: "POST",
    url: "config.php",
    data: formData + '&action=add',
    dataType: "html",
    success: function(res) {
      window.alert(res);
    }
  });
}

// 封装Check按钮的处理逻辑，这里可以直接调用handleAdd
function handleCheck() {
  // 如果你需要先执行Check自己的业务逻辑，比如发送Check请求，再调用Add的逻辑
  // 可以先写Check的AJAX代码，然后在success里调用handleAdd
  // 示例：直接调用Add的处理逻辑
  handleAdd();

  // 如果你需要先执行Check自身逻辑的示例：
  /*
  const formData = $("#form").serialize();
  $.ajax({
    method: "POST",
    url: "config.php",
    data: formData + '&action=check',
    dataType: "html",
    success: function(res) {
      window.alert("Check操作结果：" + res);
      // 完成Check后调用Add的逻辑
      handleAdd();
    }
  });
  */
}

步骤2：绑定按钮事件并阻止默认提交 #

接下来给每个按钮绑定点击事件，同时阻止表单的默认提交行为（避免页面刷新），在事件中调用对应的处理函数：

$(document).ready(function() {
  // 绑定Check按钮的点击事件
  $("#check").click(function(e) {
    e.preventDefault(); // 阻止表单默认提交
    handleCheck(); // 执行Check逻辑，里面会调用Add的方法
  });

  // 绑定Add/Modify按钮的点击事件
  $("#add").click(function(e) {
    e.preventDefault(); // 阻止表单默认提交
    handleAdd(); // 执行Add自身的逻辑
  });
});

另一种方式：在表单submit事件中判断触发按钮 #

如果你更倾向于用表单的submit事件，也可以通过判断触发提交的按钮来执行对应逻辑，同样可以实现调用：

$(document).ready(function() {
  $("#form").submit(function(e) {
    e.preventDefault();
    // 获取触发提交的按钮
    const clickedBtn = $(e.originalEvent.submitter);
    
    if (clickedBtn.attr("id") === "add") {
      handleAdd();
    } else if (clickedBtn.attr("id") === "check") {
      // Check按钮触发时，调用Add的逻辑
      handleAdd();
      // 或者先执行Check自身逻辑再调用
    }
  });
});

为什么要这么做？ #

原代码中绑定了两个submit事件，这会导致表单提交时两个事件都会触发，发送两次AJAX请求，这显然不是你想要的。把逻辑封装成独立函数后，不仅能避免这个问题，还让代码更清晰、更易维护，复用性也更强。

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