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

Question

[stepbystep]

У меня есть пользовательская форма. Я хочу собрать все данные форма и отправить на сервер для обработки, но столкнулся с тем что при получение всех данные с помощью класс 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 {}

	})
})

Answer 1

[Артур]

formData всегда будет выводить пустой объект , т.к доступ к ее составляющим доступен через специальные методы
https://developer.mozilla.org/ru/docs/Web/API/Form...

Comments

[stepbystep]

Круто, получил. Спасибо. Если можно задам следующий вопрос, теперь мне нужно отправить эти данные на php ( я пользуюсь Wordpress)

у меня ajax запрос с action сформулирован таким образом.

$.ajax({
        url: '<?php echo admin_url("admin-ajax.php") ?>',
        type: 'POST',
        data: {
          action: 'soap_post',
          firstName: firstName,
          lastName: lastName,
          phone: phone,
          email: email,
          comment: comment,
          refCode: ref_code,
          clientKey: client_key,
          gender: selectedGender,
          application: newFiles
        }, 
    });

Как я могу передать дату с action чтоб на стороне php смог получить данные ? я проверил так, но консоль ругается (Illegal invocation)

data: {
					action: 'soap_post',
					datas: formData
				},

Answer 2

[Надим]

Отправка формы на чистом 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!

Comments

[stepbystep]

Спасибо за труд, мот мой который работает и тут я через append присваиваю action

var formData = new FormData($(this).parents('form')[0]);
formData.append('action', 'zurbewerbung_soap_post');

У меня трудность со стороны пхп, как обработать файл для отправке, Обновил код

[stepbystep]

<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">
  <div id="files">
    <input type="file" id="application" name="application[]" class="inputfile2" multiple onChange="getBase64(this);" accept="application/pdf,image/jpeg,image/png,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">
  </div>
  <button class="send" id="send-data">Send</button>
</form>

jQuery(document).ready(function($){


        $('#send-candidate-data').on('click', function(e){
        var formData = new FormData($(this).parents('form')[0]);
        formData.append('action', 'soap_post');
        e.preventDefault();

            $.ajax({
                url: '<?php echo admin_url("admin-ajax.php") ?>',
                type: 'POST', 
                data: formData,
                contentType: false,
                processData: false,
                success: function( data ) { 
                    console.log( data );
                }
        });

        });

    });

function soap_post() {

    $firstName = $_POST['FirstName'];
    $lastName = $_POST['LastName'];

    if(isset($_POST)) {
        $name = $_FILES['application']['name']; 
        $size = $_FILES['application']['size']; 
        $type = $_FILES['application']['type']; 
        $tmp_name = $_FILES['application']['tmp_name']; 

        print_r($name);
    }
}

[Надим]

Bavarius, зачем вы присваивайте action??? Я другое имел в виду.

Answer 3

[YavaDev]

$("#userForm").on("submit", function(e){
  e.preventDefault();
  var data = $(this).serialize();
  console.log(data);
})

Здесь можно почитать о serialize

Comments

[stepbystep]

Проблем в том что, в serialize() я не могу передать action

$.ajax({
				url: '<?php echo admin_url("admin-ajax.php") ?>',
				type: 'POST',
				data: {
					action: 'soap_post',
					firstName: firstName,
					lastName: lastName,
					phone: phone,
					email: email,
					comment: comment,
					refCode: ref_code,
					clientKey: client_key,
					gender: selectedGender,
					application: newFiles
				}, 
				dataType: 'text',
				success: function( data ) {	
					console.log( data );
				}
		});

[YavaDev]

Тогда можете использовать serializeArray. который вернет вам массив. А после уже преобразовать этот массив в нужный вам формат.

[stepbystep]

YavaDev, serializeArray() - не возвращает type files (

[stepbystep]

Я пытаюсь собрать данные через new FormData, но в консоле пусто

var form_data = new FormData($('#userForm')[0]);
console.log(form_data) // возвращает пустой объект FormData{}

[sergski]

Bavarius, а вот так: new FormData(userForm);

[Zhanna_K]

а попробуйте вот так посмотреть, есть ли данные

let formData = new FormData('your_form');
formData = Object.fromEntries(formData);
console.log(formData)

[stepbystep]

Zhanna_K, Спасибо я уже разобрался и на стороне php получаю все данные о фале, теперь не могу понять как на стороне php сам файл получить чтоб отправить. Ведь физически файлы на локалке.

Задача: есть модалка с формой юзер загружает пдф и отправляет. Я должен по апи отправить на другой хост где можно было скачать этот файл

[Zhanna_K]

Bavarius, позже увидела, что ответ уже есть)
к сожалению, здесь подсказать не смогу, нет никакого опыта с php(
Успехов!