JavaScript onChange Event

OnChange ist eines der in JavaScript nutzbaren Benutzerereignisse (Events). Das JavaScript onChange-Event kann bei HTML-Eingabeelementen innerhalb von Formularen genutzt werden, um auf Benutzereingaben zu reagieren. Neben einfachen Textfeldern wird dieses Event auch von Eingabefeldern vom Typ Checkbox, Radio-Button oder Textarea unterstützt.

Immer wenn der Benutzer die Eingabe in einem der unterstützten Eingabeelemente ändert – sei es durch Ändern des in einem Text-Input-Feld gespeicherten Textes oder durch Anklicken einer Checkbox oder eines Radio-Buttons und einer damit verbundenen Statusänderung – ändert, wird das onChange-Event des Eingabeelements ausgelöst. Ist für diesen Fall, entweder auf globaler Ebene oder aber auf Ebene eines speziellen Eingabeelements, ein Event-Handler – ein Event-Handler ist eine Funktion, der in Form von JavaScript Code formuliert ist – zugewiesen, so wird dieser automatisch aufgerufen. Der Event-Handler übernimmt dann die Reaktion auf das aufgeretene Event und erledigt die nötigen Operationen.

Wie auf ein onChange-Event reagiert wird hängt vom Anwendungsfall ab. So kann beispielswiese eine Prüfung der Eingabedaten erfolgen oder spezielle Hinweise zur getätigten Eingabe angezeigt werden. Weitere Ereignisse und deren Nutzung werden unter onClick-Event und onLoad-Event beschrieben.

JavaScript onChange Beispiel 1: Angaben in HTML onChange

Im unteren Beispiel wird die Nutzung des Events onChange anhand eines einfachen Beispiels demonstriert. Der HTML-Code des Beispiels definiert ein JavaScript Formular, in dem einige Checkboxen definiert werden, die als Eingabeelemente dienen sollen. Mit der HTML onChange-Eigenschaft der Eingabeelemente wird im Beispiel ein Event-Handler verbunden. Dieser Event-Handler – repräsentiert durch die Function meldung – erhält als Parameter einen Verweis auf das Input-Feld, bei dem das onChange-Event aufgereten ist.

Die Funktion meldung erhält als Parameter eine Verweis auf das Eingabeelement, auf dem das onChange-Event aufgetreten ist (this). In der Variable out wird die am Ende der Funktion auszugebende Meldung in Form eines Strings gespeichert. Diese Variable wird mit einer Fehlermeldung initialisiert, die ausgeben wird, wenn das angegebene Element nicht zu der Gruppe von Checkboxen gehört.

Über die If-Abfrage wird nun getestet, ob das als Parameter angegebene HTML-Elementobjekt zur Checkbox-Gruppe gehört. Ist dem so, so wird mit einem Switch-Statement werden die dem jeweiligen Status zugehörigen Meldungen unterschieden. Am Ende der Funktion wird die Ausgabe der Meldung mittels einer Alert-Box eingeleitet. Die Alert-Box ist eine der in JavaScript über das Window-Object ansprechbaren Dialogboxen.

<form name="formular">
  Nutzung des Computers:<br>
  <input type="checkbox" name="nutzungsart" onchange="meldung(this)" value="arbeiten"> Arbeit<br>
  <input type="checkbox" name="nutzungsart" onchange="meldung(this)" value="multimedia"> Audio / Video<br>
  <input type="checkbox" name="nutzungsart" onchange="meldung(this)" value="spielen"> Spielen<br>
  <script language="javascript" type="text/javascript">
  <!-- // JavaScript-Bereich für ältere Browser auskommentieren
  // Funktion gibt in Abhängigkeit des übergebenen Checkbox-Elements und dessen Status (checked)
  // eine entsprechende Meldung in einer Alert-Box aus
  function meldung (element) {
    // Variable zur Speicherung der Ausgabemeldung
    // Wird mit einer Fehlermeldung initialisiert, die ausgegeben wird, wenn
    // ein falscher Parameter angegeben wird.
    var out = 'Fehler: Unbekanntes oder ung\u00fcltiges Element angegeben!';

    // Ist das Element eine Checkbox und trägt sie den Namen Nutzungsart?
    if (element.type == 'checkbox' && element.name == 'nutzungsart') {
      // Wert (Value-Eigenschaft) des Elements zur Unterscheidung der Ausgabe ermitteln
      var nutzungsart = element.value;
      // Ist das Checkbox-Feld angekreuzt?
      if (element.checked)
        // Hier folgen die feldbezogenen Ausgaben, die nach den Feld-Values aufgeschlüsselt sind.
        switch (nutzungsart) {
          case 'arbeiten': out = 'Wenn Sie arbeiten, dann kommen Computerspiele f\u00fcr Sie sicher nicht in Frage!';
            break;
          case 'multimedia': out = 'Ahhhh! Ein Geniesser, der vor der Glotze gammelt!';
            break;
          case 'spielen': out = 'Tze, tze, tze... Stundenlang vor der Kiste sitzen und daddeln!';
            break;
        }
      // Checkbox-Element ist nicht angekreuzt!
      else
        // Ausgaben, die bei Checkboxen mit Status unchecked erfolgen sollen
        switch (nutzungsart) {
          case 'arbeiten': out = 'Aber dem Finanzamt haben Sie doch erz\u00e4hlt, dass Sie ihn zum Arbeiten brauchen!';
            break;
          case 'multimedia': out = 'Recht so! Die Welt ist schon laut genug!';
            break;
          case 'spielen': out = 'Ein gutes Vorbild! Computerspiele verderben den Charakter!';
            break;
        }
    }
    // Ausgabe einer entsprechenden Meldung per Alert-Box
    alert (out);
  }
  // -->
  </script>
