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()
    {
       // Für das Auswahlfeld
       document.getElementById("auswahl").style.display = "";
       // Für das Eingabefeld der Telefon-Nummer
       document.getElementById("telefon").style.display = "";
    }
    function verdecken()
    {
       // Für das Auswahlfeld
       document.getElementById("auswahl").style.display = "none";
       // Für das Eingabefeld der Telefon-Nummer
       document.getElementById("telefon").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 “telefon” um.

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 mein Auswahlfeld gelegt habe. Diesem Layout-Bereich habe ich in der
Objekt-HTML die DIV-ID “auswahl” für die Anzeige des Auswahlfeldes gegeben (wie in meinem 1. Tutorial schon beschrieben) und einen zweiten Layoutbereich mit der DIV-ID “telefon” für das Eingabefeld der Telefon-Nummer.

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

vor dem Tag (vorher):

<div id="telefon">

nach dem Tag (nachher):

</div>

nach oben

Viel Erfolg!