Cómo enviar un formulario haciendo clic en un enlace en JavaScript?

Un formulario HTML se puede enviar fácilmente haciendo clic en cualquier elemento HTML con la ayuda de JavaScript. El elemento de forma tiene un entregar() método, e invocar este método con una llamada externa enviará el formulario.

Este artículo se centrará en enviar un formulario al presionar un enlace. Para mostrar esto, se creará un formulario que recibirá los detalles de registro del usuario, y al enviar el formulario, simplemente imprimirá el nombre del usuario en la consola.

Paso 1: Configurar los elementos HTML

Cree un nuevo documento HTML, y en ese documento, cree un formulario con una ID particular, y dentro de ese formulario, cree el campo de entrada para el nombre de usuario y la contraseña. Después de eso, en lugar del botón Enviar, cree un nuevo enlace usando el etiqueta y usa el atributo OnClick y configúrelo igual a LinkPress () función:

Por favor escriba su nombre de usuario

Escriba su contraseña

Enlace para la presentación

En este punto, este documento HTML produce la siguiente página web:

Nuestra página web incluye dos campos de entrada y un enlace que tiene un atributo OnClick () establecido en él.

Paso 2: Hacer el formulario "Enviar" en el enlace Presione

Cada elemento de forma en el HTML contiene el método Subt (). Para enviar un formulario, debe referenciarse en el JavaScript, y luego el método Subt () debe llamarse utilizando esa referencia. En el archivo de script, crea la función LinkPress () y agregue la funcionalidad utilizando las siguientes líneas:

función linkpress ()
Forma = documento.getElementById ("formulario");
forma.entregar();

La primera línea obtiene la referencia de nuestra etiqueta de formulario y la almacena dentro de la variable "forma". La segunda línea usa esa referencia y luego llama al envío () del formulario. Ejecutar este documento HTML proporciona el siguiente resultado:

Al presionar el enlace, envía el formulario, pero dado que no hay un archivo de backend conectado para recibir el formulario, por lo tanto, solo restablece el campo.

Paso 3: solicite el "nombre de usuario" al envío del formulario

Quieres agregar una función listo() Tras la carga completa de la página web; Por lo tanto, agregue la propiedad de "encendido"En la etiqueta como:

Y luego en el archivo de script, agregue las siguientes líneas:

función lista ()
Forma = documento.getElementById ("formulario");
forma.addEventListener ("enviar", función (evento)
evento.prevenDefault ();
nombre = documento.GetElementById ("Nombre").valor;
alerta ("bienvenido" + nombre);
);

Cuando el documento HTML está completamente cargado:

• Se agrega un oyente de eventos al elemento de formulario utilizando su referencia.
• Este oyente del evento escucha el evento de envío
• Tras el envío, evita el comportamiento predeterminado del formulario (detener la redirección).
• Al final, saluda al usuario usando su nombre de usuario.

Si la página web se carga ahora, proporciona la siguiente salida:

Como puede ver, se presentó el formulario y, al prevenir el comportamiento predeterminado, pudimos evitar la necesidad de un backend para administrar los datos de los campos.

Conclusión

Es realmente fácil enviar un formulario haciendo clic en un enlace con la ayuda de JavaScript. El elemento de formulario de un documento HTML tiene este método llamado entregar(). Para enviar el formulario, solo tiene que hacer una llamada explícita a este método, que hemos hecho en este artículo.