¿Cómo desactivo temporalmente un botón de envío durante 3 segundos (encendido) y luego lo vuelvo a habilitar?

Question

Soy bastante nuevo en el uso de javascript y esto es lo que tengo hasta ahora:

<!-- this is to disable the submit button and then re-enable it after 3 sec --> 

<script type="text/javascript"> 

    function enable() 
    { 
    var x = document.LAYOUTFORM.getElementById("create_button"); 
    setTimeout(x.removeAttribute("disabled"), 3000); 
    } 

</script> 

Y para el botón tengo esto:

<INPUT TYPE="SUBMIT" VALUE=" Create PDF " class="FORMBUTTON" ID="create_button" onclick="javascript:this.disabled=true;javascript:enable();"> 

he metido con esto por horas y la mayoría de lo mirarás y sabrás lo que está mal de inmediato. Mi ID de formulario y nombre es LAYOUTFORM. ¿Alguien puede decirme qué estoy haciendo mal aquí?

Para obtener puntos de bonificación, también me gustaría que el texto del botón cambie temporalmente a "Crear ..." mientras está desactivado, y luego de nuevo a Crear PDF.

Answer 1

Puede acceder al botón ya sea por id que es único a nivel mundial o por el name única de la forma envolvente

lo que tiene que sea

var x = document.getElementById("create_button"); 

o

var x = document.LAYOUTFORM.elements["create_button_name"]; 

(Suponiendo que create_button_name es el nombre del botón:

<input type="submit" value=" Create PDF " id="create_button" name="create_button_name" class="formButton" onclick="javascript:this.disabled=true;javascript:enable();"> 

)

El primer parámetro de la setTimeout debería ser una función:

setTimeout(removeAttr, 3000); 

function removeAttr() { 
    x.removeAttribute("disabled") 
} 

Por cierto, el HTML no es necesario ser (y no debe ser, para facilitar la lectura, etc) todo en mayúsculas.

Answer 2

Suelte LAYOUTFORM entre document y getElementById.

Sólo un fyi, usando Firebug, herramientas de desarrollo de Chrome, o cualquiera que sean las herramientas equivalentes para IE, puede simular con su javascript en la consola. Console.log también generará texto e incluso objetos (en CDT) que puede inspeccionar. Muy útil para explorar :)

Answer 3

Varios problemas. Primero, en el atributo onclick, usa javascript: que es para URL. Las cosas dentro del atributo onclick ya están evaluadas como código. Segundo, el código en su setTimeout debe ser una cadena o un nombre de función. Usted debe hacer algo más parecido a esto:

HTML:

<INPUT TYPE="SUBMIT" VALUE=" Create PDF " class="FORMBUTTON" ID="create_button" onclick="disable();"> 

JavaScript:

<script type="text/javascript"> 

    function disable() { 
     x=document.getElementById("createbutton"); 
     x.disabled=true; 
     x.value="Creating..."; 
     setTimeout(enable, 3000); 
    } 

    function enable() { 
     x.disabled=false; 
     x.value=" Create PDF "; 
    } 

</script> 

Answer 4

Hay dos problemas principales con el JavaScript:

1. ElEl métodopertenece a document, no a su elemento de forma (o cualquier otro).

2. setTimeout() espera que el primer parámetro sea una función (o una cadena, pero casi nunca hay una situación cuando usar una cadena es apropiado).

Prueba esto:

function enable() { 
    var x = document.getElementById("create_button"); 
    setTimeout(function() { 
     x.removeAttribute("disabled"); 
    }, 3000); 
} 

Usted puede tener gusto para combinar la desactivación y volver a habilitar en una sola función:

<INPUT TYPE="SUBMIT" ... onclick="temporaryDisable(this);"> 

function temporaryDisable(el) { 
    el.disabled = true; 
    setTimeout(function() { 
     el.disabled = false; 
    }, 3000); 
} 

Tenga en cuenta que no es necesario utilizar .removeAttribute() , puede simplemente configurar la propiedad .disabled directamente (como ya estaba haciendo cuando deshabilitó el elemento).

EDITAR: Acabo de ver la parte de "puntos de bonificación" de su pregunta. Sólo tiene que establecer el .value propiedad:

function temporaryDisable(el) { 
    var oldLabel = el.value; 
    el.value = "Creating..."; 
    el.disabled = true; 

    setTimeout(function() { 
     el.disabled = false; 
     el.value = oldLabel; 
    }, 3000); 
} 

Answer 5

manera más simple:

<input ... onclick="lockoutSubmit(this)"> 

En su javascript:

function lockoutSubmit(button) { 
    var oldValue = button.value; 

    button.setAttribute('disabled', true); 
    button.value = '...processing...'; 

    setTimeout(function(){ 
     button.value = oldValue; 
     button.removeAttribute('disabled'); 
    }, 3000) 
} 

Answer 6

<script type="text/javascript"> 
function disDelay(obj){ 
obj.setAttribute('disabled','disabled'); 
setTimeout(function(){obj.removeAttribute('disabled')},30000) 
} 
</script> 

<input type="submit" value="Submit" onclick="disDelay(this)"> 

http://www.webdeveloper.com/forum/showthread.php?164239-Temporarily-Disable-Submit-Button