JavaScript Form Beispiel 5: Enable / Disable Form Element

Unter Verwendung von JavaScript ist es möglich einzelne Elemente eines Forms zu deaktivieren (disable) oder zu aktivieren (enable). Sind in einem Formular bestimmte Rahmenbedingungen gegeben, so kann es sinnvoll sein, einzelne Elemente des Formulars zu deaktivieren. In solchen Fällen macht die Eingabe in bestimmten Feldern unter entsprechenden Bedingungen keinen Sinn mehr. Ein deaktiviertes Eingabeelement kann vom Benutzer nicht mehr editiert werden.

Ein Anwendungsbeispiel ist die Realisierung eines Formulars, in dem Kontaktdaten abgefragt werden. Hier kann der Besucher beispielsweise in einer Combo-Box angeben, ob er per E-Mail oder telefonisch kontaktiert werden möchte. Wählt er die telefonische Kontaktierung aus, so ist es sinnvoll, wenn nur die Eingabefelder aktiviert sind, die zur gewünschten Art der Kontaktaufnahme nötig sind. Das vorhandene Eingabeelement zur Eingabe der Telefonnummer kann in einem solchen Fall aktiviert werden, während das Input-Element zur Eingabe einer E-Mail-Adresse deaktiviert wird.

Im unten stehenden Beispiel-Code wird zuallererst ein Form-Element mit einem Textelement zur Eingabe definiert. Die darauf folgenden Links rufen die Funktion disable_form_element bzw. enable_form_element auf, wenn der Benutzer auf den jeweiligen Link klickt. Über die HREF-Eigenschaft der Links werden die entsprechenden Funktionen aufgerufen. Das HTML-Elementobjekt, welches als Parameter angegeben werden muss, wird mittels getElementById aus dem Dokumentenbaum über seine ID ermittelt. GetElementById ist Bestandteil des Objekts Document – siehe hierzu auch DOM (Document Object Model).

Der JavaScript-Code, welcher auf die Definition des Formulars folgt, implementiert die beiden oben genannten Funktionen mit den Namen disable_form_element und enable_form_element. Aufgabe der ersten Funktion im Script-Code ist es, ein übergebenes HTML-Elementobjekt zu deaktivieren. Dazu wird unter Verwendung des If-Statements zunächst geprüft, ob der übergebene Parameter ein HTML-Elementobjekt enthält. Ist dies der Fall, so wird das Element über die Eigenschaft disabled deaktiviert, indem dieser Eigenschaft der Wert TRUE zugewiesen wird.

Wird im zu übergebenen Parameter kein HTML-Elementobjekt an die Funktion übergeben, so wird mit der Methode Alert() eine Fehlermeldung ausgegeben. Alert ist eine der unter JavaScript möglichen Dialogboxen und Teil der Schnittstelle des JavaScript Window-Object. Beispiele zu den anderen Dialog-Boxen finden Sie unter Prompt, Confirm und Print. Die Funktion enable_form_element funktioniert auf die selbe Weise und unterscheidet sich von der vorherigen Funktion nur dadurch, dass die Disabled-Eigenschaft mit dem Wert FALSE belegt wird – das übergebene Eingabeelement wird hiermit aktiviert.

<form>
  Testfeld <input id="form_field" name="Name" type="text" value="Inhalt des Feldes" /><br>
  <a href="javascript:disable_form_element(document.getElementById ('form_field'))" title="">disable Field</a>
  <a href="javascript:enable_form_element(document.getElementById ('form_field'))" title="">enable Field</a>
</form>
<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Funktion deaktiviert ein übergebenes Input-Element
function disable_form_element (element) {
  // Wurde ein HTML-Elementknoten übergeben?
  if (typeof element == 'object' && element.nodeType == 1)
    // Dann kann dieses disabled (deaktiviert) werden
    element.disabled = true;
  else
    // Ansonsten wird eine Fehlermeldung in einer
    // Dialogbox ausgegeben.
    alert ('Parameterfehler: Element muss ein HTML-Elementobjekt sein!');
}

// Aktivieren eines übergebenen HTML-Input-Elements
function enable_form_element (element) {
  // Auch hier nur bei Elementobjekten...
  if (typeof element == 'object' && element.nodeType == 1)
    // Status auf enabled (aktiviert) setzen.
    element.disabled = false;
  else
    // Oder entsprechende Meldung in Alert-Box bei
    // falschem Parameter.
    alert ('Parameterfehler: Element muss ein HTML-Elementobjekt sein!');
}
// -->
</script>

« zurück zu Seite 1 2 3 4 weiter zu Seite 6 7 8 9 »