23 May 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.
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:

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
- 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.
- 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().
- 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!
Derek Pérez
Posted at 23:59h, 03 octubreYo 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 octubreGracias 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,
Mariano
Posted at 20:41h, 28 octubreMuy interesante este artículo Francesc, es exactamente lo que estaba buscando para incorporarlo en un nuevo blog.
Francesc Ricart
Posted at 21:16h, 07 noviembrexd