Ajaxifizierte Formulare mit jQuery

Mit Hilfe des jQuery Frameworks ist es einfach aus einem normalen Formular, ein hübsches Ajax Formular zu machen. Zunächst benötigt man dafür jQuery. Das bekommt man hier.

Wir erstellen zunächst eine php Website und nennen sie formular.php . Das Grundgerüst sieht wie folgt aus:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Formular</title>
</head>
<body>
<!-- Hier kommt unser Inhalt rein -->
</body>
</html>

Das Einbinden von jQuery erfolgt unter dem HTML title Tag. (Bitte auf den Namen der Datei achten und darauf, dass sie im gleichen Ordner gespeichert wird.)

<script type="text/javascript" src="jquery.js"></script>

Als nächstes erzeugen wir uns ein ganz normales Forumlar, welches wir in den Body Tag der formular.php setzten. Ich habe mich mal für die drei Felder „Name“, „Email“ und „Nachricht“ entschieden.

<form id="jQForm" action="formular.php" method="post">
<label>Name:</label><br /><input type="text" name="Name" id="Name" value="" /><br />
<label>Email:</label><br /><input type="text" name="Email" id="Email" value="" /><br />
<label>Nachricht:</label><br /><textarea name="Nachricht" id="Nachricht" rows="4" cols="20"></textarea><br />
<input id="submit" type="submit" class="button" name="submit" />
</form>

Wichtig ist, dass im action Attribut des form Tags als Ziel unsere formular.php Datei angegeben ist. Dadurch werden die über post übergebenen Daten in dieser Datei verarbeitet.

Im nächsten Schritt schreiben wir uns ein kleines JavaScript, welches die post Daten abfragt und verarbeitet.  Unter dem eingebunden jQuery Framerwork schreiben wir nun.

<script type="text/javascript">

Zunächst verwenden wir die Document Ready Funktion von jQuery. Diese sorgt dafür, dass das Script verfügbar ist, sobald die Seite geladen hat.

$(document).ready(function(){
//hier ist Platz für das Script
});

Loslegen soll unser kleines Plugin, sobald der Button zum Absenden der Formulardaten getätigt wird. Daher schreiben wir in den Codeblock:


$(".button").click(function(event)
{
$(".fehler").hide();
var error = false;

Auf $(„.fehler“).hide(); gehe ich später ein. Die Variable error hilft uns nachher zu überprüfen, ob alle eingegebenen Daten korrekt waren.  Zunächst legen wir uns drei neue Variablen an und überprüfen, ob Werte eingegeben wurden. Wenn nein, dann setzten wir die Variable error auf true.

var Name = $("#Name").val();
if(Name == '')
{
error = true;
}

var Email = $("#Email").val();
if(Email == '')
{
error = true;
}

var Nachricht = $("#Nachricht").val();
if(Nachricht == '')
{
error = true;
}

Die jQuery Funktion val() gibt uns den Wert aus dem jeweiligen Feld, welches davor steht aus. „#“ bezieht sich auf das Feld mit der entsprechenden id.  (Mit „.xyz“ würde man auf ein Tag mit der Css Klasse xyz zugreifen.)

Nehmen wir an der Benutzer hat ein Feld nicht ausgefüllt und wir möchten ihn darauf hinweisen. Dafür könnten wir in jeden if-Block noch eine kleine Modifikation schreiben.

$("#Name").after('<div class="fehler">Eingabe fehlt</div>');

(Name bezieht sich auf das Feld, bei Email $(#Email), usw.) Wenn z.B. das Feld Name nicht ausgefüllt ist, würde hinter dem Feld mit der id Name jetzt <div class=“fehler“>Eingabe fehlt</div> stehen. Wir erinnern uns an das oben stehende $(„.fehler“).hide(); Wenn das nun nicht stehen würde, würde bei jedem mal, wenn das Feld nicht ausgefüllt wurde ein div-Tag mit den Worten Eingabe fehlt hinter das Feld Name gehängt werden. Das wollen wir nicht. Daher verstecken wir alle div-Tags mit der Klasse fehler.

Wollen wir nun jetzt noch überprüfen, ob wirklich eine email Adresse eingegeben wurde, können wir das über einen regulären Ausdruck machen. Dafür müssen wir erstmal das Muster bestimmen und können anschließend die test Funktion von jQuery verwenden. Diese liefert uns einen boolschen Ausdruck zurück.

Dazu erweitern wir ein wenig unsere Abfrage nach einem Wert im Feld Email.

var emailR = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

var Email = $("#Email").val();
if(Email == '')
{
$("#Email").after('<div class="fehler">Eingabe fehlt</div>');
error = true;
}else if(!emailR.test(Email))
{
$("#Email").after('<div class="fehler">Die Email Adresse ist falsch.</div>');
error = true;
}

Nachdem wir alle Daten nun geprüft haben, können wir nun mit der Verarbeitung der Daten anfangen.

if(error == false)
{
$(this).hide();
$.post("validate.php",
{ Name: Name, Email: Email, Nachricht:Nachricht },
function(data){
$("#jQForm").slideUp("normal", function() {
$("#jQForm").before('<h1>Jippie!</h1><p>Die Email wurde versendet.</p>');
});
}
);
}

event.preventDefault();
});

});
</script>

