yaverm
@yaverm

Как правильно собрать данные форма с помощью new FormData?

У меня есть пользовательская форма. Я хочу собрать все данные форма и отправить на сервер для обработки, но столкнулся с тем что при получение всех данные с помощью класс new FormData() возвращается пустой объект. Как мне правильно получит данные и проверить в консоле ?

<form enctype="multipart/form-data" id="userForm" name="userForm">
	<input type="text" name="FirstName" id="FirstName">
	<input type="text" name="LastName" id="LastName">
	<input type="email" name="Email" id="Email">
	<input type="file" name="file" id="file" multiple accept="application/pdf" >
	<button class="send" id="send-data">Send</button>
</form>


jQuery(document).ready(function($){
	$("#send-data").on('click', function(){

		var formData = new FormData();
		formData.append('userForm', $('#userForm'));

		console.log(formData) // empty {}

	})
})
  • Вопрос задан
  • 164 просмотра
Решения вопроса 1
@cloudz
formData всегда будет выводить пустой объект , т.к доступ к ее составляющим доступен через специальные методы
https://developer.mozilla.org/ru/docs/Web/API/Form...
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@zkrvndm
Боты, парсеры, расширения
Отправка формы на чистом JavaScript без использования jQuery:
// По готовности страницы, вешаем на форму обработчик onsubmit инлайново:

document.addEventListener('DOMContentLoaded', function() {
	document.querySelector('form#userForm').setAttribute('onsubmit', 'event.preventDefault(); form_send(this);');
});

// Функция для отправки формы на чистом JavaScript:

function form_send(form) {
	form.setAttribute('onsubmit', 'event.preventDefault();');
	var url = form.getAttribute('action') + '?nocache=' + new Date().getTime();
	var xhr = new XMLHttpRequest(); xhr.open('POST', url);
	xhr.onreadystatechange = function() {
		if (xhr.readyState === XMLHttpRequest.DONE) {
			form.setAttribute('onsubmit', 'event.preventDefault(); form_send(this);');
			if (xhr.status === 200) {
				alert('Форма успешно отправлена, ответ сервера: ' + xhr.responseText);
			}
			else {
				console.log('При отправке формы произошла ошибка, ниже объект с деталями ошибки:');
				console.dir(xhr);
				alert('При отправке формы произошла ошибка, детали смотрите в консоли.');
			}
		}
	}
	xhr.send(new FormData(form));
}

Обратите внимание, что в вашей форме обязательно должен присутствовать атрибут action!
Ответ написан
YavaDev
@YavaDev
$("#userForm").on("submit", function(e){
  e.preventDefault();
  var data = $(this).serialize();
  console.log(data);
})

Здесь можно почитать о serialize
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы