Formularschaltfläche nach dem drücken ausblenden

[olivers_free]

Hallo,

ich suche nach eine Möglichkeit die Formularschaltfläche "Abschicken" nach dem Drücken ausblenden zu lassen, damit die User nicht mehrmals darauf klicken.

Gibt es da eine Lösung?

Grüße
olivers_free

[Yeti]

Hi,

Gibt es da eine Lösung?

Ja. :-)

Der Yeti

[Sven Rautenberg]

Moin!

Gibt es da eine Lösung?

Ja. :-)

Nein, es gibt sogar mehrere. Und welche die beste ist, kann man nur sagen, wenn die näheren Umstände bekannt sind.

Allgemein: Sofern Javascript eingeschaltet ist, könnte onclick oder onsubmit die Schaltfläche ausgeblendet oder deaktiviert werden.

- Sven Rautenberg

[Ashura]

Hallo Sven.

Allgemein: Sofern Javascript eingeschaltet ist, könnte onclick oder onsubmit die Schaltfläche ausgeblendet oder deaktiviert werden.

Onclick dürfte hier nicht sonderlich nützlich sein, da dies vor der eigentlichen Aktion des jeweiligen Buttons aktiv wird.

Einen schönen Dienstag noch.

Gruß, Ashura

[Yeti]

Hallo Ashura,

Onclick dürfte hier nicht sonderlich nützlich sein, da dies vor der eigentlichen Aktion des jeweiligen Buttons aktiv wird.

Warum nicht? Die jeweilige Aktion wird dann dennoch ausgeführt (sofern man sie nicht explizit verbietet).
Folgendes Beispiel funktioniert:

  
<form action="http://www.example.com/" method="get">  
<button onclick="this.style.display='none'" type="submit" style="display: block">Ab damit</button>  
</form>  

Gruß,
Der Yeti

[Ashura]

Hallo Yeti.

Onclick dürfte hier nicht sonderlich nützlich sein, da dies vor der eigentlichen Aktion des jeweiligen Buttons aktiv wird.

Warum nicht? Die jeweilige Aktion wird dann dennoch ausgeführt (sofern man sie nicht explizit verbietet).

Hm, stimmt. Ich hatte nur kurz mit Hilfe folgender Eingabe in der Adressleiste getestet:

javascript:void(document.getElementsByTagName('input')[18].onclick=function(){this.disabled=true;})

Führe ich dies aus und betätige dann den „Vorschau generieren“–Button, wird das Formular nicht abgeschickt, sondern der Button sofort deaktiviert.

Folgendes Beispiel funktioniert:
[…]

Ja, bei mir auch, weshalb mich obiges umso mehr verwundert.

Einen schönen Dienstag noch.

Gruß, Ashura

[Ashura]

Hallo Ashura™.

javascript:void(document.getElementsByTagName('input')[18].onclick=function(){this.disabled=true;})

Ähm, der Index dürfte bei anderen anders sein, da ich in meinem selfjs noch ein paar Formularelemente dynamisch einfügen lasse.

Einen schönen Dienstag noch.

Gruß, Ashura

[olivers_free]

Folgendes Beispiel funktioniert:

<form action="http://www.example.com/" method="get">
<button onclick="this.style.display='none'" type="submit" style="display: block">Ab damit</button>
</form>

  
Super, das kommt meinem Ziel schon näher. Kann man das auch noch so darstellen, dass die Schaltfläche grundsätzlich noch sichtbar bleibt, aber abgeblendet und nicht mehr anklickbar erscheint?  
  
Grüße  
olivers\_free

[Ashura]

Hallo olivers_free.

Kann man das auch noch so darstellen, dass die Schaltfläche grundsätzlich noch sichtbar bleibt, aber abgeblendet und nicht mehr anklickbar erscheint?

Siehe mein Posting. Du suchst die http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#input@title=disabled–Eigenschaft.

Einen schönen Dienstag noch.

Gruß, Ashura

[olivers_free]

Siehe mein Posting. Du suchst die http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#input@title=disabled–Eigenschaft.

Aha, und wie setze ich diese Eigenschaft ein?

Grüße
olivers_free

[Ashura]

Hallo olivers_free.

Siehe mein Posting. Du suchst die http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#input@title=disabled–Eigenschaft.

Aha, und wie setze ich diese Eigenschaft ein?

Lies *bitte* mein verlinktes Posting.

Einen schönen Dienstag noch.

Gruß, Ashura

[olivers_free]

Lies *bitte* mein verlinktes Posting.

vielleicht liegt es einfach daran, dass ich keine Ahnung von Javascript habe, aber mir ist nicht klar, wo ich deinen Code-Schnipsel unterbringen soll...

Vielleicht könntest du mir das genauer erklären?

Grüße
olivers_free

[Ashura]

Hallo olivers_free.

Lies *bitte* mein verlinktes Posting.

vielleicht liegt es einfach daran, dass ich keine Ahnung von Javascript habe, aber mir ist nicht klar, wo ich deinen Code-Schnipsel unterbringen soll...

Gut, du hast ihn zumindest schon einmal bemerkt.

Vielleicht könntest du mir das genauer erklären?

Eine Möglichkeit wäre, meinen Schnipsel in einem Script–Block im Head–Bereich des jeweiligen Dokumentes unterzubringen. Hierbei musst du jedoch beachten, dass du den onclick–Event keinem Element zuordnen kannst, welches noch nicht existiert. Zum Zeitpunkt der Ausführung von JS im Head–Bereich existiert der jeweilige Formularbutton aber gewiss noch nicht. Also müssen wir mit dem http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onload@title=onload–Event des window–Objektes arbeiten, welcher aktiviert wird, wenn das Dokument vollständig fertig geladen wurde:

