Button Freigabe nach X Sekunden

[André Griepenburg]

Hallo,

ich möchte den Submit Button eines Formulars zunächst sperren.
Erst nachdem 5 Sekunden vergangen sind, soll der Button aktiv werden.
Während die Sekunden runter zählen sollte dies nach Möglichkeit beim Button sichtbar werden, etwa so:
absenden (5)
...
absenden (4)
...
usw.


Hat jemand eine Ahnung, wie man das realisiert?
Oder wo ich hierzu Tutorials finde?
Schön wäre es auch, wenn ich den "Countdown" über einen Funktionsaufruf starten kann (z.B. erst dann, wenn die Seite vollständig geladen wurde).

Gruß & Dank,
André

 

[BLochmann]

CODE <script language="javascript">
var interval = window.setInterval ('countItDown()', 1000);
var sec = 5;

function countItDown()
{
document.getElementById('max').innerHTML = 'Button wird aktiviert in '+sec+' Sekunden';
sec--;

if (sec < 0 )
{
document.getElementById('mybutton').disabled = '';
clearInterval(interval);
}
}
</script>
<div id="max" style="font-family: verdana; font-size: 10px; color: #000099; font-weight: bold;"></div>
<input type="button" id="mybutton" value="Button" disabled="disabled">


Quelle: http://www.computerhilfen.de/hilfen-8-140107-0.html

Viel Spass damit!

 

[André Griepenburg]

Öhm,

perfekt, danke.
Das war exakt das, was ich gesucht habe.
Hab das ganze natürlich noch ein bisschen an meine Bedürfnisse angepasst

Mhh...
und ich hab endlich den "Aha"-Effekt bei JavaScript erlebt...
ich verstehs

 

[radarin]

Sehr praktisches Script. Ich würde aber gerne den Zähler in den Button integrieren, aber mit dem <div> im value will das nicht klappen. Weiss jemand wie das geht?

Danke im Voraus.

 

[André Griepenburg]

mhh..
also ich "rate" mal ein bisschen.

Du müsstest dem Button eine id zuweisen:

QUOTE <input type="submit" id="irgendwas" value="weg damit">


Und dann den folgenden Code ersetzen:


QUOTE document.getElementById('max&#39.innerHTML = 'Button wird aktiviert in '+sec+' Sekunden';


Hier muesste etwas rein wie:


QUOTE document.getElementById('irgendwas&#39.value = 'Aktiv in '+sec+' Sekunden';


Das ganze ist ungetestet und ohne großes JS Wissen ^^
Aber so in der Art sollte es wohl gehen


Edit: Logisch wäre es natürlich dann noch, wenn du nach Ablauf der Zeit die Beschriftung änderst in "absenden" oder ähnliches

 

[radarin]

Deine Überlegung war richtig. Das modifizierte Script inkl. Textänderung nach Ablauf der Zeit:

CODE

<script language="javascript">
var interval = window.setInterval ('countItDown()', 1000);
var sec = 5;

function countItDown()
{
//document.getElementById('max').innerHTML = 'Button wird aktiviert in '+sec+' Sekunden';
//document.getElementById('mybutton').value = 'Aktiv in '+sec+' Sekunden';
document.getElementById('mybutton').value = 'Absenden ('+sec+')';
sec--;

if (sec < 0 )
{
document.getElementById('mybutton').disabled = '';
document.getElementById('mybutton').value = 'Absenden';
clearInterval(interval);
}
}
</script>
<!-- <div id="max" style="font-family: verdana; font-size: 10px; color: #000099; font-weight: bold;"></div> -->
<input type="submit" id="mybutton" value="Absenden" disabled="disabled">

 

[André Griepenburg]

Hallo,

hab leider erst heute das ganze einbauen und Testen können, dabei kam raus, dass das ganze unter dem IE NICHT funktioniert.
Fehlermeldung:
document.getElementById(...) ist NULL oder kein Objekt


Kann da jemand etwas mit anfangen?
Bzw. kann mir hier jemand weiter helfen?
Bin über jeden Hinweis froh...

url:
http:// www . partynation . tv/sms.php
(Das Script wurde in den Testmodus geschaltet und für alle freigegeben, trotzdem bitte NICHT verlinken)


PS: Im FF geht das ganze ohne größere Probleme

 

[radarin]

Mit der Fehlermeldung kann ich Dir leider auch nicht helfen. Den Code so wie ich ihn vorher gepostet habe, ist auf dieser Seite 1:1 drinn, da funktioniert es mit dem Explorer:

kuckst du hier

Kann mir höchstens vorstellen, dass sich da zwei Scripte in die Quere kommen.

Gruss René

 

[Alain Aubert]

Im IE7 funktioniert das wunderbar. Hab grad keinen 6er.
Du müsstest also die _vollständige_ Fehlermeldung posten.

 

[radarin]

Bei mir (XP) funktionierts auch im 7er nicht...

 

[André Griepenburg]

QUOTE (radarin @ Fr 2.2.2007, 18:58) Bei mir (XP) funktionierts auch im 7er nicht...

Hallo,

dein Link funktioniert bei mir, also scheinen sich dort tatsächlich 2 Scripte zu beißen.
Werde mich nun mal auf die Fehlersuche begeben...

Andernfalls muss ich ne andere Möglichkeit finden...

 

[André Griepenburg]

Habs rausgefunden ^^
Tjaja, meine Javascripte sind alle in Ordnung, allerdings gilt dis nicht für das von LayerAds.
Solange ich das Script für die Buttonfreigabe >nach< dem LA Script schreibe bekomme ich keine Probleme (keine JS Fehler), drehe ich das jedoch um gibt es den o.g. Fehler.