JQuery Kochbuch (German Edition)

abschicken
    Problem
    Sie haben eine form, die Sie gerne mit Ajax abschicken würden:

    
    

    Was ist Ihr Lieblingsessen?
    

    

    Lösung
    Selektieren Sie das

-Element und kapern Sie das Event
submit
:
$('form').submit(function(event){

    // wir wollen die Form per Ajax abschicken
    // und ein Aktualisieren der Seite verhindern)
    event.preventDefault();

    // Überprüfen der Daten (wenn nötig)
    // ...

    // Hinweis an den Server, dass Ajax genutzt wurde
    $('input[name="usingAJAX"]',this).val( 'true' );

    // Referenz auf die Form speichern
    var $this = $(this);

    // URL aus dem form-Element holen
    var url = $this.attr('action');

    // Formdaten aufbereiten
    var dataToSend = $this.serialize();

    // Callback-Funktion für die Server-Antwort
    var callback = function(dataReceived){

     // Verbergen der Form (zum Glück haben wir eine Referenz gesichert)
     $this.hide();

     // hier hat der Server einen HTML-Schnipsel zurückgegeben,
     // den wir in das DOM einfügen
     //

Ihr Lieblingsessen ist Pizza! Vielen Dank für
     // die Teilnahme!

     $('body').append(dataReceived)
    };

    // Typ der empfangenen Daten (wir erwarten HTML)
    var typeOfDataToReceive = 'html';

    // Form abschicken und auf das Ergebnis warten
    $.get( url, dataToSend, callback, typeOfDataToReceive )

}); // Ende von .submit()
    Diskussion
    Was geschieht, wenn JavaScript abgeschaltet ist? Die Form wird abgeschickt und die gesamte Seite mit dem Ergebnis des Server-Skripts aktualisiert. Ich nutze JavaScript, um den Wert des Elements

von
false
auf
true
zu ändern. Damit kann das Skript auf Serverseite darüber informiert werden, wie die Antwort auszusehen hat – entweder eine vollständige HTML-Seite oder nur die Daten, die für die Ajax-Antwort erwartet werden.

Forms überprüfen
    Problem
    Sie haben eine Form, deren Daten Sie gerne überprüfen würden. Dazu richten Sie auch ein paar einfache CSS-Regeln ein. Für dieses Rezept sind eigentlich nur die Deklaration
display:none
desSelektors
div.errorMessage
und die Deklaration
display:block
desSelektors
div.showErrorMessage
von Interesse.Der Rest sorgt nur dafür, dass alles etwas hübscher aussieht:

    Der folgende HTML-Ausschnitt ist ein Beispiel für das Strukturieren der form. Das Element

dient nur Layout-Zwecken und ist für den Validierungs-Code unwichtigt. Jedes
for
-Attribut eines

-Elements verbindet dieses mit dem Form-Element mit der entsprechenden
id
. Das ist Standard-HTML, aber ich wollte darauf explizit hinweisen, da der JavaScript-Code diese Verbindung (allerdings in umgekehrte Richtung) nutzen wird, um das passende

für ein Form-Element zu finden. Auch die Fehlermeldungen haben ein
id
-Attribut in der Form
errorMessage_
plus
name
des zugehörigen Form-Elements. Diese Struktur mag redundant erscheinen, aber Radio-Buttons und Checkboxen werden mit Hilfe des Attributs
name
gruppiert und Sie wollen nicht nur eine Fehlermeldung pro Gruppe haben:

    Benutzername
    
    

Bitte den Benutzernamen
     eingeben.

    Passwort
    
    

Bitte das Passwort eingeben.

    Lieblingsfarbe
    
     Wählen Sie eine Farbe aus
     Rot
     Grün
     Blau
    
    

Bitte wählen Sie Ihre
Lieblingsfarbe aus.