AW: Nach submit in Overlay auswerten
moinsen,
HTML:
$("#form").on("submit",function(e) {
alert(e.data);
}
Diese Funktion gibt das eventobject (...) zurück. In data findest du das, was du mit deinem PHP zurück gibst.
Mein bester Freund ist die API-Beschreibung (...)
Nachtrag: Die Funktion gibt nichts zurück, sondern empfängt !!! Sorry
@hub:
die function gibt GAR NICHTS zurück (bzw.: undefined). Erstens fehlt dafür das return-statement, zweitens – und das wiegt schwerer – wird das formular abgeschickt, mit page-reload und allem.
sie EMPFÄNGT auch nichts, sondern stellt dir nur ein generisches event-object zur verfügung. das wird dann auch noch mal durch jQuery genudelt und fertig ist die soße.
@TE:
zunächst muss unterbunden werden, dass der browser das formular abschickt und dadurch einen page-reload auslöst. dazu benötigst du ein bis zwei dinge:
- ein generisches event-object...
- ... mit einer methode, das standardverhalten zu unterbinden
- ... und ggf. einer möglichkeit, sog. "event-bubbling" zu unterbinden
um das standartverhalten zu unterbinden, erweitert jQuery das generische event-object (bzw: das window.event-object bei älteren IE-versionen) um die methode .preventDefault() – was offensichtlich auch gleich ihre funktion erklärt: "verhindere/unterdrücke-(den/das)-Standard(-verhalten)". wie praktisch!
ich gehe mal nicht davon aus, dass du ein formular innerhalb eines anderen formulares verschicken möchtest, ohne einen page-reload. falls doch, gibt es betreffs des "bubblings"-problems: .stopPropagation().
also:
Code:
// query-result in variable speichern (zwecks DRY*)
var myForm = $('form');
myForm.on('submit', handleSubmission);
function handleSubmission (event) {
event.preventDefault();
// optional. verhindert einen aufruf des submit-events auf eltern-knoten
// event.stopPropagation();
};
--------------------------------------------------
* = DONT-REPEAT-YOURSELF
ok, das wäre soweit klar. wenn das formular abgeschickt wird passiert erst mal gar nichts mehr (... was erfreulich ist). jetzt kommt part 2: ajax. dazu nutzt du – ein einem anflug von pragmatismus – einfach die ajax-methoden von jQuery. die function "handleSubmission" sieht danach so aus:
Code:
function handleSubmission (event) {
event.preventDefault();
// optional. verhindert einen aufruf des submit-events auf eltern-knoten
// event.stopPropagation();
// this zeigt hier auf das formular
// $.fn.serialize() produziert einen url-encodierten string
// der daten, die in das formular eingegeben wurden
var xhr = $.ajax({
type: this.method.toUpperCase(),
url: this.action,
data: $(this).serialize()
});
// xhr ist das request-object.
// die function in .done() wird bei erfolg aufgerufen.
// "data" beinhaltet die antwort vom server.
// die function in .fail() wird aufgerufen, wenn der request fehlschlägt
xhr.done(function (data) {
/**
* ab hier beginnt die weitervararbeitung von der antwort.
* diese verarbeitung hängt davon ab, in welcher form das php-script
* anwortet. möglich wären z. b. text (plain) oder JSON.
*/
});
xhr.fail(function (errorObject, errorMessage) {
if (typeof console !== 'undefined' && typeof console.log === 'function') {
console.log(errorObject);
}
alert(errorMessage);
});
};
und fertig ist die laube.
hoffe das hilft.
könnte man das auch in ein overlay packen??
