Este problema se puede resolver mediante el uso de etiquetas de entrada que tengan el mismo valor de atributo de «nombre» que pueden agrupar múltiples valores almacenados bajo un nombre al que se podría acceder más tarde usando ese nombre. Para acceder a todos los valores ingresados en los campos de entrada, use el siguiente método:
var input = document.getElementsByName('array[]');
El método document.getElementsByName() se usa para devolver todos los valores almacenados bajo un nombre particular y, por lo tanto, hacer que la variable de entrada sea una array indexada desde 0 hasta el número de entradas. El método document.getElementById().innerHTML se usa para cambiar el HTML interno de la Id seleccionada . Entonces, de esta manera, podemos acceder a los valores de entrada y convertirlos en la array y acceder a ella como desee. Hemos utilizado la etiqueta de formulario porque generalmente es una buena práctica agrupar todos los elementos de entrada dentro de un formulario; de lo contrario, en el escenario actual es completamente opcional.
Ejemplo:
html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>
How to get values from html input
array using JavaScript ?
</title>
</head>
<body style="text-align: center;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3 id="po">Input Array Elements</h3>
<form class="" action="index.html" method="post">
<input type="text" name="array[]" value="" /><br>
<input type="text" name="array[]" value="" /><br>
<input type="text" name="array[]" value="" /><br>
<input type="text" name="array[]" value="" /><br>
<input type="text" name="array[]" value="" /><br>
<button type="button" name="button" onclick="Geeks()">
Submit
</button>
</form>
<br>
<p id="par"></p>
<script type="text/javascript">
var k = "The respective values are :";
function Geeks() {
var input = document.getElementsByName('array[]');
for (var i = 0; i < input.length; i++) {
var a = input[i];
k = k + "array[" + i + "].value= "
+ a.value + " ";
}
document.getElementById("par").innerHTML = k;
document.getElementById("po").innerHTML = "Output";
}
</script>
</body>
</html>
Producción:
- Elementos de array de entrada:
- Elementos de array de salida:
JavaScript es mejor conocido por el desarrollo de páginas web, pero también se usa en una variedad de entornos que no son de navegador. Puede aprender JavaScript desde cero siguiendo este tutorial de JavaScript y ejemplos de JavaScript .
Publicación traducida automáticamente
Artículo escrito por shivanshsaxena1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA