Cómo enviar un formulario usando JavaScript
En esta publicación, pasaremos por cómo enviar un formulario usando JavaScript en detalle, pero primero veremos cómo crear un formulario HTML.
Creación de formulario HTML
Se puede crear un formulario HTML utilizando la etiqueta que ofrece HTML y toma dos atributos:
- El primero es la "acción" que contiene una URL (que maneja la sumisión del proceso de formulario).
- El segundo atributo es el "método" que tiene un método HTTP.
Un método HTTP puede ser de varios tipos y los dos más utilizados son:
- Get (usado para obtener algunos datos de un servidor)
- Publicar (utilizado para escribir datos en el servidor)
Sin embargo, no usaremos estos dos atributos en esta publicación, ya que no estamos trabajando con un servidor.
Vamos a escribir ahora el código HTML para la creación de formularios:
En el código anterior, creamos un formulario y dimos el identificación atributo a la forma cuyo significado veremos en un tiempo. A continuación, definimos dos campos de entrada y luego definimos un botón que tiene un tipo de entregar. Al final, colocamos un guion etiqueta y referenció el nombre de archivo "código.js"Eso contendrá nuestro código JavaScript.
Formulario de acceso y recuperación de valores del formulario
Ahora que hemos terminado con la creación de nuestro formulario, accedamos a este formulario desde JavaScript y luego recupere los valores de nombre de usuario y contraseña que están presentes dentro de la etiqueta de formulario. Para acceder al formulario usaremos el identificación atributo mencionado anteriormente a través del siguiente código:
var myForm = documento.getElementById ('myForm');De la misma manera, también podemos obtener los valores de los campos de entrada utilizando el identificación Atributo dado en el formulario HTML. La única diferencia es que daremos el valor al final del GetElementByid para que podamos recuperar el valor del campo de entrada y no del elemento en sí:
VAR UserName = documento.GetElementById ('Nombre de usuario').valor;contraseña de VAB = documento.getElementById ('contraseña').valor;
Enviar formulario y validar datos
Para enviar el formulario, usaremos el oyente de eventos que escucha un oyente específico continuamente. Un evento es simplemente una interacción de HTML y JavaScript activado por un usuario o navegador cuando el usuario manipula una página y este evento es manejado por el oyente del evento.
var myForm = documento.getElementById ('myForm');// oyente de eventos que escucha el evento de envío
myform.addEventListener ("enviar", función (e)
mi.prevenDefault ();
// recuperar valores
VAR UserName = documento.GetElementById ('Nombre de usuario').valor;
contraseña de VAB = documento.getElementById ('contraseña').valor;
// Validar los campos de nombre de usuario y contraseña
if (username == "|| contraseña ==")
alerta ("Llene todos los campos requeridos");
demás
alerta ("envío de formulario exitoso");
)
En el código anterior, primero, obtenemos la referencia del formulario utilizando el identificación atributo e iniciar un oyente de eventos de "entregar" en esta forma. La función especificada en el oyente del evento se invocará una vez que el usuario haga clic en el botón Enviar.
Dentro de la función, hemos realizado nuestra validación, es decir, si los campos de entrada del nombre de usuario o la contraseña están vacíos, entonces veremos un mensaje en el cuadro de alerta que dice Por favor llene todos los campos requeridos De lo contrario, recibiremos el mensaje de Envío de formulario exitoso.
Permítanos verificar primero haciendo clic en el botón Enviar dejando los dos campos de entrada vacíos:
Vamos a llenar ahora los dos campos y ver la salida:
Conclusión
Los formularios son muy útiles para recopilar datos de los usuarios y luego manipular o jugar con esos datos en JavaScript. En esta publicación, tomamos ayuda de un HTML Etiqueta para inicializar un formulario y luego definió dos campos de entrada y un botón. A continuación, accedimos al elemento de formulario dentro de un archivo JavaScript y luego recuperamos los valores de los campos de entrada de formulario utilizando el identificación atributo.
Al final, respondimos a la pregunta de cómo enviar un formulario usando JavaScript iniciando a un oyente de eventos que escuche el evento de envío, y cada vez que un usuario haga clic en el botón Enviar, este evento será despedido. También validamos nuestros campos de entrada dentro de la función del oyente del evento.