1

Quisiera realizar las siguientes operaciones sobre un botón (Enviar):

  • Se deshabilitará durante 3 segundos y su texto cambiará a "Enviando...".
  • Después de los 3 segundos, volverá a tener el texto "Enviar".

Código HTML del botón:

<input type="submit" value="Enviar" id="enviar" name="btnEnviar"/>

Código JS:

function confirmEnviar(){
    var pregunta = confirm("¿Deseas enviar el formulario?");
    if(pregunta == true)
        deshabilitar_btnEnviar();
    else
        //No hacer nada.
        event.preventDefault();
}

function deshabilitar_btnEnviar(){
    setTimeout(function() {
    document.getElementById("enviar").disabled = true;
    document.getElementById("enviar").innerHTML="Enviando...";
    }, 3000);
    document.getElementById("enviar").innerHTML = "Enviar";
}
4
  • cuál es la intención de tu código Commented el 17 may. 2017 a las 11:27
  • Realizar lo que pone en la descripcion entre los comentarios //
    – omaza1990
    Commented el 17 may. 2017 a las 11:31
  • ¿Y qué es lo que no te funciona? Piensa que sin el código HTML no sabemos si estás haciendo bien el trabajo de agregar el evento y sin saber si estás ejecutando en algún momento deshabilitar_btnEnviar() tampoco. Por favor, proporciónanos un marco de trabajo completo para poder ayudarte. Commented el 17 may. 2017 a las 11:37
  • Ya actualicé la pregunta con más documentación.
    – omaza1990
    Commented el 17 may. 2017 a las 11:43

2 respuestas 2

3

He intentado reproducir tu problema, y por lo pronto estás bloqueando y desbloqueando en orden incorrecto, aunque también podría ser debido a que no estás llamando a la función adecuada.

A la hora de confirmar el formulario, primero habría que bloquear el botón y cambiar el texto y, por último, retrasar la ejecución de desbloquear y restaurar el texto del botón los tres segundos.

Un ejemplo de lo que quieres hacer podría ser:

function confirmEnviar() {
  miformulario.btnEnviar.disabled = true; 
  miformulario.btnEnviar.value = "Enviando...";
  setTimeout(function(){
    miformulario.btnEnviar.disabled = false;
    miformulario.btnEnviar.value = "Enviar";
  }, 3000);
  return false;
}

miformulario.btnEnviar.addEventListener("click", function(){ 
    return confirmEnviar();
}, false);
<form name="miformulario">
  <input type="submit" name="btnEnviar" value="Enviar" />
</form>

1
setTimeout(function() {
    document.getElementById("enviar").disabled = true;
    document.getElementById("enviar").innerHTML="Enviando...";
    }, 3000);
    document.getElementById("enviar").innerHTML = "Enviar";
    }

Te recomiendo usar innerHTML dado que cambia el valor del botón, si lo que quieres

1
  • Los elementos <input> no muestran el contenido de innerHTML. Son etiquetas de elementos vacíos (ver documentación). Commented el 17 may. 2017 a las 11:49

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.