FormDataEvent

Базовая Широко доступна

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с июля 2015 года.

Интерфейс FormDataEvent представляет собой событие formdata — такое событие срабатывает на объекте HTMLFormElement после построения списка элементов, представляющих данные формы. Это происходит при отправке формы, но также может быть вызвано вызовом конструктора FormData().

Это позволяет быстро получить объект FormData в ответ на срабатывание события formdata, а не собирать его самостоятельно при отправке данных формы с помощью метода, такого как fetch() (см. Использование объектов FormData).

Конструктор

FormDataEvent(): Создаёт новый экземпляр объекта FormDataEvent.

Свойства экземпляра

Наследует свойства от своего родительского интерфейса Event.

FormDataEvent.formData: Содержит объект FormData, представляющий данные, содержащиеся в форме при срабатывании события.

Методы экземпляра

Наследует методы от своего родительского интерфейса Event.

Примеры

// grab reference to form

const formElem = document.querySelector("form");

// submit handler

formElem.addEventListener("submit", (e) => {
  // on form submission, prevent default
  e.preventDefault();

  console.log(form.querySelector('input[name="field1"]')); // FOO
  console.log(form.querySelector('input[name="field2"]')); // BAR

  // construct a FormData object, which fires the formdata event
  const formData = new FormData(formElem);
  // formdata gets modified by the formdata event
  console.log(formData.get("field1")); // foo
  console.log(formData.get("field2")); // bar
});

// formdata handler to retrieve data

formElem.addEventListener("formdata", (e) => {
  console.log("formdata fired");

  // modifies the form data
  const formData = e.formData;
  formData.set("field1", formData.get("field1").toLowerCase());
  formData.set("field2", formData.get("field2").toLowerCase());
});

Спецификации

Спецификация
HTML # the-formdataevent-interface

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`FormDataEvent`	77	79	72	64	15	77	79	55	15	12.0	77
`FormDataEvent`	77	79	72	64	15	77	79	55	15	12.0	77
`formData`	77	79	72	64	15	77	79	55	15	12.0	77

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/FormDataEvent