Zunächst überprüfen wir, ob die Variable error immer noch auf false steht. Wenn das der Fall ist, können wir das Formular abschicken. Zunächst verstecke ich den „Daten absenden“ Button mit $(this).hide(); Danach kommt die eigentliche Ajax Funktion.  Dabei schicken wir die aus dem Formular ausgelesen Daten mittels des Post Protokolls an die Datei validate.php. Zur optischen Unterstützung, dass das Formular versendet wurde können wir das Formular jetzt einfach verstecken mit der slideUp Funktion. Vor dem versteckten Formular soll im Anschluss eine kleine Nachricht erscheinen. Dieses geschieht über die before Funktion.

event.preventDefault(); verhindert, dass die Seite neu geladen wird. Danach müssen wir die geöffneten Klammern noch schließen.

In der validate.php können wir die Daten jetzt verarbeiten, in dem wir sie über $_POST[‚Name‘], $_POST[‚Email‘] und $_POST[‚Nachricht‘] auslesen. Das Array was übergeben wird, hat folgende Struktur:

Array (
[Name] => „Wert von Name“
[Email] => „Wert von Email“
[Nachricht] => „Wert von Nachricht“
[submit] => Daten absenden
)

Hier finden Sie noch einmal das komplette Script.

<script type="text/javascript">
$(document).ready(function()
{
$(".button").click(function(event)
{
$(".fehler").hide();
var error = false;

var Name = $("#Name").val();
if(Name == '')
{
$("#Name").after('<div class="fehler">Eingabe fehlt</div>');
error = true;
}

var emailR = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

var Email = $("#Email").val();
if(Email == '')
{
$("#Email").after('<div class="fehler">Eingabe fehlt</div>');
error = true;
}else if(!emailR.test(Email))
{
$("#Email").after('<div class="fehler">Die Email Adresse ist falsch.</div>');
error = true;
}

var Nachricht = $("#Nachricht").val();
if(Nachricht == '')
{
$("#Nachricht").after('<div class="fehler">Eingabe fehlt</div>');
error = true;
}

if(error == false)
{
$(this).hide();
$.post("validate.php",
{ Name: Name, Email: Email, Nachricht:Nachricht },
function(data){
$("#jQForm").slideUp("normal", function() {
$("#jQForm").before('<h1>Jippie!</h1><p>Die Email wurde versendet.</p>');
});
}
);
}

event.preventDefault();
});

});
</script>

Zum Download gibts die Datei hier. Bitte zum Ausführen wieder in formular.php umbenennen.
formular.phps

Be Sociable, Share!

2 thoughts on “Ajaxifizierte Formulare mit jQuery

  1. Wie kann ich bei der Fehlermeldung: „Eingabe fehlt“ einen .fadeIn-Effekt einbauen?

    Und noch eine Frage: Bei mir Funktioniert das versenden der E-Mail irgendwie nicht, bei mir kommt immer nur eine leere E-Mail an. Ich hab schon alles ausprobiert.
    Ich frage das Formular mit $_POST ab und versende die E-Mail mit der mail() Funktion.