Как при клике на кнопку получить значение всех инпутов из формы?

Question

[DooX]

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

<form name="1">
				<div class="voucher-offer">
				<input type="hidden" name="id" value="11">
				<input type="hidden" name="title" value="11">
				<input type="hidden" name="cena" value="11">
				
				<div id="buynow">
					<button class="stripe-button voucher-offer__btn">TAKE</button>
				</div>
</form>
				<form name="2">
				<div class="voucher-offer">
				<input type="hidden" name="id" value="22">
				<input type="hidden" name="title" value="22">
				<input type="hidden" name="cena" value="22">
				
				<div id="buynow">
					<button class="stripe-button voucher-offer__btn">TAKE</button>
				</div>
</form>
				<form name="3">
				<div class="voucher-offer">
				<input type="hidden" name="id" value="33">
				<input type="hidden" name="title" value="33">
				<input type="hidden" name="cena" value="33">
				
				<div id="buynow">
					<button class="stripe-button voucher-offer__btn">TAKE</button>
				</div>
</form>

Comments

[Алексей Уколов]

Инпут.

Answer 1

[Алексей Уколов]

new FormData(document.querySelector('form[name="3"]'))

Comments

[DooX]

Спасибо тёска.
Только вот вопрос в другом.
form[name="3"]
как получить скрипт это значение?
фформы генеряться и имя формы так же генерится

[Алексей Уколов]

Вы можете все формы перебирать, если вам все нужны. Или при генерации сохранять ссылку или имя. Или из события сабмита её брать. И ещё много других решений. Какое выбрать - зависит от конкретного кода и от вас.

[Kentavr16]

DooX, почему не использовать простую кнопку Submit?

Answer 2

[WapSter]

метод closest не работает в ie

Comments

[Stanislav]

Полифил

(function() {

  // проверяем поддержку
  if (!Element.prototype.closest) {

    // реализуем
    Element.prototype.closest = function(css) {
      var node = this;

      while (node) {
        if (node.matches(css)) return node;
        else node = node.parentElement;
      }
      return null;
    };
  }

})();

Но в этом случае нужен полифил для node.matches. для него вот:

(function() {

  // проверяем поддержку
  if (!Element.prototype.matches) {

    // определяем свойство
    Element.prototype.matches = Element.prototype.matchesSelector ||
      Element.prototype.webkitMatchesSelector ||
      Element.prototype.mozMatchesSelector ||
      Element.prototype.msMatchesSelector;

  }

})();

Answer 3

[Алексей]

https://learn.javascript.ru/form-elements