Verwenden von JavaScript und Formularen

Javascript trägt viele Hüte. Sie können JavaScript verwenden, um Spezialeffekte zu erstellen. Sie können JavaScript verwenden, um Ihre HTML-Seiten "intelligenter" zu gestalten, indem Sie die Entscheidungsmöglichkeiten nutzen. Und Sie können JavaScript verwenden, um HTML-Formulare zu verbessern. Diese letzte Anwendung ist von besonderer Bedeutung. Von allen Hüten, die JavaScript tragen kann, gehören die Funktionen zur Formularverarbeitung zu den gefragtesten und am häufigsten verwendeten.

Nichts macht einem Web-Publisher mehr Angst als diese drei Buchstaben: CGI. CGI (steht für Common Gateway Interface) ist ein Mechanismus zum sicheren Transportieren von Daten von einem Client (einem Browser) zu einem Server. Es wird normalerweise verwendet, um Daten von einem HTML-Formular auf den Server zu übertragen.

Mit JavaScript an Ihrer Seite können Sie einfache Formulare verarbeiten, ohne den Server aufzurufen. Wenn das Senden des Formulars an ein CGI-Programm erforderlich ist, kann JavaScript alle vorläufigen Anforderungen erfüllen, z. B. die Überprüfung der Eingabe, um sicherzustellen, dass der Benutzer jedes i gepunktet hat. In dieser Spalte werden wir uns die JavaScript-Formularverbindung genauer ansehen, einschließlich der Verwendung des JavaScript-Formularobjekts, des Lesens und Festlegens von Formularinhalten und des Auslösens von JavaScript-Ereignissen durch Manipulieren von Formularsteuerelementen. Wir werden auch erläutern, wie Sie mit JavaScript die Formulareingabe überprüfen und das Formular an ein CGI-Programm senden.

JavaScript lernen

Dieser Artikel ist Teil des JavaWorld-Archivs für technische Inhalte. Sie können viel über die JavaScript-Programmierung lernen, indem Sie Artikel in der JavaScript-Reihe lesen. Beachten Sie jedoch, dass einige der Informationen wahrscheinlich veraltet sind. Weitere Informationen zum Programmieren mit JavaScript finden Sie unter "Verwenden der in JavaScript integrierten Objekte" und "Debuggen von JavaScript-Programmen".

Formular erstellen

Es gibt nur wenige Unterschiede zwischen einem reinen HTML-Formular und einem mit JavaScript erweiterten Formular. Das wichtigste ist, dass ein JavaScript-Formular auf einem oder mehreren Ereignishandlern wie onClick oder onSubmit basiert. Diese rufen eine JavaScript-Aktion auf, wenn der Benutzer etwas im Formular ausführt, z. B. das Klicken auf eine Schaltfläche. Die Ereignishandler, die zusammen mit den übrigen Attributen in den HTML-Formular-Tags platziert werden, sind für einen Browser, der kein JavaScript unterstützt, unsichtbar. Aufgrund dieser Eigenschaft können Sie häufig ein Formular sowohl für JavaScript- als auch für Nicht-JavaScript-Browser verwenden.

Typische Formularsteuerungsobjekte - auch "Widgets" genannt - umfassen Folgendes:

  • Textfeld zur Eingabe einer Textzeile
  • Druckknopf zur Auswahl einer Aktion
  • Optionsfelder zum Treffen einer Auswahl aus einer Gruppe von Optionen
  • Kontrollkästchen zum Aktivieren oder Deaktivieren einer einzelnen unabhängigen Option

Ich werde nicht alle Attribute dieser Steuerelemente (Widgets) auflisten und wie man sie in HTML verwendet. Die meisten HTML-Verweise liefern Ihnen die Details. Bei der Verwendung mit JavaScript sollten Sie immer daran denken, einen Namen für das Formular selbst und jedes von Ihnen verwendete Steuerelement anzugeben. Mit den Namen können Sie auf das Objekt auf Ihrer JavaScript-erweiterten Seite verweisen.

