Obtener datos de formulario usando JQuery
Este artículo educa sobre cómo obtener datos de formulario usando JQuery. El método serialize() se usa ampliamente para aprovechar los datos del envío de un formulario o cualquier actualización en los campos de entrada.
Otro método, serializeArray(), se usa paralelamente para representar datos de formulario en forma de matriz. El formato para almacenar datos de formulario como un objeto aún está integrado con cualquier método definido, pero también es posible.
Aprendamos cómo podemos seguir cada uno de los enfoques mencionados anteriormente.
Obtener datos de formulario usando JQuery
En jQuery, si queremos obtener el formulario o los datos del campo de entrada, hay dos formas de seguir. Uno es el método serialize() y el otro es el método serializeArray().
Estas técnicas son útiles para obtener los datos del formulario si tenemos un conocimiento completo de las preferencias del usuario, la categorización del usuario y mucho más. Estos también se pueden almacenar en la base de datos.
Entonces, ¿qué formato puede tener cuando obtenemos los datos del formulario?
El método serialize() devuelve una cadena, y los diferentes tipos de entrada están separados por &. Finalmente, tenemos el método serializeArray() que obtiene los datos del formulario de una forma más escalable.
Muestra los datos como una matriz. Y aquí, también examinaremos si podemos obtener esos datos como un objeto. Entonces, ¡saltemos al segmento de código!
Use el método serialize() para obtener datos de formulario
En este ejemplo, tendremos dos campos. Un campo de entrada de tipo texto y el otro es una simple sección de opción de selección. Independientemente de la entrada que ingresemos en esos campos, podemos obtener esos datos en un formato de cadena utilizando el método serialize(). Entonces, veamos qué sucede en el código base.
Fragmento de código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<title>form data</title>
<style>
div {
margin-top: 27px;
}
#serialize {
background-color: #eee;
border: 1px solid #111;
padding: 3px;
margin: 9px;
width: 300px;
}
</style>
</head>
<body>
<form action="">
Name: <input type="text" name="name">
<select name="hair" id="hair">
<option value="Hair">Hair</option>
<option value="black">black</option>
<option value="brown">brown</option>
<option value="blue">brown</option>
</select>
</form>
<div>Serialize:
<div id="serialize"></div>
</div>
<script>
$(function() {
var update = function() {
$('#serialize').text(
JSON.stringify($('form').serialize())
);
};
update();
$('form').change(update);
})
</script>
</body>
</html>
Producción:
Cuando escribimos el valor en el campo Nombre, vemos que se está agregando la actualización. Y también, en el cuadro de selección, el color del cabello se eligió para que fuera negro y se modificó en la cadena determinada por el método serialize().
Utilice el método serializeArray() para obtener datos de formulario
Este ejemplo específico implica la misma tarea realizada en el segmento anterior, pero la diferencia será que la salida aquí estará en forma de matriz. Una matriz está más definida y esta convención de matriz no es como el estilo típico; en cambio, es una matriz de objetos.
Por lo tanto, el elemento de la matriz indexada 0 contendrá el valor del par de claves del primer campo de entrada, y la matriz indexada 1 almacenará la opción de opción de selección. Pero, primero, revisemos el código.
Fragmento de código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<title>form data</title>
<style>
div {
margin-top: 27px;
}
#serializearray{
background-color: #eee;
border: 1px solid #111;
padding: 3px;
margin: 9px;
width: 300px;
}
</style>
</head>
<body>
<form action="">
Name: <input type="text" name="username">
<select name="hair" id="hair">
<option value="Hair">Hair</option>
<option value="black">black</option>
<option value="brown">brown</option>
</select>
</form>
<div>Serialize Array:
<div id="serializearray"></div>
</div>
<script>
$(function() {
var update = function() {
$('#serializearray').text(
JSON.stringify($('form').serializeArray())
);
};
update();
$('form').change(update);
})
</script>
</body>
</html>
Producción:
Aquí, el valor se modifica y el color del cabello se actualiza. Pero observa que el resultado está en forma de matriz y tomó dos objetos como sus entradas.
A continuación, deseamos examinar si podemos almacenar directamente los datos del formulario como objetos. Así que vamos a por ello.
Obtener datos de formulario en un formulario de objeto
Para este ejemplo, usamos el mismo código que antes, pero aquí tendremos que usar dos elementos div para generar dos objetos. Hemos agregado un método $.each() que recorrerá la matriz generada por el método serializeArray() y los analizará como objetos.
Notará que usamos dos declaraciones condicionales para definir los índices de la matriz. De lo contrario, recorrió el último elemento, dando como resultado solo el último campo. Primero, revisemos el fragmento de código.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<title>form data</title>
<style>
div {
margin-top: 27px;
}
#serializeobj1, #serializeobj2{
background-color: #eee;
border: 1px solid #111;
padding: 3px;
margin: 9px;
width: 300px;
}
</style>
</head>
<body>
<form id="form">
Name: <input type="text" name="username">
<select name="hair" id="hair">
<option value="Hair">Hair</option>
<option value="black">black</option>
<option value="brown">brown</option>
<option value="green">brown</option>
</select>
</form>
<div>Serialize Object:
<div id="serializeobj1"></div>
<div id="serializeobj2"></div>
</div>
<script>
$(function() {
var obj = {}
var cnt=0;
var update = function() {
$.each(
$('#form').serializeArray(), function(i, val){
if(i==0){
$('#serializeobj1').text(
JSON.stringify(
obj[i]=val
)
)
}
if(i==1){
$('#serializeobj2').text(
JSON.stringify(
obj[i]=val
)
)
}
})
};
update();
$('form').change(update);
})
</script>
</body>
</html>
Producción:
