Formularios jQuery serializeArray()

by | Abr 18, 2019

El método “serializeArray()” permite crea una matriz de objetos (nombre y valor) al momento de serializar el o los formularios.

Ademas, puedes seleccionar uno o más elementos de formulario (como “input” y/o área de texto), o el propio elemento de formulario.

Acá algunos ejemplos que te pueden ayudar…

Para enviar toda la información de form desde jquery se debe serializar, de la siguiente forma:

[js]
$("form[id=’formulario’]").serializeArray();
[/js]

Por ejemplo, para mostrar todos los “value” del formulario seria de la siguiente forma:

[js]
$("button").click(function(){
var x = $("form[id=’formulario’]").serializeArray();
$.each(x, function(i, field){
$("#results").append(field.name + ":" + field.value + " ");
});
});
[/js]

Si quieres enviar todos los datos del formulario por “ajax” seria de la siguiente forma:

[js]
$("button").click(function(){
var formData = $("form[id=’formulario’]").serializeArray();
$.ajax({
url: ‘ajax_Test.asp’,
type: ‘POST’,
data: formData,
beforeSend: function () { },
success: function (response) {
alert("Termino");
}
});
});
[/js]

Ahora, si quieres agregar más “parámetros” específicos al método “POST”, tendrías que hacerlo de la siguiente forma:
[js]
formData.push(
{ name: "opt", value: opcion },
{ name: "terminar", value: terminar }
);
[/js]

Quedaría de la siguiente forma:

[js]
$("button").click(function(){
var formData = $("form[id=’formulario’]").serializeArray();
formData.push(
{ name: "opt", value: opcion },
{ name: "terminar", value: terminar }
);
$.param(formData);

$.ajax({
url: ‘ajax_Test.asp’,
type: ‘POST’,
data: formData,
beforeSend: function () { },
success: function (response) {
alert("Termino");
}
});
});
[/js]

Para agregar múltiples formularios basta con agregarlos al “serializeArray”, de la siguiente forma:
[js]
var formData = $("form[id=’formulario1′],form[id=’formulario2′],form[id=’formularioN’]").serializeArray();
[/js]