Formularversand mit Ajax
Dieses Beispiel veranschaulicht die Möglichkeit Formulardaten mittels jQuery per Ajax versenden. Voraussetzung hierfür ist das Einbinden des jQuery-Frameworks und des speziellen Scriptes jquery.form.js
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Beispieldokument</title>
<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript">
// warten bis die DOM-Struktur geladen ist
$(document).ready(function() {
var options = {
target: '#div_suchergebnisse' // Element in das die Serverantwort geschrieben wird
//beforeSubmit: showRequest, // optionale Funktion vor dem Absenden des Formulares
//success: showResponse // optionale Funktion nach dem Absenden des Formulares
};
// Anbindung des betreffenden Formulares, dass per Ajax versendet werden soll (mehrere möglich)
$('#testform').ajaxForm(options)
});
</script>
</head>
<body>
<form name="testform" id="testform" method="post" action="zieladresse.htm">
<input type="hidden" name="field1" id="field1" value="">
<input type="text" name="field2" id="field2" value=""><br>
<input type="text" name="field3" id="field3" value="">
<input type="submit" value="absenden">
</form>
<div id="div_suchergebnisse">
Hier landet das Ergebnis der Suche
</div>
</body>
</html>
Es sind noch wesentlich mehr Optionen für diese Funktion verfügbar.
Mehr Informationen und Script-Download unter http://jquery.malsup.com/form/#getting-started