Die typische Form sieht so aus. Beachten Sie, dass ich NAME = -Attribute für alle Formularsteuerelemente angegeben habe, einschließlich des Formulars selbst:

 Enter something in the box:

  • FORM NAME = "myform" definiert und benennt das Formular. An anderer Stelle im JavaScript können Sie auf dieses Formular mit dem Namen myform verweisen . Der Name, den Sie Ihrem Formular geben, liegt bei Ihnen, sollte jedoch den Standardregeln für die Benennung von Variablen / Funktionen in JavaScript entsprechen (keine Leerzeichen, keine seltsamen Zeichen außer dem Unterstrich usw.).
  • ACTION = "" definiert, wie der Browser das Formular verarbeiten soll, wenn es an ein CGI-Programm gesendet wird, das auf dem Server ausgeführt wird. Da in diesem Beispiel nichts gesendet werden soll, wird die URL für das CGI-Programm weggelassen.
  • METHOD = "GET" definiert die Methodendaten, die beim Senden des Formulars an den Server übergeben werden. In diesem Fall ist der Atttibute Puffer, da das Beispielformular nichts übermittelt.
  • INPUT TYPE = "text" definiert das Textfeldobjekt. Dies ist ein Standard-HTML-Markup.
  • INPUT TYPE = "button" definiert das Schaltflächenobjekt. Dies ist ein Standard-HTML-Markup mit Ausnahme des onClick-Handlers.
  • onClick = "testResults (this.form)" ist ein Ereignishandler - er behandelt ein Ereignis und klickt in diesem Fall auf die Schaltfläche. Wenn Sie auf die Schaltfläche klicken, führt JavaScript den Ausdruck in Anführungszeichen aus. Der Ausdruck sagt, dass die testResults-Funktion an anderer Stelle auf der Seite aufgerufen und das aktuelle Formularobjekt an sie übergeben werden soll.

Abrufen eines Werts von einem Formularobjekt

Experimentieren wir mit dem Abrufen von Werten aus Formularobjekten. Laden Sie die Seite und geben Sie etwas in das Textfeld ein. Klicken Sie auf die Schaltfläche, und was Sie eingegeben haben, wird im Warnfeld angezeigt.

Listing 1. testform.html

  Test Input  function testResults (form) { var TestVar = form.inputbox.value; alert ("You typed: " + TestVar); }    Enter something in the box:

So funktioniert das Skript. JavaScript ruft die Funktion testResults auf, wenn Sie auf die Schaltfläche im Formular klicken. Die Funktion testResults wird dem Formularobjekt mit der Syntax this.form übergeben (das Schlüsselwort this verweist auf das Schaltflächensteuerelement; form ist eine Eigenschaft des Schaltflächensteuerelements und repräsentiert das Formularobjekt). Ich habe dem Formularobjekt den Namen form innerhalb der testResult-Funktion gegeben, aber Sie können einen beliebigen Namen verwenden.

Die Funktion testResults ist einfach: Sie kopiert lediglich den Inhalt des Textfelds in eine Variable namens TestVar. Beachten Sie, wie auf den Inhalt des Textfelds verwiesen wurde. I definierte das Formular Objekt I (genannt verwenden wollte Form ), das Objekt innerhalb der Form , dass ich ( so genannten wollte inputbox ) und die Eigenschaft des Objekts I (das wollte Wert Eigenschaft).

Mehr von JavaWorld

Wünschen Sie weitere Programmier-Tutorials und Neuigkeiten? Holen Sie sich den JavaWorld Enterprise Java-Newsletter in Ihren Posteingang.

Festlegen eines Werts in einem Formularobjekt

Die im obigen Beispiel gezeigte value-Eigenschaft des Eingabefelds ist sowohl lesbar als auch beschreibbar. Das heißt, Sie können alles lesen, was in das Feld eingegeben wurde, und Sie können Daten zurück in das Feld schreiben. Das Festlegen des Werts in einem Formularobjekt erfolgt in umgekehrter Reihenfolge wie das Lesen. Hier ist ein kurzes Beispiel, um das Festlegen eines Werts in einem Formulartextfeld zu demonstrieren. Der Vorgang ähnelt dem vorherigen Beispiel, außer dass diesmal zwei Schaltflächen vorhanden sind. Klicken Sie auf die Schaltfläche "Lesen" und das Skript liest, was Sie in das Textfeld eingegeben haben. Klicken Sie auf die Schaltfläche "Schreiben" und das Skript schreibt eine besonders grelle Phrase in das Textfeld.

Listing 2. set_formval.html

Test Input function readText (form) { TestVar =form.inputbox.value; alert ("You typed: " + TestVar); }

