Tutorial Formular-Bereiche deaktivieren mittels Javascript - nur für fortgeschrittene Benutzer geeignet

Turorial zur Javascript Seite ElementByID

Auf dieser Seite habe ich mittels einer Javascript-Funktion als Beispiele zum einen ein wechselndes Schaltflächenbild und zum anderen zwei Optionsschaltflächen als Radio-Buttons erstellt (natürlich sollte man nur eines der beiden Beispiele verwenden). Diese Javascript-Funktion gehört in den Head der Seite mit dem Formular.

> Layout markieren > Fenster “Layout-Eigenschaften” > “Zwischen Head Tags” einfügen

<script type="text/javascript">

    window.onload = function()
    {
       verdecken();
    }

    function anzeigen()
    {
       document.getElementById("auswahl").style.display = "";
       document.getElementById("zeigebutton").style.display = "";
       document.getElementById("verdeckenbutton").style.display = "none";
    }
    function verdecken()
    {
       document.getElementById("auswahl").style.display = "none";
       document.getElementById("verdeckenbutton").style.display = "";
       document.getElementById("zeigebutton").style.display = "none";
    }

</script>

Im Skript oben habe ich 2 Funktionen eingebaut

• verdecken - wird nach ‘onClick’ und zusätzlich gleich beim Aufruf der Seite mittels des Befehls ‘window.onload’ (beim Laden der Seite) gewählt
• anzeigen - wird nach ‘onClick’ gewählt

Der Befehl ‘document.getElementById’ greift auf ein HTML-Objekt zu, das diese ID trägt.

Der Befehl ‘style.display’ bewirkt folgendes:

• style.display = "" - die Anzeige bleibt unverändert (kein Inhalt)
• style.display = "none" - die Anzeige wird ausgeblendet

Ich setze also im Skript oben den Befehl ‘style.display’, entsprechend der Objekt-ID, zum einen für "auswahl" und zum anderen für meine beiden Schaltflächenbilder "zeigebutton" und "verdeckenbutton" um. Die beiden Schaltflächenbilder habe ich zunächst in meiner “Assets-Verwaltung” eingelesen und in das Verzeichnis “/assets/images” verschoben.

Um die Javascript-Funktion nun mittels ‘onClick’ abzufragen, setze ich lediglich in die Objekt-HTML des jeweiligen Radio-Button “im Tag” folgendes hinzu:

Jetzt habe ich mir einen zusätzlichen Layout-Bereich aufgezogen, in den ich meinen Text und mein Auswahlfeld gelegt habe. Diesem Layout-Bereich habe ich in der Objekt-HTML die DIV-ID “auswahl” gegeben.

> Layout-Bereich markieren > Fenster “Layout-Bereich-Eigenschaften” > Button “HTML”

vor dem Tag (vorher):

<div id="auswahl">

nach dem Tag (nachher):

</div>

Für die Schaltflächenbilder habe ich mir ein Textfeld aufgezogen und auf die Bilder, die ich bereits in meiner Assets-Verwaltung eingelesen habe, mittels des HTML-Befehls <img src> (image source = Bild Quelle) verlinkt und diesen dann ihre ID und den entsprechenden ‘onClick’ Befehl gegeben, wobei ich hier dem zuerst aufgerufenen Button “verdeckenbutton.jpg” noch die Style-Anweisung “display: none;” gegeben habe, damit nicht kurz beide Buttons nebeneinander erscheinen.

<img src="../assets/images/verdeckenbutton.jpg" name="zeigebutton" width="71" height="17" id="zeigebutton" title="Verdecken" style="display: none; cursor: pointer" onClick="verdecken()" />
<img src="../assets/images/zeigebutton.jpg" name="verdeckenbutton" width="71" height="17" id="verdeckenbutton" title="Anzeigen" style="cursor: pointer" onClick="anzeigen()" />

Wie immer müsst Ihr natürlich auf die korrekte relative Pfadangabe zum Verzeichnis mit den Bildern achten, hier mit 2 Punkten ../ von einer Unterseite.

nach oben

Viel Erfolg!