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>
Eingabefeld
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