<form> 标签外的两个提交按钮，都提交第一个按钮

Question

我需要有两个提交按钮放在我的表单之外。 两个或多个提交按钮的典型解决方案是给每个按钮一个唯一的名称或相同的名称和一个唯一的值，然后在 $_POST 中检查它。

不幸的是，当我将按钮放在表单之外时，这不起作用。我尝试将带有表单 id 的输入连接为“表单”属性，并尝试创建带有属性 for="input-id" 的标签，但没有成功。

无论我按下哪个按钮，它始终是 $_POST 中第一个按钮的名称。

例如，这是形式：

<form id="my-form" action="some/action">
    <input name="title" type="text">
    <button hidden type="submit" name="submit-form" id="save" value="save">Save</button>
    <button hidden type="submit" name="submit-form" id="save-exit" value="save-exit">Save and Exit</button>
</form>

<label for="save">Save</label>
<label for="save-exit">Save and Exit</label>

Answer 1

因此，您需要在 HTML 的头部包含以下内容：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

那么您的表单将需要具有这样的 ID，其中两个按钮具有相同的类。重要的是，您会注意到按钮具有不同的 ID。

<form action="" id="form1" method="post">
<input type="text" name="example" required>
<input type="text" name="example" required>
</form>
<button class="submit" id="option1">Submit option 1</button>
<button class="submit" id="option2">Submit option 2</button>

然后是 JQuery with AJAX 方法。首先，我们使用按钮的类（在本例中为提交）来检测点击，此时它获取按钮的 ID。然后，您可以将 action 变量设置为您希望每个按钮的值。然后我们使用序列化函数收集所有表单数据并发送。

我没有机会对此进行测试，因此不得不很快对其进行模拟，所以请让我知道任何问题。

$(".submit").on("click", function(){
    var id = $(this).attr("id");
  if(id=="option1"){
  var action = 'action1.php';
  }
  else if(id=="option2"){
  var action ='action2.php';
  }
  data = $("#form1").serialize();
  $.ajax({
    url: action,
    method: 'post',
    data: data
  });
});