Formularweites onChange?

[pekka]

Ich habe Dialogfenstern HTML-Formulare mit verschiedenen Eingabefeldern.

Ich brauche einen Mechanismus, der beim Schließen des Dialogs erkennt, wenn sich in einem Formular was verändert hat, und eine Meldung "Fenster ohne Speichern schließen" anzeigt.

Haken tut es bei der Erkennung der Veränderung.
- onChange greift nicht für ein ganzen Formular
- die einzelnen Eingabefelder stammen aus Modulen, bringen teilweise schon onChange-Events mit und sie anzupassen wäre ein Riesengeschäft, Problematisch auch mit Abwärtskompatibilität usw. usf...

Langer Rede kurzer Sinn:
Kennt jemand eine einfache Implementation des onChange-Events für ein ganzes Formular? Vielleicht aus einem Framework oder so...

[asp2php]

du kannst z.B. das Keypress-Event überwachen:

window.captureEvents(Event.KEYPRESS);
window.onkeypress = blub;
function blub (arg) {
  // hier prüfen wo, was, ... geändert und Flag entsprechend setzen
  // beim Fensterschliessen diesen Flag prüfen und reagieren
} 

[pekka]

Mmm, das wird nicht reichen, weil Formularelemente ja auch mit der Maus verändert werden können (Checkbox, Select....) .... und als nächste Schwierigkeitsstufe auch hidden-Felder, deren Wert per Skript verändert wird....

[tontechniker]

Ein Lösungsansatz für mootools - weitere Typen kannst du hinzufügen, evtl. funktioniert es auch wenn man die Events cloned. (ungetestet):

var changed = false;

$$ ( 'form' ) . getChildren  ( ) . each ( function ( element ) {
	if ( element . get ( 'tag' ) == 'input' ) {
		switch ( element . get ( 'type' ) ) {
			case 'text':
			case 'password':
				element . addEvent ( 'keydown', function ( event ) {
					event . target . getParent ( ) . fireEvent ( 'change' );
				} );
				break;
			case 'checkbox':
			case 'file':
			case 'radio':
				element . addEvent ( 'change', unction ( event ) {
					event . target . getParent ( ) . fireEvent ( 'change' );
				} );
				break;
			default:
				break;
		}
	}
} );

[pekka]

Suupergeil, vielen Dank!
So schön hätte ich das nie hinbekommen, schon gar nicht um die Uhrzeit.

Ich benutze prototype und mußte es entsprechend umschreiben. Der größere Haken ist, daß IE7 das onChange()-event im Formular nicht interpretiert und somit nichtmal auf ein fireEvent() reagiert.

Meine Lösung ist jetzt, den Inhalt des onchange-Strings des Formulars zu eval() en. (Ein onChange() ausführen geht aus o.g. Gründen auch nicht.) Nicht das eleganteste der Welt, aber es tut den Job. Getestet in FF2 und IE7 mit Textfeldern, Selects, Checkboxen, File-Inputs. Textareas müßten auch gehen.

@Tontechniker: Lust, deine MooTools-Lösung noch enstprechend umzubauen (onchange IE-Kompatibel)? Dann könnten wir beides in den Code-Schnipseln ablegen.

Hier also für die Nachwelt die Prototype-Version:

formid = "meineFormularID";
 
$ ( formid ) . getElements()   . each ( function ( element ) {
    
        switch ( element . type ) {
            case 'text':
            case 'password':
                element . observe ( 'keydown', function ( event ) {
                    
                    eval ( event . element() . form . onchange);
                    
                    
                } );
                break;
            
            case 'checkbox':
            case 'file':
            case 'radio':
            default:     
                element . observe ( 'change', function ( event ) {
                    
                      eval ( event . element() . form . onchange);
                  
                } );
                break;
            
            
        
    }
} );

[tontechniker]

So, noch mal ein bisschen rumgebastelt, der Workaround läuft nur beim IE. Wenn man möchte (und zum Beispiel auf Inlinecode steht) kann man eval benutzen, ansonsten weist man onchange eine Funktion zu:

form . set ( 'onchange', function ( event ) { ... } );

$$ ( 'form' ) . getChildren  ( ) . each ( function ( element ) {
	if ( element . get ( 'tag' ) == 'input' ) {
		switch ( element . get ( 'type' ) ) {
			case 'text':
			case 'password':
				element . addEvent ( 'keydown', function ( event ) {
					if ( Browser . Engine . gecko ||  Browser . Engine . webkit ||  Browser . Engine . presto ) {
						event . target . getParent ( ) . fireEvent ( 'change' );
					} else {
						event . target . getParent ( ) . get ( 'onchange' ) . run ( event ) .bindWithEvent ( );
						//eval ( event . target . getParent ( ) . get ( 'onchange' ) );
					}
				} );
				break;
			case 'checkbox':
			case 'file':
			case 'radio':
			default:
				element . addEvent ( 'change', function ( event ) {
					if ( Browser . Engine . gecko ||  Browser . Engine . webkit ||  Browser . Engine . presto ) {
						event . target . getParent ( ) . fireEvent ( 'change' );
					} else {
						event . target . getParent ( ) . get ( 'onchange' ) . run ( event ) .bindWithEvent ( );
						//eval ( event . target . getParent ( ) . get ( 'onchange' ) );
					}
				} );
				break;
		}
	}
} );