Cómo ocultar botón de formulario y mostrar gif de carga al enviar texto

klk3 Seguir

Iota
Verificación en dos pasos activada
Desde
29 Ene 2011
Mensajes
2.221
Hola qué tal, tengo un formulario para que los usuario de una web puedan subir un texto compuesto por título, descripción e información adicional. De tal modo:

<form action="/nuevo-texto/" method="POST">

<input type="text" value="" id="texto_titulo" minlength="5" maxlength="50" required>
<input type="text" value="" id="texto_descripcion" minlength="5" maxlength="300" required>
<input type="text" value="" id="texto_extra">

<input type="submit" value="Enviar texto" id="boton_envio">
<img style="display:none" id="imagenCargador" width="50px" src="../cargador.gif"/>


</form>

La cosa es que quiero que, cuando pulsen el botón de enviar, el botón desaparezca y aparezca un gif de una rueda cargando, hasta que se haga el insert en la base de datos, y así que no pulsen varias veces el botón ya que puede tardar unos segundos. Para ello simplemente con jquery cuando el botón se pulsa, le pone la propiedad block a la imagen del gif para mostrarla, y display none al botón.

Sin embargo, los 2 primeros campos son requeridos y tienen que ser entre unos caracteres específicos. Por ejemplo, si no rellenan el segundo campo con al menos 5 caracteres y pulsan en botón de enviar, no se va a enviar el formulario, sin embargo el botón ya va a desaparecer y aparecer el gif de cargando. No va a dejar hacer nada más. ¿Cómo lo podría solucionar? ¿Habría que hacer una función para que comprobase los caracteres de cada campo, o hay alguna solución más sencilla?

Gracias y saludos.
 

abecedaria

Zeta
Programador
Verificación en dos pasos activada
Desde
4 Ago 2015
Mensajes
1.532
Ponle un "onclick" al botón de submit, y en esa función que llame el evento, pones toda esa lógica que necesitas. Utiliza javascript para comprobar esos campos, y DOM para modificar los elementos.
Y si necesitas hacer el POST con esa ruta, puedes crear otro FORM invisible, y por DOM hacerle clic cuando la lógica del evento se haya superado.
 

jeremie

Beta
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
5 Sep 2021
Mensajes
89
Esto te puede servir:

JavaScript:
(function (w,d) {
    var btn = d.querySelector('input[type="submit"]');
    btn.addEventListener('click', () => {
        if (d.querySelector('#texto_titulo').value.length >= 5) {
            btn.style.display = 'none';
            d.querySelector('#imagenCargador').style.display = 'block';
        } else {
            alert('5 caracteres minimo')
        }
    });
})(window, document)
 

jeremie

Beta
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
5 Sep 2021
Mensajes
89
Si tienes mas condiciones, tienes que modificar la linea con el if, para agregar las otras condiciones. Otra opción es usar bibliotecas JS especializadas para validar formularios. Puede ser mas facil para ti si no conoces tanto el JS.

Por ejemplo:
 

klk3

Iota
Verificación en dos pasos activada
Desde
29 Ene 2011
Mensajes
2.221
Gracias por las respuestas, al final lo hice también con javascript, comprobando la longitud con value.length
 

¡Regístrate y comienza a ganar!

Beneficios

  • Gana dinero por participar
  • Gana dinero por recomendarnos
  • Descubre ofertas de empleo diariamente
  • Negocios seguros
  • ¡Información premium y más!

Acceder

¿Ya tienes una cuenta? Accede aquí

Arriba