JavaScript Mehrere Formulare mit einem Javascript Teil

[Fat32Tony]

Hey!
Ich habe die Tage vor mal ajax vernümftig in meine Website zu integrieren. Ich habe mich dazu auch bereits belesen und habe eigentlich auch den Vorgang verstanden.
Nun habe ich jedoch eine dynamische Website mit vielen form tags die alle an einer anderen Stelle stehen und andere Funktionen erfüllen. Um dann jedoch diese unterschiedlichen Formulare zu bedienen müsste ich jedem ein eigenen Javascript Teil geben, da das javascript ein Element anhand seiner ID ausliest.

Folgendes ist mein Code:

<script language="JavaScript" type="text/javascript">
function ajax_post(){
    var hr = new XMLHttpRequest();
    var url = "test2.php";
    var tag = document.getElementById("ajax").value;
    var vars = "ajax="+ajax;
    hr.open("POST", url, true);
    hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    hr.onreadystatechange = function() {
	    if(hr.readyState == 4 && hr.status == 200) {
		    var return_data = hr.responseText;
			document.getElementById("status").innerHTML = return_data;
	    }
    }
    hr.send(vars);
    document.getElementById("status").innerHTML = "processing...";
}
</script>

Nun bräuchte ich also eine Möglichkeit anhand einer Klasse alle Inputs festzulegen und die entsprechenden name Parameter per GET/POST Parameter dem Script auf dem Server mitzuteilen. Das gelingt mir aber irgendwie nicht so richtig.

Ich hoffe da kann mir jemand helfen. Vileicht habe ich auch die völlig falsche Herangehensweise an das Problem... Kann ja auch sein
lg

Die Javascript Funktion wird natürlich mit dem Submit Button aufgerufen wodurch das ganze eigentlich kein Formular in dem Sinne mehr ist.

 

[NullPointer]

Wäre es für dich eine Option, ein Javascript-Framework zu benutzen? jQuery z. B. hat die Funktion serialize(), die das für dich macht. Es vereinfacht auch die Benutzung von Ajax

 

[chris221177]

Hallo Fat32Tony,

abgesehen von der Möglichkeit eines Frameworks bietet sich noch die Möglichkeit des FormData - Objekts. Zum Beispiel gibst Du Deinem Formular eine ID ( "meineId" ).
Folgender Code liest alle Formular Felder des Formulars ein:

var formElement = document.getElementById ("meineId" );
var formData = new FormData( formElement );
var hr = new XMLHttpRequest( );
/* Mit Deinem Code */
hr.open ("POST" , "test2.php" );
hr.send( formData );

Weitere eigene Formular - Elemente können folgendermaßen eingefügt werden ( nach der Initialisierung von formData ):

/* Erzeugt eine Variable "username" mit dem Wert "Fat32Tony" */
formData.append( "username" , "Fat32Tony");

Auf diese Art und Weise lassen sich auch Dateien usw. an den Server übermitteln. Das kann recht praktisch sein, wenn z.B. Uploads per Drag & Drop ( Windows -> Browser ) ermöglicht werden sollen.

Ich hoffe, ich konnte weiter helfen.
Gruß chris

 

[NullPointer]

FormData kannte ich selbst noch nicht, danke für den Tip Man sollte aber vielleicht erwähnen, dass es vom Internet Explorer erst ab Version 10 unterstützt wird, das kann schon mal ein Ausschlusskriterium sein.

 

[chris221177]

FormData kannte ich selbst noch nicht, danke für den Tip Man sollte aber vielleicht erwähnen, dass es vom Internet Explorer erst ab Version 10 unterstützt wird, das kann schon mal ein Ausschlusskriterium sein.

Das ist vollkommen richtig. Die Frage ist, ob es sich lohnt, auf IE vor Version 10 Rücksicht zu nehmen. Es gibt ja dazu jede Menge Statistiken, der Anteil an IE 9 und älter dürfte im Moment bei rund 3 - 4 % liegen... Viel schlimmer ist es meines Erachtens, unsauberen Code zu generieren, der dann z.B. im Firefox oder Chrome nicht mehr funktioniert. Außerdem werden sich sonst neue Techniken nie durchsetzen, weil es ja von alten "Browsern" nicht unterstützt wird. Weiter möchte ich mich darüber nicht auslassen, da sonst der Thread nichts mehr mit dem ursprünglichen Thema zu tun hat.

Dennoch einen Dank für Deine Ergänzung (Darauf hätte ich selbst schon achten sollen). Es ist wichtig, der TE sollte wissen, auf was er sich einlässt.