 Comprar EPUB/PDF 

ES

 → El navegador: Documentos, Eventos e Interfaces → Formularios y controles

 25 de marzo de 2021

Formularios: evento y método submit

El evento submit se activa cuando el formulario es enviado, normalmente se utiliza para validar el formulario antes de ser
enviado al servidor o bien para abortar el envío y procesarlo con JavaScript.

El método form.submit() permite iniciar el envío del formulario mediante JavaScript. Podemos utilizarlo para crear y enviar
nuestros propios formularios al servidor.

Veamos más detalles sobre ellos.

Evento: submit
Mayormente un formulario puede enviarse de dos maneras:

1. La primera – Haciendo click en <input type="submit"> o en <input type="image"> .

2. La segunda – Pulsando la tecla Enter en un campo del formulario.

Ambas acciones causan que el evento submit sea activado en el formulario. El handler puede comprobar los datos, y si hay
errores, mostrarlos e invocar event.preventDefault() , entonces el formulario no será enviado al servidor.

En el formulario de abajo:

1. Ve al campo tipo texto y pulsa la tecla Enter .

2. Haz click en <input type="submit"> .

Ambas acciones muestran alert y el formulario no es enviado debido a la presencia de return false :

1 <form onsubmit="alert('submit!');return false">

2 Primero: Enter en el campo de texto <input type="text" value="texto"><br>
3 Segundo: Click en "submit": <input type="submit" value="Submit">
4 </form>

Primero: Enter en el campo de texto texto

Segundo: Click en "submit": Submit

 Relación entre submit y click

Cuando un formulario es enviado utilizando Enter en un campo tipo texto, un evento click se genera en el <input
type="submit">

Muy curioso, dado que no hubo ningún click en absoluto.

Aquí esta la demo:

1 <form onsubmit="return false">

2 <input type="text" size="30" value="Sitúa el cursor aquí y pulsa Enter">
3 <input type="submit" value="Submit" onclick="alert('click')">
4 </form>

Sitúa el cursor aquí y pulsa Enter Submit

Método: submit
Para enviar un formulario al servidor manualmente, podemos usar form.submit() .

Entonces el evento submit no será generado. Se asume que si el programador llama form.submit() , entonces el script ya
realizó todo el procesamiento relacionado.

A veces es usado para crear y enviar un formulario manualmente, como en este ejemplo:

 
1 let form = document.createElement('form');
2 form.action = 'https://google.com/search';
3 form.method = 'GET';
4
5 form.innerHTML = '<input name="q" value="test">';
 6
7 // el formulario debe estar en el document para poder enviarlo
8 document.body.append(form);
9
10 form.submit();

 Tareas

Formulario modal 

importancia: 5

Crea una función showPrompt(html, callback) que muestre un formulario con el mensaje html , un campo input y
botones OK/CANCELAR .

● Un usuario debe escribir algo en el campo de texto y pulsar Enter o el botón OK, entonces callback(value) es
llamado con el valor introducido.
● En caso contrario, si el usuario pulsa Esc o CANCELAR, entonces callback(null) es llamado.

En ambos casos se finaliza el proceso se y borra el formulario.

Requisitos:

● El formulario debe estar en el centro de la ventana.

● El formulario es modal. Es decir que no habrá interacción con el resto de la página, siempre que sea posible, hasta que el
usuario lo cierre.
● Cuando se muestra el formulario, el foco debe estar en el <input> del usuario.
● Las teclas Tab / Shift+Tab deben alternar el foco entre los diferentes campos del formulario, no se permite cambiar el
foco a otros elementos de la página.

Ejemplo de uso:

1 showPrompt("Escribe algo<br>...inteligente :)", function(value) {

2 alert(value);
3 });

Demo en el iframe:

Pulsa el botón de abajo

Click aquí para mostrar el formulario

P.S. El código fuente tiene el HTML/CSS para el formulario con posición fija. Pero tú decides cómo haces el modal.

Abrir un entorno controlado para la tarea.

solución


Una ventana modal puede ser implementada utilizando un <div id="cover-div"> semi-transparente que cubra
completamente la ventana, como a continuación:

1 #cover-div {
2 position: fixed;
3 top: 0;
4 left: 0;
5 z-index: 9000;
6 width: 100%;
7 height: 100%;
8 background-color: gray;
9 opacity: 0.3;
10 }

Debido a que el <div> cubre toda la ventana, recibe todos los clicks, en vez de la página tras él.

También podemos evitar el scroll en la página utilizando body.style.overflowY='hidden' .

El formulario no debe estar en el <div> sino junto a él, porque no queremos que tenga opacity .
 Abrir la solución en un entorno controlado.

 Lección anterior Próxima lección


Compartir  Mapa del Tutorial

 Comentarios
● Si tiene sugerencias sobre qué mejorar, por favor enviar una propuesta de GitHub o una solicitud de extracción en
lugar de comentar.
● Si no puede entender algo en el artículo, por favor explique.
● Para insertar algunas palabras de código, use la etiqueta <code> , para varias líneas – envolverlas en la etiqueta
<pre> , para más de 10 líneas – utilice una entorno controlado (sandbox) (plnkr, jsbin, codepen…)

0 Comentarios 1 Acceder


G Sé el primero en comentar...

INICIAR SESIÓN CON O REGISTRARSE CON DISQUS ?

Nombre

 5 Mejores Más recientes Más antiguos

Sé el primero en comentar.

Política de Privacidad No vendan mis datos

© 2007—2024 Ilya Kantoracerca del proyecto

contáctenos