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:

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

Seiten Revision: 2, zuletzt bearbeitet: 03 Jun 2009 20:39