Ajax/Javascript - nachträglich hinzugefügte Elemente eines Formulars werden ignoriert

[Jokai olvaso]

Folgendes Szenario:

Ich habe ein Formular, das bei Änderung einer Select-Box weitere Input-Felder (per Ajax) hinzufügt. Anschließend soll das komplett ausgefüllte Formular (inkl. der neuen Felder) abgeschickt werden. Dies scheitert aber daran, daß die neuen Felder nicht mitübertragen werden.

Als Basis Konstrukt nehme ich die Mootools-Bibliothek und stütze mich hierbei in erster Linie auf folgendes Beispiel: http://demos.mootools.net/Ajax.Form

Wird:

window.addEvent('domready', function(){

nur beim ersten Laden der Seite ausgeführt und später bei Änderung nicht neu aufgerufen, oder woran könnte es noch liegen, daß die neuen Felder ignoriert werden?

[steffenk]

nach jedem Request musst Du erneut Deine handler starten, damit die neuen Elemente erfasst werden.

[Jokai olvaso]

Ah ok, danke, sowas in der Art dachte ich mir auch schon, da ich von JavaScript aber nicht wirklich viel Ahnung habe, habe ich keine Ahnung, wie ich das machen soll.

Ich habe mal eine Demo-Seite meines Problems erstellt:

http://njimko.de/test/test2.php

Wenn man in der Dropbox einen Eintrag auswählt (am Besten "neue Frage" oder "Was ist Datenschutz") werden weitere Felder angezeigt (und ein paar Infos zum Debuggen). Wenn ich danach das Formular nochmals abschicke, wird es "normal" versendet.

Wie genau starte ich jetzt die Handler neu?

[steffenk]

pack erinfach den Handler in eine eigene Funktion, in der Art

window.addEvent('domready', function(){
	initHandler();			
});
function initHandler() {
	$('fragenForm').addEvent('submit', function(e) {
		/**
		 * Prevent the submit event
		 */
		new Event(e).stop();

		/**
		 * This empties the log and shows the spinning indicator
		 */
		var log = $('allItems').empty().addClass('ajax-loading');

		/**
		 * send takes care of encoding and returns the Ajax instance.
		 * onComplete removes the spinner from the log.
		 */
		this.send({
			update: log,
			onComplete: function() {
				log.removeClass('ajax-loading');
			}
		});
	});
}
function sendform() {
     var log = $('allItems').empty().addClass('ajax-loading');
     $('fragenForm').send({
          update: log,
          onComplete: function() {
               initHandler();
               log.removeClass('ajax-loading');
               
          }
     });
};

[Jokai olvaso]

Nochmals vielen Dank für Deine Hilfe! Habe das jetzt so implementiert, der Ajax-Vorgang klappt jetzt auch jedes Mal, aber die neu eingefügten Input-Felder (bzw. deren Inhalte) fallen immer noch unter den Tisch (Testseite wurde aktualisiert, siehe Link weiter oben), aber die neu hinzugefügten Felder werden leider immer noch nicht übertragen.

Hast Du evtl. noch eine Idee, woran es liegen könnte?

[steffenk]

ich würde es mal einfacher machen, setz die inputs von Anfang an mit rein und blende sie aus, nach dem Request kannst Du sie einblenden.

Sollte das nicht gehen, so musst Du Deinen Request bearbeiten, z.B. mit evalResponse, siehe http://docs.mootools.net/Remote/Ajax.js

[Jokai olvaso]

Autsch! Manchmal sieht man den Wald vor lauter Bäumen nicht.

Vielen Dank!