Obtener valor de formulario HTML en JavaScript
-
Use
document.forms
para obtener el valor del formulario HTML en JavaScript -
Utilice el
id
para acceder al valor del formulario HTML en JavaScript
![Obtener valor de formulario HTML en JavaScript](/img/JavaScript/feature-image---get-html-form-value.webp)
En JavaScript, podemos usar el atributo id de un elemento de entrada específico para obtener los valores o activar el atributo de nombre para acceder a los valores.
Ambas convenciones procederán a obtener los datos sin procesar del usuario. Técnicamente, el objetivo es obtener toda la información de un usuario y asegurarse de que el proceso funcione.
Aquí trabajaremos con el HTML DOM
también conocido como document.forms
para recuperar todos los elementos del HTML form
. Una breve introducción a los métodos disponibles para interactuar con los elementos y atributos HTML está aquí.
Además, en nuestro ejemplo, utilizaremos la forma casual de identificar el id
de un elemento para sacar la información de allí.
Use document.forms
para obtener el valor del formulario HTML en JavaScript
El método document.forms
toma el atributo name
para localizar el formulario y su elemento. Tácticamente, todos los valores del formulario se pasarán por esta vía de iniciación.
Tendremos un elemento select
seguido de un elemento option
múltiple. Y elegiremos una preferencia a partir de ahí, y el valor se separará.
Más tarde, cuando se inicie document.forms
, tomará el valor separado. Revisemos el bloque de código para una visualización adecuada.
Fragmento de código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
</head>
<body>
<form name="form">
<select name="fruit" id="fruits">
<option value="0">Select Fruit</option>
<option value="mango">Mango</option>
<option value="apple">Apple</option>
<option value="orange">Orange</option>
</select>
<button type = "submit">Hit</button>
</form>
<p id="print"></p>
</body>
</html>
var form = document.forms['form'];
form.onsubmit = function(e) {
e.preventDefault();
var select = document.form.fruit.value;
console.log(select);
document.getElementById('print').innerHTML = select.toUpperCase();
}
Producción:
Como puede ver, el objeto form
que toma el método document.forms
para interactuar con los valores del formulario HTML
devolverá todos los elementos.
El método onsubmit
va para la acción adicional de trabajar con ese valor seleccionado. En la instancia, el objeto select
toma el valor deseado con el correspondiente atributo name
del elemento form
y select
.
Posteriormente hemos impreso el valor en formato de mayúsculas en la página.
Utilice el id
para acceder al valor del formulario HTML en JavaScript
Para este ejemplo, usaremos el documnet.getElementById
el querySelector
para controlar las entradas del formulario.
La facilidad para usar este formato es frecuente y funciona de manera similar al método document.forms
. Entonces, las siguientes líneas de código demostrarán la vista previa.
Fragmento de código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
</head>
<body>
<form name="form" id="forms">
Enter name:
<input type="text" id="name">
<input type="button" value=" Click Up">
</form>
<p id="print"></p>
</body>
</html>
var form = document.getElementById('forms');
form.onclick = function(e) {
e.preventDefault();
var name = document.getElementById('name').value;
console.log(name);
document.getElementById('print').innerHTML = name.toUpperCase();
}
Producción:
El formulario al que accedió el objeto form
en JavaScript y el valor de la entrada también se derivaron del método .value
.
En el ejemplo anterior, usamos el elemento button
para send
la entrada, y aquí usamos el botón de tipo de entrada
para realizar el envío.
La diferencia aquí está solo en onsubmit
y onclick
, ambos funcionan de manera similar.