3.1 HTML-Formular (Beispiel: Formularüberprüfung)

Nehmen wir an, in einem von uns selbst entwickelten Content Management System (CMS) können Anwender Seiten-Templates anlegen und verwalten. Jedes Template erhält einen Namen, unter dem es auflistbar ist -– beispielsweise beim Erstellen von Webseiten. Der Template-Name muss deshalb eindeutig sein. Im HTML-Formular unseres CMS, das zum Eingeben neuer Templates angezeigt wird, notieren wir neben dem Eingabefeld für den Template-Namen eine Schaltfläche mit der Beschriftung Prüfen:

<div><input type="text" name="template_name" id="template_name" 
       class="text" style="width:390px" accesskey="n"> 
<input type="button" name="check_name" 
       class="button" style="width: 96px" value="Prüfen" 
       onclick="ajaxCheckDBValue('templates', 'name', 'string', 
                document.getElementById('template_name').value, 
                'check_result', 0)"></div>
<div id="check_result"></div>

Den Rest des gedachten HTML-Formulars sparen wir uns, da er nichts zur Sache beiträgt. Das erste input-Element definiert ein einzeiliges Eingabefeld, das unter anderem ein id-Attribut mit dem Wert template_name erhält. Das zweite input-Element definiert die Schaltfläche mit value="Prüfen" (Beschriftungstext). Damit die Schaltfläche beim Anklicken etwas tut, erhält das Element einen Event-Handler onclick=. Der JavaScript-Code, der diesem Event-Handler zugewiesen wird, ist der Aufruf einer JavaScript-Funktion namens ajaxCheckDBValue(). Dieser Funktion werden folgende Parameter übergeben:

• 'templates' ist der Name einer Datenbanktabelle, in der die Namen von Templates gespeichert werden.
• 'name' ist der Name der Tabellenspalte, in der die Namen von Templates gespeichert werden.
• 'string' markiert die Art, wie die Daten in MySQL zu behandeln sind. Als mögliche Angaben benötigt dieser Parameter nur die möglichen Werte 'string' und 'num'.

document.getElementById('template_name').value referenziert den aktuellen Eingabewert des ersten input-Elements.

• 'check_result' referenziert das div-Element, das unterhalb der beiden input-Elemente notiert ist. Dort soll das Ergebnis der Prüfung ausgegeben werden.
• bedeutet: es soll kein Datensatz von der Gegenprüfung ausgeschlossen werden. Was dieser Wert genau bedeutet, werden wir noch genauer beschreiben.

2.2 Eigenschaften und Methoden des XMLHTTPRequest-Objekts < | > 3.2 JavaScript zur Steuerung (Formularüberprüfung)