Formmailer mit Ajax
weitere Scripte
|
Pfad:
Python > Webscripte > Formmailer
Formmail mit Ajax – Installation
Installation
Die Installation dieses Formmail-Scriptes ist analog zur der Variante Simple Formmailer. Der eigentliche Unterschied liegt in der Anbindung in der Html-Datei. Die Anbindung ist so gestaltet, dass der Versand des Formulars auch ohne Javascript funktioniert.
Anbindung in eine Html-Datei, Beispiel
Da das Formular per Ajax-Funktion verschickt wird, muss man darauf achten, dass die Daten in UTF-8 vorhanden sind.
Dies erreicht man einerseits mit der Content-Type Angabe im Head-Bereich oder mit Accept-Charset Angabe im Form-Tag.
So ist es auch möglich, dass nicht-lateinische Zeichen (z.B.: chenesische oder japanische) korrekt übertragen werden.
Das Script verschickt die eMails seinerseits auch mit UTF-8 als Charset.
Beispiel für die Anbindung
Alle fett ausgezeichneten Passagen müssen so übernommen werden, damit das Script client-seitig fehlerfrei ausgeführt wird. Die Namen der ID-Bereichne sind natürlich frei wählbar.
UTF-8
Die Codierung in UTF-8 garantiert, dass die Daten ohne Verlust von Zeichen auch im eMail-Postfach so ankommen, wie sie eingegeben wurden. Die Festlegung auf diesen Zeichensatz kann entweder im Head-Bereich oder im Form-Tag festgelegt werden.
miniajax.js
Es handelt sich um ein kleines Framework, das die nötige Ajax-Funktionen bereitstellt. Wird im Archiv mitgeliefert.
senddata()
Mit dieser Funktion wird die Kommunikation zum Server
erledigt.
Nach dem Abschicken der Daten
erscheint statt des Fomulars ein Ajax-Indikator als Zeichen dafür, dass die Aktion gerade ausgeführt wird.
indikator.gif
result und feedbackform
Der DIV-Bereich "result" umspannt das Formular und dient als Ausgabebereich für die zurückgelieferten Daten. Die ID im Form-Tag ("feedbackform") dient macht das Formular für die Ajax-Funktion verfügbar. Beide ID-Namen können frei gewählt werden. Es sollte allerdings daraf geachtet werden, dass die Änderungen an allen Stellen der Html-Datei durchgeführt werden.
onClick="senddata(); return false
Ein Klick auf den Submit-Button ruft die Funktion senddata auf. Sollte im Browser kein Javascript aktiviert sein, wird das Formular herkömmlich übermittelt.
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<script type="text/javascript" src="miniajax.js">
</script>
</head>
<script type="text/javascript">
function senddata() {
indikator = '<img src="indicator.gif"
style="display:block;margin:50px auto">';
ajax.submit('formmail-ajax.py', 'result', $('feedbackform'));
document.getElementById('result').innerHTML = indikator;
}
</script>
<body bgcolor="#FFFFFF">
<div id="result">
<form method="post" action="formmail-ajax.py"
id="feedbackform" accept-charset="UTF-8">
Name:<br>
<input type="text" name="Name">
<br>
eMail:<br>
<input type="text" name="eMail">
<br>
Kommentar:<br>
<textarea name="Kommentar"></textarea>
<br>
<input type="submit" value="Abschicken"
onClick="senddata(); return false">
</form>
</div>
</body>
</html>
© MediaDialog Topolewski Bielefeld | Python by Nooto.de
|
