En este artículo, aprenderemos cómo recorrer los elementos de entrada y mostrar sus valores actuales en jQuery. Esto se puede hacer usando dos enfoques:
Enfoque 1: en este enfoque, iteraremos sobre cada tipo de entrada que sea de tipo texto usando input[type=text] como selector. A continuación, usaremos el método each() para iterar sobre las entradas para mostrar los valores o realizar cualquier operación según sea necesario.
Sintaxis:
$("#id input[type=text]").each(function() {
//... your code
});
Ejemplo:
HTML
<html>
<head>
<!-- Include jQuery -->
<script src=
"https://code.jquery.com/jquery-3.6.0.js">
</script>
<script>
$(document).ready(function () {
// Bind the click event to the function
$("#buttonId").click(function () {
// Select all the elements with the
// type of text
$("#formId input[type=text]")
.each(function () {
// Print the value currently in
// the input box
console.log(this.value);
});
})
});
</script>
</head>
<body>
<!-- Define the form and the inputs -->
<form action="" id="formId">
<label>enter email</label>
<input type="text"
placeholder="email"><br>
<label>enter name</label>
<input type="text"
placeholder="name"><br>
<label>enter city</label>
<input type="text"
placeholder="city"><br><br>
<button type="button"
id="buttonId">
Loop Through
</button>
</form>
</body>
</html>
Producción:
Enfoque 2: en este enfoque, intentaremos iterar sobre todos los tipos de entrada posibles. Seleccionaremos el formulario usando la identificación del formulario e iteramos sobre cada tipo de entrada usando el método filter() en jQuery. Las entradas se pueden filtrar especificando el : selector de entrada en jQuery que selecciona cada tipo de entrada en el elemento que se utiliza. A continuación, usaremos el método each() para iterar sobre las entradas para mostrar los valores o realizar cualquier operación según sea necesario.
Sintaxis:
$('#id *').filter(':input').each(function () {
//..your code
});
Ejemplo:
HTML
<html>
<head>
<!-- Include jQuery -->
<script src=
"https://code.jquery.com/jquery-3.6.0.js">
</script>
<script>
$(document).ready(function () {
// Bind the click event to the function
$("#buttonId").click(function () {
// Select all the elements
// which is of the type of input
$('#formId *').filter(':input')
.each(function () {
// Print the value currently in
// the input element
console.log($(this).val());
});
})
})
</script>
</head>
<body>
<!-- Define the form and the inputs -->
<form action="" id="formId">
<label>enter email</label>
<input type="email"
placeholder="email"><br>
<label>enter password</label>
<input type="password"
placeholder="password"><br>
<label>enter city</label>
<input type="text"
placeholder="city">
<br><br>
<button type="button"
id="buttonId">
Loop Through
</button>
</form>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por rajatagrawal5 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA