JavaScript Form Beispiel 2: Zugriff auf ein Input Field (Text / Value)

Textfelder dienen in HTML-Formularen der Eingabe von Daten, die nicht durch eine vorgegebene Menge an möglichen Werten realisiert werden können. Zu diesem Zweck gibt es in HTML-Formularen Eingabefelder (input field; in HTML definiert durch das Tag INPUT), die der Eingabe derartiger Daten dienen. Textfelder haben den Eingabetyp text. Bei der Definition eines solchen Eingabefeldes wird der Typ mittels INPUT-Attribut type gesteuert.

Dabei ist es unerheblich, ob das so definierte Eingabeelement zur Eingabe von Text (Zeichenketten) oder zur Eingabe von Zahlenwerten genutzt wird. Beides wird mit einem normalen Textfeld realisiert. Soll in einem Eingabefeld ein Zahlenwert eingegeben werden, so muss der in Textform gespeicherte Eingabewert (Eigenschaft value) des Textfeldes in einen Zahlenwert umgewandelt werden bevor Berechnungen mit dem eingegebenen Wert möglich sind.

Im folgenden Script-Code wird zunächst ein Formular definiert. In dieses Formular wird ein Textfeld (input mit type text) und ein Button eingefügt. Der Button wird verwendet, um die weiter unten im Code definierte JavaScript Function mit dem Namen getValue aufzurufen, wenn der Benutzer diesen Button mit der Maus anklickt. Realisiert wird dies, indem das onClick-Event mit einem Event-Handler – hier die Funktion getValue – verknüpft wird. Nähere Informationen zu Event-Handlern und Beispiele zu deren Nutzung finden Sie unter Events.

Auf die Definition der Eingabeelemente im Formular folgt der JavaScript-Code, in dem die Funktion getValue implementiert wird. Aufgabe dieser Funktion ist es, die eingegebenen Daten zu analysieren und Informationen über diese in einem Alert-Dialog auszugeben. Die Methode Alert ist Teil der Schnittstelle des vordefinierten JavaScript-Objekts Window. Mit der ersten Code-Zeile in der Funktion wird der im Textfeld eingegebene Wert in der Variablen mit dem Namen eingabe zwischengespeichert. Dagegen dient die Variable ausgabe der Speicherung der bei der Analyse der Eingabedaten anfallenden Textinformationen, die zunächst gesammelt um am Ende der Funktion mit alert() ausgegeben werden.

Mit Hilfe der If-Anweisungen wird durch die Funktion geprüft, welcher Art die eingegebenen Daten sind. Die Length-Eigenschaft des Eingabestrings wird genutzt, um herauszufinden ob das Eingabefeld leer ist. Ist dies der Fall, so wird die auszugebene Meldung durch einen entsprechenden Hinweis belegt und dann mit alert() ausgegeben.

Wenn das Eingabefeld belegt ist, wird darüber hinaus geprüft, ob es sich bei der Eingabe um eine Zeichenkette handelt oder um eine Zahl (unterschieden in ganze Zahl oder Gleitkommazahl). Handelt es sich bei dem eingegebenen Wert um eine Gleitkommazahl, so muss sich neben Ziffern ein Dezimalpunkt im Eingabestring befinden. Ob dies der Fall ist, wird mit der String-Methode match, die zur Prüfung von Zeichenketten mit regulären Ausdrücken verwendet wird, überprüft. Wurde eine ganze Zahl eingegeben, so darf die Eingabe nur die Ziffern 0 bis 9 enthalten. Enthält das Eingabestring weder eine Zahl, noch einen Gleitkommawert, so wurde eine Zeichenkette eingegeben.

<form name="formular1" method="get">
  Eingabefeld <input id="tname" name="Textfeld" type="text" />
  <input type="button" onclick="getValue()" value="Feld auslesen" />
  <script language="javascript" type="text/javascript">
  <!-- // JavaScript-Bereich für ältere Browser auskommentieren
  // Daten aus dem Eingabefeld auslesen und prüfen, ob diese
  // eine Zeichenkette, eine ganze zahl oder einen Gleitkommawert
  // enthält.
  function getValue () {
    // Inhalt des Eingabefeldes in Variable speichern
    var eingabe = document.formular1.Textfeld.value;
    // Variable zur Speicherung der Textes für die
    // Alert-Box
    var ausgabe = '';

    // Ist das Eingabefeld leer?
    if (eingabe.length == 0)
      // Ausgabe für leeres Feld
      ausgabe = 'Sie haben noch nichts eingegeben!';
    else {
      // Ausgabe für belegtes Feld
      ausgabe = 'Sie haben folgendes Eingegeben:\n' +
          document.formular1.Textfeld.value;
      // Wurde eine Gleitkommazahl, ...
      if (eingabe.match (/^[0-9]*[.][0-9]+$/) ¦¦
          eingabe.match (/^[0-9]+[.][0-9]*$/))
        ausgabe += '\nSie haben einen Gleitkommawert eingeben!';
      // eine ganze Zahl, ...
      else if (eingabe.match (/^[0-9]+$/))
        ausgabe += '\nSie haben eine ganze Zahl eingegeben!';
      else
      // oder einfach eine Zeichenkette eingegeben?
        ausgabe += '\nSie haben ein String eingegeben!';
    }
    // Ausgabe der gesammelten Informationen in einem Alert-Dialog
    alert (ausgabe);
  }
  // -->
  </script>
</form>

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