Obtener valor de formulario HTML en JavaScript
-
Use
document.formspara obtener el valor del formulario HTML en JavaScript -
Utilice el
idpara acceder al valor del formulario HTML en JavaScript
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.
