в JQuery, как я могу ссылаться на текущую форму от нажатия кнопки

Question

У меня есть форма ниже; Я изменил кнопку отправки, чтобы просто ввести «Button», чтобы я мог запустить JavaScript перед отправкой формы:

Вот моя форма:

<form action="/Cart" method="post">
     <input type="hidden" name="name" value="12" />
     <input type="button" class="addToCartButton" value="Add to Cart" />
 </form>

Вот мой начальный обработчик событий:

$(document).ready(function () {
    $('.addToCartButton').click(function () {

       //need to reference current form here
       //need to reference the hidden input with name="Name" above
    });
});

У меня есть несколько этих форм на одной странице, поэтому мне нужно относительно ссылаться на форму и некоторые другие входные данные внутри этой формы. Каков наилучший способ сделать это? Я думал о том, чтобы добавить какой-нибудь префикс, который будет уникальным для каждой формы, а затем использовать его в селекторе, но это выглядит очень странно ...

Answer 1

Это должно работать:

$(document).ready(function () {
    $('.addToCartButton').click(function () {

       //need to reference current form here
       $(this).closest('form');
       //need to reference the hidden input with name="Name" above
       $(this).closest('form').find('input[name="name"]');
    });
});

Answer 2

jQuery closest () переместится вверх по дереву и вернет первый элемент, соответствующий селектору:

$(this).closest("form");

Answer 3

 $(this).siblings("input[name='name']"); // the field
 $(this).closest("form");  // the form

Answer 4

 $('.addToCartButton').click(function () {

       //need to reference current form here
       var the_form = $(this).closest("form");

       //need to reference the hidden input with name="Name" above
       var the_input = the_form.find('input[name="name"]');
  });