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

0
(0)

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 0 / 5. Votos: 0

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?

¿Dónde he fallado?

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

2 Comments
  • Derek Pérez
    Posted at 23:59h, 03 octubre Responder

    Yo estoy haciendo una hoja de cálculos… y lo que escribo en unos campos (que son unos input) se imprime en un span el resultado de todas las sumas(que son automáticas). Pero…. pero… yo quiero que lo que aparezca en el span, aparezca automáticamente en otro input. Solo que todo lo que aparece en la web es todo para los input… pero yo necesito, pasar la información de un span a un input automáticamente.
    La información que aparece en este artículo no me es nada útil, porque esto es algo para aparecer en un span. Yo lo que quiero es que la información del span que aparece en un span esté en el input…

    ¡Gracias por su atención y por sus respuestas!!

  • Francesc Ricart
    Posted at 23:00h, 05 octubre Responder

    Gracias por el tiempo que has tomado en tu comentario.
    Cuando lo escribas en el span al mismo tiempo mira de escribirlo también en un input y solucionado.
    Espero que te pueda ser útil
    Saludos,

Post A Comment

  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.