Wie deaktiviere ich vorübergehend eine Absenden-Schaltfläche für 3 Sekunden (onsubmit), dann wieder aktivieren?

Question

Ich bin ziemlich neu Javascript zu nutzen und hier ist das, was ich bisher:

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

Und für die Schaltfläche Ich habe dies:

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

Ich habe mit diesem für Stunden und am meisten verwirrt von du wirst es anschauen und sofort wissen, was falsch ist. Meine Formular ID und Name ist LAYOUTFORM. Kann mir jemand sagen, was ich hier falsch mache?

Für Bonuspunkte möchte ich auch, dass der Text der Schaltfläche vorübergehend zu "Creating ..." wechselt, während er deaktiviert ist, und dann zurück zu Create PDF.

Answer 1

Sie die Taste entweder durch id zugreifen können, die global eindeutige oder durch die name einzigartig in der umschließenden Form

Also Sie haben, ist entweder

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

oder

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

(Angenommen, create_button_name ist der Name der Schaltfläche:

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

)

Der erste Parameter des setTimeout sollte eine Funktion sein:

setTimeout(removeAttr, 3000); 

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

BTW, HTML muss nicht sein (und sollte nicht sein, zur besseren Lesbarkeit etc.) in Großbuchstaben.

Answer 2

Löschen Sie die LAYOUTFORM zwischen Dokument und getElementById.

Nur ein Fyi, mit Firebug, Chrome-Entwickler-Tools oder was auch immer die entsprechenden Tools für IE sind, können Sie mit Ihrem Javascript auf der Konsole Affe. Console.log gibt auch Text und sogar Objekte (in CDT) aus, die Sie überprüfen können. Sehr nützlich für die Erkundung :)

Answer 3

Mehrere Probleme. Zunächst verwenden Sie im onclick-Attribut javascript: was für URLs gilt. Zeug im onclick-Attribut wird bereits als Code ausgewertet. Zweitens sollte der Code in Ihrem setTimeout entweder eine Zeichenfolge oder ein Funktionsname sein. Sie sollten etwas mehr tun, wie folgt:

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

Es gibt zwei Hauptprobleme mit Ihrem JavaScript:

1. Die .getElementById() Methode gehört zu document, nicht zu Ihrem Formular (oder einem anderen) Element.

2. setTimeout() erwartet, dass der erste Parameter eine Funktion (oder ein String, aber fast nie eine Situation, wenn eine Zeichenfolge geeignet ist) ist.

Versuchen Sie folgendes:

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

Sie können gerne die Sperrung kombinieren und die erneute Aktivierung in eine einzige Funktion:

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

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

Beachten Sie, dass Sie nicht brauchen, .removeAttribute() zu verwenden Sie können die Eigenschaft .disabled direkt festlegen (wie Sie es bereits getan haben, als Sie das Element deaktiviert haben).

EDIT: Nur die "Bonuspunkte" Teil Ihrer Frage gesehen. Sie müssen nur die .value Eigenschaft setzen:

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

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

Answer 5

einfachste Weg:

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

In Ihrem 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