代码外的两个提交按钮<form>，两个提交第一个按钮

Question

我需要有两个提交按钮放在我的表单外面。两个或多个提交按钮的典型解决方案是为每个按钮指定唯一名称或相同名称和唯一值，然后以 $_POST 为单位进行检查。

不幸的是，当我将按钮放在表单之外时，这不起作用。我试图将带有表单 id 的输入作为"form"属性，并尝试使用属性 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>

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

我没有机会对此进行测试，并且必须非常快速地模拟它，因此请告诉我任何问题。

$(".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
  });
});