Quasilectrisches Medieninstitut - jQuery: Wert (value) eines Feldes ändern das mit jQuery verändert wurde

Verfasst von Whykiki. / Verfasst am .

jQuery: Wert (value) eines Feldes ändern das mit jQuery verändert wurde

Die Headline mag sich vielleicht etwas verwirrend anhören, aber tatsächlich ist genau dieser Task eben möglich - wenn auch eher selten. In meinem aktuellen Beispiel musste ein Formular angepasst werden. Genauer: ein Angebotsrechner bzw Cost Calculator.
Hierbei wurde viele der Formularfelder mit jQuery verändert, um am Ende einen Preis auf Basis der vom User getroffenen Auswahl zu generieren. Das bedeutete wiederum, dass es aber auch einige Fleder gab, die wiederum auf anderen basierten und die erst dann einen Wert ausgeben konnten, wenn das vorherige Element seinen Wert verändert.

Hört sich nach wie vor kompliziert an? Ein Bild illustriert es vielleicht am ehesten:

Man wählt sein Geburtsdatum aus mit einem Datepicker, damit wird automatisch per jQuery die Berechnung durchgeführt und das Ergebnis wird dann in das Feld "Alter" geschrieben. Daraus soll sich dann nun der Wert für die Altersgruppe ergeben.
Grundsätzlich funktioniert das Schreiben in Felder ja mit:

So lange wir also den Wert nur von einem ins andere Wert schreiben bzw. davor eine Berechnung durchführen, ist erst einmal alles ok...
Ihr könnt euch den Fiddle anschauen: Füllt man Feld 1, erscheint sein Wert dann auch in Feld 2. Bis hierhin also alles ok.

Wollen wir nun aber weitere Felder darauf basierend füllen, ohne dass wir dafür in jedes Feld klicken wollen, dann klappt das nicht. Hört sich wieder blöd beschrieben an, daher an dieser Stelle ein weitere Fiddle:

Laut diversen Beiträgen bei stackoverflow oder auf anderen Webseiten hiess es grundsätzlich, dass change in JQuery tatsächlich nur dann funktioniert, wenn das entsprechende Feld seinen Fokus verloren hat. Was also bedeutet hätte, dass man nachdem sich das Alter errechnet hat, in genau diesem Feld hätte eine Änderung vornehmen müssen (denn das neu errechnete Alter soll ja als Trigger für mein nächsts Feld dienen). Genau das ist aber ja nicht in meinem Sinne, das soll automatisch gehen...

Lösung: Mit jQuery befüllte Formfelder auslesen

Die Lösung für dieses Problem war dann in meinem Fall so unglaublich simpel und dabei habe ich vorher echt stundenlang gesucht und gefummelt. Mit setInterval rumgespielt und irgendwelchem anderen komplizierten Scheiss.... :-) der in irgendwelchen Schleifen alle Formfelder durchlief und auf Änderungen gecheckt hat...ahhhh :-)

Nein, alles viel zu kompliziert. Ein einfaches anfügen von change an das Ende meines Values erfüllt genau den Zweck. Schaut euch einfach den letzten Fiddle an um ein funktionierendes Beispiel zu sehen.

Fazit:

Warum ausgerechnet das jetzt so funktioniert verstehe ich jedoch wiederum nicht hundertprozentig. Für mich macht das Anfügen von change grundsätzlich Sinn.
Wenn man es genau nimmt ist auch nur diese Schreibweise korrekt. Denn $('#input1').val() liest das Ergebis eigentlich nur aus und legt kein neues fest.

Ich versuche das so herzuleiten, dass$('#input1').val('neueDaten') die Ausgabe auf dem Schirm zwar verändert, aber nicht im HTML-Tree. Was zur Folge hat, dass das Feld für die darauffolgende jQuery-Abfrage leer ist. Somit kann dann auch das dritte Feld nicht befüllt werden.
Daher muss an dieser Stelle wohl das change noch am Ende folgen, um nicht nur den Bildschirm, sondern auch die "eigentlichen" Daten zu verändern. Das ist meinerseits allerdings an dieser Stelle nur eine Mutmaßung, genau weiss ich es nicht. Ich lasse mich also gerne korrigieren :-)

Das geht auch mit Hidden-Fields

Oftmals hab ich bei meinem "Recherchen" zu dem Thema jede Menge Beiträge gefunden in denen es um Hidden-Fields ging. Hierbei ist das genau die gleiche Problematik. Aber auch hier reicht tatsächlich das change am Ende aus. Ihr könnt das selbst prüfen, indem ihr meinen oberen Fiddle einfach bearbeitet und im Reiter "HTML" ein Feld in den Typ "hidden" ändert.

Ich hoffe das hat dem ein oder anderen helfen können, mir hat es Stunden meiner Zeit gekostet :-) Die kann sich jemand anderes nun hoffentlich sparen.

Quasilectrisches Medieninstitut

Fellackerstr. 2
47495 Rheinberg

Impressum | Kontakt

Gemacht 2015 vom Quasilectrischen Medieninstitut