jQuery: Formular bei Wertänderung sofort absenden

[ottogal]

Hallo in die Runde,

ein Formular enthält mehrere select-Elemente (List-Boxen mit einfacher Auswahl). Beim Klick auf den Submit-Button werden die gewählten Werte per Ajax im GET-Modus gesendet und die Seite neu geladen. Das funktioniert gut.

Nun will ich bei einigen selects (nicht bei allen) das Formular beim Ändern des Wertes sofort absenden lassen; d.h. ich versuche, beim Eintreten des change-Events das submit-Event des Formulars zu triggern. Und das kriege ich nicht hin.

Wie könnte das aussehen?

$('#option1').change(function(){
	$.ajax({
		type :      'GET',
		url :       '.........',
		data :      $('#Formular').serialize(),
		success :   function() {
					}
	}).change();
});

Da muss wohl sowas wie $('#Formular').submit(); oder $('#Formular').trigger('submit'); hinein - aber wo und wie?

Sorry, die Anführungszeichen werden hier runtergezogen :-(

[robertroth]

Liebe Mitdenker, liebe Wissende, liebe Neugierige,

ein Formular enthält mehrere select-Elemente (List-Boxen mit einfacher Auswahl). Beim Klick auf den Submit-Button werden die gewählten Werte per Ajax im GET-Modus gesendet und die Seite neu geladen. Das funktioniert gut.

Nun will ich bei einigen selects (nicht bei allen) das Formular beim Ändern des Wertes sofort absenden lassen; d.h. ich versuche, beim Eintreten des change-Events das submit-Event des Formulars zu triggern. Und das kriege ich nicht hin.

Und wozu braucht man da jQuery? Das geht doch auch mit einfachen (Vanilla-)JavaScript.

onChange wird aber erst gefeuert, wenn man das geänderte Eingabefeld verlässt, also benutzerabhängig durch Focusverlust.

Ich selber suche auch noch nach einem Event, der stattfindet, wenn der Wert eines Eingabefeldes geändert wird, also ohne User und ohne Focus, also z.B. durch Zuweisung eines neuen Wertes.

Spirituelle Grüße
Euer Robert
[e-mail]

[Jörg Reinholz]

Moin!

Ich selber suche auch noch nach einem Event, der stattfindet, wenn der Wert eines Eingabefeldes geändert wird, also ohne User und ohne Focus, also z.B. durch Zuweisung eines neuen Wertes.

Vorschläge:

select, radio, checkbox|onclick oder onkeyup, onkeypress input (texttypen), textarea| onchange (feuert erst wenn das Element den Fokus verliert), onkeyup oder onkeypress

Überlege und Teste, was jeweils sinnvoll ist.

Jörg Reinholz

[robertroth]

Liebe Mitdenker, liebe Wissende, liebe Neugierige,

Ich selber suche auch noch nach einem Event, der stattfindet, wenn der Wert eines Eingabefeldes geändert wird, also ohne User und ohne Focus, also z.B. durch Zuweisung eines neuen Wertes.

Vorschläge:

select, radio, checkbox|onclick oder onkeyup, onkeypress input (texttypen), textarea| onchange (feuert erst wenn das Element den Fokus verliert), onkeyup oder onkeypress

Überlege und Teste, was jeweils sinnvoll ist.

Danke für die Vorschläge. Aber die tun es alle nur mit Interaktion des Users, also Eingabegeräten.

Ich wollte aber so eine Art "Excel für Arme" bauen mit einem "Grid of Inputs", bei dem Wertänderungen auch aus dem Hintergund (setTimeout()) kommen können. Das klappt leider nicht.

Spirituelle Grüße
Euer Robert
[e-mail]

[JürgenB]

Hallo

Danke für die Vorschläge. Aber die tun es alle nur mit Interaktion des Users, also Eingabegeräten.

Ich wollte aber so eine Art "Excel für Arme" bauen mit einem "Grid of Inputs", bei dem Wertänderungen auch aus dem Hintergund (setTimeout()) kommen können. Das klappt leider nicht.

dann musst du per setInterval den Inhalt abfragen und mit dem vorher gespeicherten vergleichen. (So habe ich mir ein onresize für beliebige Elemente gebastelt.) Allerdings musst du auch dafür sorgen, das bei einem langsamen Schreiber nicht jeder Buchstabe einzeln abgeschickt wird.

Gruß Jürgen

[dedlfix]

Tach!

ein Formular enthält mehrere select-Elemente (List-Boxen mit einfacher Auswahl). Beim Klick auf den Submit-Button werden die gewählten Werte per Ajax im GET-Modus gesendet und die Seite neu geladen. Das funktioniert gut.

In dem gezeigten Code löst aber schon das Ändern einen Ajax-Request aus.

Nun will ich bei einigen selects (nicht bei allen) das Formular beim Ändern des Wertes sofort absenden lassen; d.h. ich versuche, beim Eintreten des change-Events das submit-Event des Formulars zu triggern. Und das kriege ich nicht hin.

Du musst dann das Forumlar absenden. In dessen Submit-Handler hängt dann das was üblicherwweise beim Submit ausgelöst werden soll. Das ist doch exakt dasselbe wie beim Change der Selects ausgeführt werden soll?

Sorry, die Anführungszeichen werden hier runtergezogen :-(

Nicht wenn man Code als Code auszeichnet: in der Zeile mit Backticks. Oder auch mit 'kein Markdown', dann aber den betroffenen Text zunächst markieren und dann erst die Schaltfläcke betätigen.

dedlfix.

[ottogal]

Danke dedlfix für die Hinweise - und sorry für die späte Reaktion, war ein paar Tage off...

In dem gezeigten Code löst aber schon das Ändern einen Ajax-Request aus.

Ist schon klar, da habe ich mich missverständlich ausgedrückt. Beim Ändern werden via Ajax die GET-Werte neu gesetzt. Beim Submit des Formulars werden die Werte aus dem GET-Array geholt, und mittels success : function() { location.reload(); } wird die Seite neu geladen.

Was ich erreichen wollte: Die Seite soll schon beim Ändern des select-Feldes neu geladen werden; deshalb wollte ich den Submit auslösen. Es würde wohl, wie ich jetzt sehe, ausreichen, das location.reload() direkt aufzurufen - nur wo muss das hin? Meine Versuche waren alle erfolglos. Wäre dankbar um weiteren Rat.

Sorry, die Anführungszeichen werden hier runtergezogen :-(

Nicht wenn man Code als Code auszeichnet: in der Zeile mit Backticks. Oder auch mit 'kein Markdown', dann aber den betroffenen Text zunächst markieren und dann erst die Schaltfläcke betätigen.

Danke auch für diese Tipps, hat aber inline beides nicht funktioniert.

[dedlfix]

Tach!

Was ich erreichen wollte: Die Seite soll schon beim Ändern des select-Feldes neu geladen werden; deshalb wollte ich den Submit auslösen. Es würde wohl, wie ich jetzt sehe, ausreichen, das location.reload() direkt aufzurufen - nur wo muss das hin? Meine Versuche waren alle erfolglos.

Das Formularfeld ansprechen und submit() aufrufen muss gehen. Ansonsten geht natürlich auch im Change-Handler das zu notieren, was dort bereits steht. Das Verdoppeln ist aber nicht sehr wartungsfreundlich.

Wenn etwas nicht funktioniert, muss man die Ursache herausfinden. Browser haben eingebaute Debug-Werkzeuge, die nur nur nutzen musst. Du kannst Breakpoints setzen und schrittweise durch den Code gehen, dir dabei die Variableninhalte ansehen und noch viel mehr. So kannst du Wunsch und Wirklichkeit miteinander vergleichen und die Abweichung finden.

dedlfix.