如何获取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

您还可以使用以下函数使用表单ID获取表单数据。

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'));

您的 formData 看起来像这样

Answer 2

您可以使用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 3

只需在 .querySelector() 中使用特定的选择器。

如果您只想定位timeline-event-form类的表单，可以将element选择器form与class选择器.timeline-event-form合并为：

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