function writeText (form) { form.inputbox.value = "Have a nice day!" } Enter something in the box:

  • Wenn Sie auf die Schaltfläche "Lesen" klicken, ruft JavaScript die Funktion readText auf, die den in das Textfeld eingegebenen Wert liest und anzeigt.
  • Wenn Sie auf die Schaltfläche "Schreiben" klicken, ruft JavaScript die Funktion writeText auf, die schreibt: "Einen schönen Tag noch!" im Textfeld.

Lesen anderer Formularobjektwerte

Das Textfeld ist möglicherweise das häufigste Formularobjekt, das Sie mit JavaScript lesen (oder schreiben). Sie können jedoch JavaScript verwenden, um Werte von den meisten anderen Objekten zu lesen und zu schreiben (beachten Sie, dass JavaScript derzeit nicht zum Lesen oder Schreiben von Daten mithilfe des Kennworttextfelds verwendet werden kann). Zusätzlich zu Textfeldern kann JavaScript verwendet werden mit:

  • Verstecktes Textfeld (TYPE = "versteckt").
  • Optionsfeld (TYPE = "Radio")
  • Kontrollkästchen (TYPE = "Kontrollkästchen")
  • Textbereich ()
  • Listen ()

Versteckte Textfelder verwenden

From a JavaScript standpoint, hidden text boxes behave just like regular text boxes, sharing the same properties and methods. From a user standpoint, hidden text boxes "don't exist" because they do not appear in the form. Rather, hidden text boxes are the means by which special information can be passed between server and client. They can also be used to hold temporary data that you might want to use later. Because hidden text boxes are used like standard text boxes a separate example won't be provided here.

Using Radio Buttons

Radio buttons are used to allow the user to select one, and only one, item from a group of options. Radio buttons are always used in multiples; there is no logical sense in having just one radio button on a form, because once you click on it, you can't unclick it. If you want a simple click/unclick choice use a check box instead (see below).

To define radio buttons for JavaScript, provide each object with the same name. JavaScript will create an array using the name you've provided; you then reference the buttons using the array indexes. The first button in the series is numbered 0, the second is numbered 1, and so forth. Note that the VALUE attribute is optional for JavaScript-only forms. You'll want to provide a value if you submit the form to a CGI program running on the server, however.

Following is an example of testing which button is selected. The for loop in the testButton function cycles through all of the buttons in the "rad" group. When it finds the button that's selected, it breaks out of the loop and displays the button number (remember: starting from 0).

LIsting 3. form_radio.html

  Radio Button Test  function testButton (form){ for (Count = 0; Count < 3; Count++) { if (form.rad[Count].checked) break; } alert ("Button " + Count + " is selected"); }

Setting a radio button selection with HTML market is simple. If you want the form to initially appear with a given radio button selected, add the CHECKED attribute to the HTML markup for that button:

You can also set the button selection programmatically with JavaScript, using the checked property. Specify the index of the radio button array you want to checked.

form.rad[0].checked = true; // sets to first button in the rad group

Using Check Boxes

Check boxes are stand-alone elements; that is, they don't interact with neighboring elements like radio buttons do. Therefore they are a bit easier to use. Using JavaScript you can test if a check box is checked using the checked property, as shown here. Likewise, you can set the checked property to add or remove the checkmark from a check box. In this example an alert message tells you if the first check box is checked. The value is true if the box is checked; false if it is not.

Listing 4. form_check.html

  Checkbox Test  function testButton (form){ alert (form.check1.checked); }

Checkbox 1

Checkbox 2

Checkbox 3

As with the radio button object, add a CHECKED attribute to the HTML markup for that check box you wish to be initially check when the form is first loaded.

Checkbox 1>

You can also set the button selection programmatically with JavaScript, using the checked property. Specify the name of the checkbox you want to check, as in

form.check1.checked = true;

Using Text Areas

Textbereiche werden für die mehrzeilige Texteingabe verwendet. Die Standardgröße des Textfelds beträgt 1 Zeile x 20 Zeichen. Sie können die Größe mithilfe der Attribute COLS und ROWS ändern. Hier ist ein typisches Beispiel für einen Textbereich mit einem Textfeld, das 40 Zeichen breit und 7 Zeilen breit ist:

Sie können JavaScript verwenden, um den Inhalt des Textbereichs zu lesen. Dies erfolgt mit der value-Eigenschaft. Hier ist ein Beispiel: