外部有兩個提交按鈕 <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>

然后用AJAX方法進行JQuery。 首先，我們使用按鈕的類（在本例中為Submit）來檢測單擊，然后單擊按鈕的ID。 然后可以將操作變量設置為每個按鈕所需的變量。 然后，我們使用serialize函數收集所有表單數據並將其發送。

我沒有機會對此進行測試，因此不得不非常快地進行模擬，因此請讓我知道任何問題。

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