</form>
Nutzung des Computers:
Arbeit
Audio / Video
Spielen

JavaScript onChange Beispiel 2: Mit onChange auf Benutzereingaben reagieren

Das zweite Beispiel zeigt eine weitere Möglichkeit der Verwendung des onChange-Events. Hier soll auf die Benutzereingabe reagiert werden, indem Eingabefelder bei bestimmten Konstellationen bei der Auswahl von Checkbox-Elementen aktiviert oder eben deaktiviert werden. Wird eine der Checkboxen aktiviert, so führt dies dazu, dass die der Checkbox zugehörige Gruppe von Radio-Buttons für Eingaben freigeschaltet (enabled) wird. Ist eine Checkbox nicht angekreuzt, so werden auch die entsprechenden Radio-Buttons deaktiviert (disabled).

Auch hier ruft ein aufgetretenes onChange-Event eine Event-Handler-Funktion namens toggle_activation auf. Die Funtion toggle_activation wird, genau wie im letzten Beispiel mit einem Parameter aufgerufen, der das HTML-Element enthält, auf dem das Event aufgetreten ist. Mit dem ersten If-Statement wird der Parameter auf Gültigkeit geprüft – es muss sich um eine Checkbox handeln.

Die Zuordnung der Checkboxen zu den entsprechenden Radio-Buttons wird über die Value-Eigenschaft der Checkboxen hergestellt. Mit der getElementsByName-Methode des Document-Object werden alle Elemente im HTML-Dokument ermittelt, die den in der Checkbox-Eigenschaft Value gespeicherten Namen tragen. Existieren solche Elemente, so werden diese zunächst einmal in der Variable group zwischengespeichert. Durch getElementsByName werden die gefundenen HTML-Elemente in einem Array-Object zurückgegeben.

Über dieses Array muss nun iteriert werden, um herauszufinden, ob die gefundenen Elemente Radio-Buttons (Type = radio) sind. Hierzu wird das For-Statement verwendet. Je nach Status des Checkbox-Elements (checked oder unchecked) wird nun der jeweilige Radio-Button aktiviert oder deaktiviert (Eigenschaft disabled = true bzw. false). Aktiviert werden die Radio-Button Elemente (disabled wird auf false gesetzt), wenn die Checkbox auf checked = true steht.

<form name="formular2">
  Prim&auml;re Nutzung des Computers:<br>
  <input type="checkbox" name="nutzungsart" onchange="toggle_activation (this)" value="anwendung"> Arbeit<br>
  <input type="checkbox" name="nutzungsart" onchange="toggle_activation (this)" value="multimedia"> Audio / Video<br>
  <input type="checkbox" name="nutzungsart" onchange="toggle_activation (this)" value="spielen"> Spielen<br>
  Art der Anwendung:<br>
  <input type="radio" name="anwendung" value="txt" disabled> Textverarbeitung<br>
  <input type="radio" name="anwendung" value="pic" disabled> Bildbearbeitung<br>
  <input type="radio" name="anwendung" value="dev" disabled> Programmierung<br>
  Lieblingsfilm:<br>
  <input type="radio" name="multimedia" value="dv" disabled> Die &uuml;blichen Verd&auml;chtigen<br>
  <input type="radio" name="multimedia" value="sl" disabled> Das Schweigen der L&auml;mmer<br>
  <input type="radio" name="multimedia" value="db" disabled> Donnie Brasco<br>
  Bevorzugte Spielekategorie:<br>
  <input type="radio" name="spielen" value="ego" disabled> Ego-Shooter<br>
  <input type="radio" name="spielen" value="stategie" disabled> Strategie<br>
  <input type="radio" name="spielen" value="jnr" disabled> Jump and Run<br>
  <script language="javascript" type="text/javascript">
  <!-- // JavaScript-Bereich für ältere Browser auskommentieren
  // Folgende Funktion aktiviert oder dektiviert eine Gruppe von Radio-Buttons,
  // die als Detaileingabe zu einem Checkbox-Element gehören.
  function toggle_activation (element) {
    // Ist das angegebene Element eines vom Typ checkbox?
    if (element.type == 'checkbox') {
      // Name der Radio-Button-Gruppe, die aktiviert bzw.
      // deaktiviert werden soll ist in der Value-Eigenschaft
      // der angegebenen Checkbox gespeichert.
      var groupname = element.value;

      // Existieren HTML-Elementobjekte, die den in der Checkbox
      // gespeicherten Namen in der Name-Eigenschaft tragen.
      if (document.getElementsByName (groupname)) {
        // Array mit den Elementobjekten zwischenspeichern
        var group = document.getElementsByName (groupname);

        // Jedes der ermittelten Element einzeln durchgehen
        for (var i = 0; i < group.length; i++)
          // Handelt es sich bei dem Element um einen
          // Radio-button?
          if (group[i].type == 'radio')
            // Radio-Button aktivieren, wenn das
            // Checkbox-Element angekreuzt ist bzw,
            // deaktivieren, wenn dem nicht so ist.
            group[i].disabled = !element.checked;
      }
    }
  }
  // -->
  </script>
</form>
Primäre Nutzung des Computers:
Arbeit
Audio / Video
Spielen
Art der Anwendung:
Textverarbeitung
Bildbearbeitung
Programmierung
Lieblingsfilm:
Die üblichen Verdächtigen
Das Schweigen der Lämmer
Donnie Brasco
Bevorzugte Spielekategorie:
Ego-Shooter
Strategie
Jump and Run


¬ Insolvenzrecht