Beispiel zum

  Beispiel: Formular, Erklärung

  JavaScript meets your Form(ular)

• Das JavaScript
• und das Formular

  Aufgaben

  Probleme

Das mit den Formularen habt ihr grandios hinbekommen! Nun wollen wir mit JavaScript versuchen, (d)ein Formular auszuwerten. Das ganze hat sogar einen Vorteil: Dadurch, dass die Auswertung auf dem Client stattfindet, sprich bei dir zu Hause auf dem Computer, muss noch nichts übers Internet geschickt werden, und du kannst sinnlose oder fehlerhafte Eingaben abfangen. (GROßARTIG, nicht wahr . . .). Hier ein Mini- Formular:

JavaScript meets your Form(ular)

value gibt dabei den Wert zurück, also die Eingabe unserer Testperson! Du musst also nur die Namen der einzelnen Elemente in deinem Formular wissen, sowie den Namen deines Formulars, das wars.

Zumindest fast. Frage: Woher weiss das JavaScript, wann es die Eingabe der Testperson prüfen soll? Antwort: überhaupt nicht, du musst es ihm sagen, ja, ja, alles muss man selber machen! Wie früher beim Ereignis "onLoad", so gibt es auch hier ein Ereignis, auf das hin das JavaScript loslegt: wenn der Submit-Button gedrückt wurde. Deshalb schreiben wir brav am Anfang des Formulars

<form name="Beispiel" onsubmit="return bearbeite()" >

<script language="JavaScript">
function ValidLength(item, len) {
var ergebnis=false;
if (item.length >= len)
ergebnis = true;
return (ergebnis);
}
function ValidEmail(item) {
// Eine gültige E-Mail-Adresse hat mehr als 5 Zeichen
if ( !ValidLength(item, 5) ) return false;
// kein @, also auch keine Adresse
if ( item.indexOf ('@', 0) == -1) return false;
return true; // Test bestanden
}
function bearbeite() {
vorname = document.Beispiel.Vorname.value; // Vornamen holen
if (!ValidEmail(document.Beispiel.EMail.value)) {
alert("So ein Unsinn, " + vorname);
return false;
}
else {
confirm("Deine Adresse " + document.Beispiel.EMail.value +
" ist wirklich Klasse, " + vorname);
}
return true;
}// Ende der Funktion
</SCRIPT>

<form name="Beispiel" onsubmit="return bearbeite()">
Dein Vorname
<input type="text" size="20" name="Vorname"><p>
und jetzt noch <br> der Nachname:
<input type="text" size="20" name="Nachname">
<p>
Deine E-Mail-Adresse:
<input type="text" size="30" name="EMail" >
<p>
Schreib mal wieder!<br>
<textarea name="Botschaft" rows="4" cols="25" >
</textarea>
<p>
<input type="SUBMIT" value="?? Abschicken ??">
<input type="RESET" value="Lieber doch nicht . . .">
</form>

• Aufgabe 1:Nimm in dein Formular eine E-Mail-Adresse auf!
• Aufgabe 2:Schreibe eine Funktion bearbeite(), die einfach nur mit alert eine Meldung ausgibt, und binde sie an das Ereignis "submit" via onSubmit (onSubmit="return bearbeite()")
• Aufgabe 3:Versuche, die Adresse zu prüfen, so wie oben und gib eine Meldung aus (Aufgabe 2)!

• Poblem 1:Schreibe eine Funktion schade(), die mit alert eine Meldung ausgibt, wenn der "RESET"-Button gedrückt wurde (onReset="return schade()")
• Poblem 2:Versuche, die Nachricht im mehrzeiligen Feld (textarea Botschaft) in einem eigenen Fenster auszugeben. Zugriff auf das mehrzeilige Feld hast du über document.Beispiel.Botschaft.value. Fenster wurden vor grauer Vorzeit behandelt!