как получить конкретную форму FormData

Question

Я хотел бы использовать HTML5 FormData API. Вот так:

var formData = new FormData(document.querySelector('form'))

но у меня есть несколько форм. Как выбрать конкретную форму, как для:

<form accept-charset="UTF-8" action="/timeline_events" class="timeline-event-form timeline_event_form">

?

Answer 1

Вы можете использовать document.querySelectorAll('form'). Это вернет вам список всех форм. Теперь вы можете получить данные любой формы, просто используя index в этом списке узлов, например

var froms = document.querySelectorAll('form');
var f1Data = new FormData(forms[1]); //To get the data of first form
var f2Data = new FormData(forms[2]);
....

Или вы также можете добавить data-attribute к каждой форме и выбрать требуемую форму с этим

Что-то вроде

<form data-form="form-1">...</form>
<form data-form="form-2">...</form>
<form data-form="form-3">...</form>

Теперь вы можете использовать document.querySelector('form[data-form="form-1"]');, чтобы получить первую форму и так далее

Answer 2

Вы также можете использовать следующую функцию для получения данных формы, используя идентификатор формы.

function getFormData($form) {
        var unindexed_array = $form.serializeArray();
        var indexed_array = {};

        $.map(unindexed_array, function (n, i) {
            indexed_array[n['name']] = n['value'];
        });

        return indexed_array;
 }

Вызовите getFormData () используя следующий способ.

var formData = getFormData($('#frmDirectDebitAuthority'));

Ваши данные формы выглядят так

Answer 3

Просто используйте определенный селектор в вашем .querySelector().

Если вы хотите настроить таргетинг только на форму с классом timeline-event-form, вы можете объединить селектор element form с селектором class .timeline-event-form как:

var formData = new FormData(document.querySelector('form.timeline-event-form'))