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>
Testfeld
disable Field enable Field
Letzte Posts aus unserem Forum

Probleme mit iphone

Hallo, ich habe ein Problem bei der Darstellung einer Webseite. In allen Browsern hat das bisher bestens funktioniert außer beim iPhone und iPad, wo ... » mehr

von Finlay am Dienstag, 10. Juli 2012 19:45 in JavaScript - noch nicht beantwortet

Stream musik

Hallo, ich bin auf der Suche nach einem Script, mit dem ich einen Leser für Audio-Spuren in eine Html-Webseite einfügen kann. Ich brauche dabei ... » mehr

von Finlay am Sonntag, 22. Januar 2012 22:52 in JavaScript - bisher 2 Antworten
Letzter Beitrag: Dienstag, 8. Mai 2012 16:04 von maharadja

ich habe das mal mit jplayer probiert und bei mir gings ... » mehr

Byte Array PDF im Browser anzeigen

Hallo, ich bekomme von einem Webservice ein PDF als Byte Array. Mit einem JsonP Request habe ich das Byte Array so wie es ist (als Array von Bytes) ... » mehr

von TiloS am Mittwoch, 11. April 2012 17:37 in JavaScript - noch nicht beantwortet

Überbelnd effect in javascript gallerie

ich habe hier einie gallerie die funktioniert problem los aber hat noch kein über belnd effect jedoch würde ich diesen gerne einfügen aber ich habe ... » mehr

von faebe am Freitag, 20. Januar 2012 20:19 in JavaScript - noch nicht beantwortet

XML per JavaScript verarbeiten - IE

Hallo! Vielen Dank für das super kommentierte Script-Beispiel zur Weiterverarbeitung von XML-Dateien per JavaScript: ... » mehr

von gn0me am Freitag, 11. März 2011 19:03 in JavaScript - noch nicht beantwortet


¬ Insolvenzrecht