FormData объект добавить всю форму без создания нового объекта

Question

У меня есть представить код следующим образом:

$(document).on("submit","form",function(event){ 
    event.preventDefault() 
    formData=new FormData(this) 
}) 

Но иногда я следующее сделано до того, как представить

formData=new FormData()  
formData.append("test",1) 

В результате, вызов новый объект FormData удаляет добавленные данные. Как добавить всю форму без создания нового объекта? Что-то вроде этого:

$(document).on("submit","form",function(event){ 
    event.preventDefault() 
    FormData.append(this) // not new just appended entire form 
}) 

Answer 1

Я предполагаю, что ваша переменная formData объявлена ​​вне вашей .on("submit", "form", ...) функции.

Вы можете использовать serializeArray() jquery в своей форме. Функция serializeArray() вернет массив, содержащий объект с объектами name и value для каждой части данных в вашей форме. Затем вы можете пропустить этот массив и использовать функцию .append() на своем экземпляре formData, чтобы добавить все данные из формы в formData.

Обратите внимание, что для каждого элемента в вашей форме вам понадобится атрибут name, чтобы он работал правильно. См. Рабочий пример ниже, который будет записывать каждый элемент формы в консоль браузера, прежде чем добавлять его в экземпляр formData.

var formData = new FormData(); 
 
formData.append("test", 1); 
 

 
$(document).on("submit", "form", function(event) { 
 
    event.preventDefault(); 
 
    var formDataArray = $(this).serializeArray(); 
 
    for(var i = 0; i < formDataArray.length; i++){ 
 
    var formDataItem = formDataArray[i]; 
 
    console.log(formDataItem); 
 
    formData.append(formDataItem.name, formDataItem.value); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <label for="name">Name:</label> 
 
    <input type="text" id="name" name="name"/> 
 
    <label for="age">Age:</label> 
 
    <input type="number" id="age" name="age"/> 
 
    <button type="submit">Submit</button> 
 
</form>