Con Ajax es posible enviar datos parciales para el formulario utilizando a continuación como datos para ajax-
$("#CreateForm").find("#form-section-1").find('input, textarea, select').serialize()Intentando lo mismo con FormData api -
new FormData($('form#CreateForm')[0])Sin embargo, esto no funciona -
var formdata = new FormData($('form#CreateForm').find("#form-section-1").find('input, textarea, select'))Dado que el ciclo siguiente no da ningún resultado,
for (var pair of formdata.entries()) { console.log(pair[0]+ ', ' + pair[1]); }¿Cómo se pueden enviar datos de formulario parcial con FormData api en forma compacta como serializar?
Editar: en la solución Aceptada, tuve que agregar aún más esta condición para los archivos especialmente:
if($(this).is(':input:file')) { formData.append(this.name, $(this)[0].files[0]); } else { formData.append(this.name, $(this).val()); }El constructor FormData acepta un parámetro de elemento <form/> nativo opcional para pasar todos los datos en el formulario. Aviso,
$('form#CreateForm') // jQuery object $('form#CreateForm')[0] // native form element $('form#CreateForm #form-section-1').find('input, textarea, select') // jQuery objects $('form#CreateForm #form-section-1').find('input, textarea, select')[0] // some native non-form elementAsí que realmente no puedes usar el constructor.
El objeto FormData tiene un método .append para agregar nuevos valores al objeto. Podrías usarlo para hacer
var formData = new FormData(); $('form#CreateForm #form-section-1').find('input, textarea, select').each(function () { if($(this).is(':input:file')) { formData.append(this.name, $(this)[0].files[0]); } else { formData.append(this.name, $(this).val()); } }); FYI :input es la abreviatura de input|select|textarea|button .