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

5
(1)

Publicado

Aviso importante web en obras

Es posible que el contenido que estás visualizando tenga un formato un poco raro o que se haya perdido algún contenido. Esto se debe a que en 2023/09 decidí renovar la página y con más de 1000 escritos el trabajo de irlos revisando uno por uno es agotador. Poco a poco iré corrigiendo todos los contenidos. ¡Gracias por la comprensión!

Ejemplo de formulario con envío automático de 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
Formulario que se envía de forma automática al rellenar los datos 1
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 que se envía de forma automática al rellenar los datos 2

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!

  1. Avatar de Derek Pérez
    Derek Pérez

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

  2. Avatar de Francesc Ricart

    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,

  3. Avatar de Mariano

    Muy interesante este artículo Francesc, es exactamente lo que estaba buscando para incorporarlo en un nuevo blog.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *