WebApps mit Frameworks entwickeln - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 323

die Sie in Form der Datei kontakt-erfolgreich.html gestalten. Zunächst benötigen Sie
eine Funktion, die ausgeführt wird, wenn der Benutzer auf Abschicken drückt.

$("form#kontaktformular").submit(function() {
});

Eine Formvalidierung ist in jQuery Mobile ebenfalls bereits enthalten. Sie haben viel-
leicht bemerkt, dass das Input-Feld für »E-Mail« das Attribut type mit dem Wert email
enthält. Damit wird automatisch dessen Inhalt auf eine valide E-Mail-Adresse hin
überprüft. Aber zurück zur Funktion. Wenn also Ihr Benutzer das Formular abschickt,
dann speichern Sie die Inhalte der einzelnen Felder in ähnlich benannten Variablen.
Über .attr('value'); lesen Sie den jeweiligen Wert des Attributs value aus:

8

$("form#kontaktformular").submit(function() {
var name = $('#name').attr('value');
var email = $('#email').attr('value');
var telefon = $('#telefon').attr('value');
var artanfrage = $('#artanfrage').attr('value');
var anfrage = $('#anfrage').attr('value');
});

Listing 8.19 Das Auslesen der eingetragen Werte und die Speicherung derer in Variablen

Nachdem Sie nun die Werte in Variablen gespeichert haben, versenden Sie die Daten
mit der jQuery-Funktion .ajax an das PHP-Script:

$.ajax({
type: "get",
url: "formularmailer.php",
data: "name="+ name +"&email="+ email+"&telefon="+ telefon+"&artanfrage="+
artanfrage+"&anfrage="+ anfrage,
success: function(){
$.mobile.changePage("kontakt-erfolgreich.html", { transition: "flip"} );
}
});
return false;

Listing 8.20 Das Versenden der Daten an die PHP-Datei via AJAX

Sie senden die Daten mithilfe des Typs get an das PHP-Script namens formular-
mailer.php . Der Parameter data beinhaltet dabei die Daten mitsamt der Variablen-
bezeichnung. Im Endeffekt erzeugt der AJAX-Versand den URL-Aufruf formular-
mailer.php?name=IhrName&email=IhreEmail&telefon=IhreTelefonnumer&artanfrage=
ArtderAnfrage&anfrage=IhreAnfrage . Die Variablen werden dabei mit einem & -Zei-