<head>  
  <script type="text/javascript">  
  
    [code lang=javascript]window.onload = function() {  
  
      // Tue etwas  
  
    };

</script>
<head>[/code]

Hier weisen wir dem onload–Event eine anonyme Funktion zu. Alternativ könnten wir auch die Referenz auf eine bestehende Funktion zuweisen, aber das soll uns hier nicht interessieren.

Weiters benötigen wir natürlich einen Zugriff auf den jeweiligen Formularbutton. Damit du hierfür keine Änderungen im HTML durchführen musst, verwenden wir das indexbasierte http://de.selfhtml.org/javascript/objekte/document.htm#get_elements_by_tag_name@title=getElementsByTagName. Alternativ kannst du auch die http://de.selfhtml.org/javascript/objekte/forms.htm@title=forms.http://de.selfhtml.org/javascript/objekte/elements.htm@title=elements–Collection verwenden.

Und nun kommt mein Codeschnipsel ins Spiel. Dieser verwendet ein und die selbe Vorgehensweise, indem er dem onclick–Event des Buttons eine anonyme Funktion zuweist, welche die letztendlich beim Klick auf den Button auszuführende Aktion durchführt:

document.getElementsByTagName('input')[18].onclick = function() {  
  this.disabled = true;  
}

Da der Index in Arrays und Collections immer bei 0 beginnt, greifen wir hier also auf das neunzehnte input–Element im Dokument zu. Diesen Wert musst du natürlich deinen Gegebenheiten gemäß anpassen. In dieser anonymen Funktion befinden wir uns nun im Kontext des Buttons, weshalb wir auch einfach mit http://de.selfhtml.org/javascript/sprache/objekte.htm#this@title=this darauf Bezug nehmen können. Und da Buttons über besagte disabled–Eigenschaft verfügen, können wir sie hier auch direkt manipulieren. Das gesamte Konstrukt bewirkt also eine Deaktivierung des Buttons, wenn der onclick–Event aktiv wird, lies: wenn man den Button per Maus oder Tastatur aktiviert.

Zum Schluss kombinieren wir nun also alles miteinander:

<head>  
  <script type="text/javascript">  
  
    [code lang=javascript]window.onload = function() { // Beim Fertigladen …  
  
      // … weisen wir dem onclick–Event des Buttons …  
      document.getElementsByTagName('input')[18].onclick = function() {  
        this.disabled = true; // …  diese auszuführende Aktion zu.  
  
    };

</script>
<head>[/code]

Wenn noch immer Fragen bestehen, stelle sie bitte.

Einen schönen Mittwoch noch.

Gruß, Ashura

[olivers_free]

Hallo Ashura,

vielen Dank für deine ausführliche Antwort. Sie hilft mir sehr, mich wieder in den Javascript-Code hineinzudenken.

Inzwischen habe ich noch ein wenig gegoogled und folgenden Code gefunden:

<script type="text/javascript">
<!--
function senden() {
document.formular.send.value="Daten werden gesendet";
document.formular.send.disabled=true;
}
//-->
</script>

<form action="#" onSubmit="senden()" name="formular">
<input type="submit" name="send" />
</form>

Der funktioniert...

Grüße
olivers_free

[Der Martin]

Hallo,

Gibt es da eine Lösung?
Ja. :-)
Nein, es gibt sogar mehrere.

das schließt ja automatisch ein, dass es _eine_ gibt.
Schließlich hat der OP nicht gefragt "nur eine" oder "genau eine Lösung".

*scnr*
 Martin

PS: Hat sonst noch jemand Erbsen übrig, wenn ich schon gerade am Zählen bin? ;-)

[Yeti]

Hi,

PS: Hat sonst noch jemand Erbsen übrig, wenn ich schon gerade am Zählen bin? ;-)

Nein, aber meine Haare müssten mal geschnitten, äääh, gespalten werden! =)

Der Yeti

[dedlfix]

echo $begrüßung;

ich suche nach eine Möglichkeit die Formularschaltfläche "Abschicken" nach dem Drücken ausblenden zu lassen, damit die User nicht mehrmals darauf klicken.
Gibt es da eine Lösung?

Ja. Man kann dazu die Eigenschaft disabled bemühen. Aber wenn die Anwender Javascript deaktiviert haben, hast du das Problem immer noch. Eine Möglichkeit, das doppelte Verarbeiten auf dem Server zu verhindern, wäre, ein Feld mit einem eindeutigen Wert mitzusenden und beim ersten Abarbeiten diesen Wert aus der Liste der gültigen Werte streichen. Alle weiteren Versuche, Formulardaten mit diesen Wert noch mal zu verarbeiten, können dann abgelehnt werden.

echo "$verabschiedung $name";

[sausage]

ich suche nach eine Möglichkeit die Formularschaltfläche "Abschicken" nach dem Drücken ausblenden zu lassen, damit die User nicht mehrmals darauf klicken.

relativ leichte übung, weiss nicht wieso das so ein riesen Thread ist ^^:

<input value="Absenden" type="submit" onlclick="this.style.display='none';">

fertig, wird nach dem anklicken nicht mehr angezeigt.

[Ashura]

Hallo sausage.

relativ leichte übung, weiss nicht wieso das so ein riesen Thread ist ^^:

Vielleicht solltest du ihn auch lesen …

<input value="Absenden" type="submit" onlclick="this.style.display='none';">

fertig, wird nach dem anklicken nicht mehr angezeigt.

Was nicht das ist, was der OP möchte.

Einen schönen Mittwoch noch.

Gruß, Ashura