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

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.

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:

//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!