Formularversand steuern

[DataFox]

Hi Leute

Ich habe ein Formular und jede Menge Ajax auf einer Seite. Das besagte Formular führt aber zu enem neuen Ziel, und bevor das passiert, müssein ein paar andere Ajax-Funktionen noch schnell ausgeführt werden. Erst dann soll der Browser das Formular wirklich versenden. Dies soll automatisch für alle Formulare auf der Website gelten, deshalb will ich es allgemein halten.

So gehe ich vor:

1) bei onMouseDown auf ein Formular-Element wird dem Formular ein onSubmit-Eventlistener für eine Funktion verpasst, die return false; zurückliefert. Im Internet-Explorer verhindert dies das der Browser sofort das Formular abschickt. Im Firefox funktioniert es nicht.

2) Außerdem wird ein onSubmit-Eventlistener angehängt der eine spezielle Funktion ausführt, wenn das Formular submittet wird. Das funktioniert in MSIE und Firefox.

3) nach dem die aufgerufene AJAX-Funktion alles erledigt hat, soll das Formular tatsächlich abgeschickt werden. Dazu wird wieder eine spezielle Funktion aufgerufen, und die löscht beide Eventlistener die zuvor angehängt wurden und macht dann auf das Formular-Element einen submit();

Aus irgend einem Grund kan nich das Formular Element aber nicht automatisch per JavaScript submitten

Hier der relevante Code:

// OnMouseDown Eventlistener anhängen
addEvent(window.document, 'mousedown', documentMousedownEventFunction);
function documentMousedownEventFunction(e){
	if(!e) e = window.event;
	var eo = e.srcElement || e.target;
	
	if(eo.tagName == "INPUT" && eo.type == "SUBMIT") {
		//das Formularelement ermitteln:
		while(eo.tagName != "FORM" && eo.parentNode){
	 		eo = eo.parentNode;
	 	}
		if(eo.onsubmit) {
			var original_onsubmit = eo.onsubmit;
			addEvent(this, 'submit', original_onsubmit);
		}
		addEvent(eo, 'submit', returnFalse);
		addEvent(eo, 'submit', formOnSubmitAction);
	}
}


// wird bei onSubmit ausgeführt, damit das Formular nicht sofort abgeschickt wird
function returnFalse(){
	return false;
}

// wird bei onSubmit ausgeführt und führt die eigentliche AJAX-Func aus
function formOnSubmitAction(e) {
	if(!e) e = window.event;
	var eo = e.srcElement || e.target;
	formOnSubmitActionNow(eo); //Eigentlich kommt hier die AJAX-Func, die dann diese func hier aufruft. Stark vereinfacht also!
}

// hier die funktion die das formular abschicken soll
function formOnSubmitActionNow(eo) {
	removeEvent(eo, 'submit', formOnSubmitAction);
	removeEvent(eo, 'submit', returnFalse);
	eo.submit();
}

normale Formulare die ich noch nicht mit den Eventlistener-Funktionen "bearbeitet" habe kann ich ganz normal mit submit(); abschicken...

Der FireFox/FireBug sagt mir dazu nichts und der MSIE 6.0 sagt: Das Objekt unterstützt diese Eigenschaft oder Methode nicht.

Habe auch die Developer-Toolbar mit dem JS-Debugger drin, aber da bekomme ich nur eine leere Seite. Der Fehler bezieht sich auf das eo.submit();

Ich habe aber mit einem alert(eo.action) geprüft ob es wirklich das Formularelement ist, und ja...das ist es. Kann es nicht submitten und der FireFox gehorcht dem return false; nicht und submittet immer sofort (auch mit alerts getestet - der submittet auch, wenn ich das eo.submit() auskommentiere...t also net)

hat jemand einen Tipp wie man das am besten anstellen könnte? Würde mich echt freuen, komm einfach net weiter

Gruß
Laura

--------------------
Nachtrag:

ich habe es jetzt so hinbekommen das es im Internet-Explorer läuft. Nur im Firefox schaffe ich es nicht das Formular mit return false; anzuhalten, um erst einmal die AJAX-Funktion auszuführen... irgendwie will der das nicht schlucken.

Muss man beim Firefox irgendwas anders machen als im MSIE, um ein Formular anzuhalten bzw. zu stoppen?

Gruß
Laura

-----------------
Nachtrag:
bin fündig geworden:
http://www.gerd-riesselmann.net/archives/2005/04/firefox-canceling-problem-solved

scheint so eine art FF-Bug zu sein!

 

[FipsTheThief]

Mhm es gibt 2 Varianten dafür , wie das mit dem onsubmit zusammen hängt muss ich auch nochmal probieren oder die Unterschiede erkennen aber da gibt es wohl auch noch einen Unterschied zur Anonymen Funktion also

formular.onsubmit = function () { return false; }

Und das hinzufügen von Events. Bei einer Anonymen Funktion reicht es zu sagen return false in der Regel.

Sollte man aber den Event regestrieren dann muss man etwas anders vorgehen und zwar in dem man die Standardausführung blockt in dem Fall das senden des Formulares funktioniert auch so bei Link Elementen.

if(event.preventDefault) 
   event.preventDefault() // für alle anderen Browser
else 
   event.returnValue = false; // für den IE

Damit verhinderst Du das das Formular noch gesendet werden kann.

Dann würde ich so vorgehen :

Alle Formulare einsammeln und da den Event onsubmit regestrieren das document.onmousedown global zu zünden würde ich so nun nicht machen da es jedes mal feuert egal ob es ein Formular war oder nicht.

Grob gesehen sieht es dann so aus:

            function sendForm (evt) {
                var evt = (evt)?evt:(window.event)?window.event:'';
                
                //standard Ausführung blocken
                if(evt.preventDefault) 
                    evt.preventDefault();
                else 
                    evt.returnValue = false;
                
                var curForm = evt.srcElement || evt.target;
                
                //formular wirklich senden
                sendFormNow (curForm);
            }
            
            function sendFormNow (fo) {
                fo.submit();
            }
            
            window.onload = function () {
                // alle Formulare einsammeln und dann durchlaufen
                forms = document.getElementsByTagName('form');
                for(var i = 0 ; i < forms.length;i++) {
                    // Event Handler regestrieren
                    Element.addEvent(forms[i],'submit',sendForm);
                }
            }

Wobei mich das wundert , das du 2 Funktionen für den Submit auf das Formular legst die werden nach einander gezündet.Das erste mal kommt false zurück beim 2. mal wird dann die formOnSubmit Funktion ausgeführt wo kein Rückgabe Wert existiert.

 

[DataFox]

Hi! Ich denke ich habs irgendwie hingekriegt, es scheint jetzt zu funktionieren. Weis gar nicht wo jetzt genau der Fehler lag, hab so viel rumprobiert. Vielen Dank für die hilfreichen Tipps

die Funktionen sind stark abgespeckt, wollte es so simpel wie möglich halten...

Gruß
Laura