Formulario que se envía de forma automática al rellenar los datos

Formulario que se envía de forma automática al rellenar los datos

En algunas páginas web te habrás fijado que los formularios web funcionan solos.

Rellenas un formulario y en cuanto se valida que todo es correcto te pasa al siguiente campo sin que tu hagas nada.

Sigues rellenando y cuando lo tienes todo no hay botón de enviar y sin embargo el formulario web se envía sólo.

Este es por ejemplo el caso del aplicativo de entrada en la web de ing.es

Ejemplo de formulario con envío automático de datos
El panel de acceso a ing es un ejemplo de formulario con envío automático de datos

En esta entrada no programaremos el caso de la web de ing pero si otro muy parecido (y más fácil).

Se trata de un formulario de tipo newsletter dónde tras rellenar el campo este se envía automáticamente.

El código html y css del formulario

Fijaros que el campo de envío del formulario está desactivado porqué en este ejemplo se hará mediante javascript.

<form action="https://francescricart.com/" target="_blank" name="formulario">
	<input type="email" name="email" placeholder="escribe tu email" ><span id="error"></span>
	<!-- <input type="submit" name="enviar" value="enviar"> -->
</form>

En cuanto al CSS no es relevante para este ejemplo.

Sin embargo podéis usar el siguiente:

*{
	box-sizing:border-box;
	margin:0;
	padding:0;
}
form{
	width:200px;
	padding:32px;
	background-color:#ccc;
	border:1px solid #000;
	border-radius:5px;
}

[type="email"]{
	width:100%;
	padding:8px 16px;
	border:#000;
	border-radius:1px;
}

#error{
	color:#ff0000;
}

Con el siguiente resultado:

formulario web minimalista
formulario web minimalista

Validación y envío del formulario con submit()

//controlar el envío del formulario
	window.addEventListener("load",function(){
		formulario = document.formulario;
		email = document.formulario.email;
		campoError = document.getElementById("error");
		
		email.addEventListener("input",function(){
			campoError.innerHTML= "";
		});
		email.addEventListener("change",envioAutomatico);
	});

	function enviarFormulario(e){
		e = e || window.event;	//compatibilidad explorer
		if(email.value==""){ 
			e.preventDefault(); // parar la ejecución por defecto del evento.
			campoError.innerHTML ="rellene este campo";
		}else{
			console.log("se ha procedio al envío del formulario");
		};
	};

	function envioAutomatico(){
		formulario.addEventListener("submit",enviarFormulario);
		formulario.submit();
	}

Diferenciamos 3 momentos

  1. Declarar variables tras la carga del documento web (evento load). Fijaros que formulario, email y campoError no tienen la palabra var delante. Se hace expresamente para asegurarnos que su ámbito es global.
  2. Asignar los eventos input y change.
    • Input se ejecuta inmediatamente después de introducir un dato en un input y sirve para borrar avisos.
    • Change se ejecuta cuando el input pierde el foco (hacemos click fuera del input). En este momento es cuando se activa envioAutomatico que es la función encargada de forzar el submit().
  3. Validación y envío del formulario. Esta entrada te ayudará. La instrucción clave es la línea
    formulario.submit();

¡Hola!

Querido lector,

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media / 5. Votos:

Todavía no hay votos. Sé el primero en valorar la entrada.

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.