從多個表單中獲取選擇框的值

Question

基本上，我重復這個表單幾次，每個都有自己的提交按鈕。 在這種情況下，我無法將表單中的所有選擇框組合成一個表單。

<form method="post" action="">
  <select name="hour" class="hour">
     // option tags
  </select>
  <select name="minutes" class="minutes">
    // option tags
  </select>
<input type="submit" name="submit" class="submit">
</form>

我正在使用AJAX來處理te值。

$(".submit").click(function() {
   var hour = $(".hour").val();
   var minutes = $(".minutes").val();
// AJAX code here
});

但是，變量'hour'和'minutes'僅保留第一個表單中選擇框的值。 如果在第三個表單的第二個上單擊提交按鈕，我怎么能讓這些變量具有正確的值？

Answer 1

你可以這樣做：

$(".submit").click(function () {
    var $form = $(this).closest('form');
    var hour = $form.find(".hour").val();
    var minutes = $form.find(".minutes").val();
    // AJAX code here
});

單擊提交按鈕，它將轉到最近的form並在其中找到選擇列表並相應地獲取相應的值。 然后您可以處理數據。

Answer 2

添加上下文，例如：

$(".submit").click(function() {
   var hour = $(".hour", $(this).parent()).val();
   var minutes = $(".minutes", $(this).parent()).val();
// AJAX code here
});

編輯：此代碼僅供您參考。 如果DOM結構不同，則可能需要更改。

您也可以使用'submit'事件代替'click'。 在這種情況下，您可以使用$(this)作為上下文。