Komme nicht an den richtigen <input>-Wert mit .val()

[marcel_t]

Hallo,

ich habe ein Eingabe Feld (<input>), dass bereits mit einem Wert gefüllt ist. Klickt der Nutzer in das Feld, öffnet sich ein Button zum bestätigen der Eingabe. Nun macht der Nutzer also seine Eingabe und drückt den Button zum bestätigen des neuen Inhalts (wird mit AJAX weiterverarbeitet). Das Problem ist nun, dass in die Variable nur der "alte" Wert abgelegt wird und nicht der "neue" Wert der soeben eingegeben wurde.

Das ist mein JQuery (nur der Ausschnitt):

	jQuery(".btn_saveSupportTimeValue_ok").click(function(e) {
		var inputfield_value = jQuery(".input_save_value").val();
                alert(inputfield_value); // = alter Wert
	});

Weiß denn jemand wie man das Problem lösen könnte, bzw. hat jemand ne Idee? Lässt sich bei einem Klick auf den Button vielleicht der Fokus auf das setzen, was genau in dem Moment des Klicks in dem Feld steht? Finde leider keine Lösung dafür..

 

[Sven Mintel]

Moin,

dein Code macht bei mir genau das, was er lt. deiner Beschreibung soll.

Hast du vielleicht mehrere Elemente mit dem Klassennamen input_save_value im Dokument?

 

[marcel_t]

Hi,
ja habe mehrere Elemente. Hab mein Problem vielleicht etwas zu aggregiert beschrieben. Eigentlich ist es etwas komplexer (aber nicht weniger leicht). Nur funktioniert es bei mir nicht.. Also:

Ich lasse mir den Button anzeigen, sobald jemand in dem <input>-Feld rumdrückt:

	// Eingabefeld überwachen
jQuery(".input_save_value").keypress(function() {
   jQuery(".input_save_value_btn").fadeIn(); // Button sichtbar
   input_ID = jQuery(".input_save_value").attr("id");
});

Da ich unheimlich viele <input>-Felder habe (gleiche Klassen, unterschiedliche ID's). speichere ich gleich noch die ID des <input>-Feldes in einer globalen Variable.
Nun die Idee, klickt der Nutzer auf den Button (auch hier unheimlich viele, haben gleiche Klasse, keine IDs), bekomme ich den Wert des <input>-Felds, quasi so dachte ich:

jQuery(".input_save_value_btn").click(function() {
    alert(  jQuery("#" + input_ID).val()  ) // spreche <input>-Feld mit seiner ID an ....... bekomme "undefined" als return
   alert( jQuery (".input_save_value" + "#"+ input_ID).val()  )  // auch "undefined"
}

Nun denkt man ja, er spricht das Element gar nicht an. Gibt man aber aus alert( jQuery("#" + input_ID) ) sagt er mir es ist eine [Object]. Also kennt er! Wieso nimmt er dann nicht das .val()? Es steht doch was drin als value? Und .text() geht übrigens auch nicht. Da kommt zwar kein "undefined" sondern einfach 'nichts', also wohl nen leerer String. Hoffe konnte die Problematik halbwegs verständlich verdeutlichen..

 

[Sven Mintel]

Gibt man aber aus alert( jQuery("#" + input_ID) ) sagt er mir es ist eine [Object]. Also kennt er!

Jo, kennt er...er kennt ein jQuery-Objekt, das alle Elemente enthält, die auf den Selektor passen.
Gibt es keine solchen Elemente, ist dies jQuery-Objekt leer, aber immer noch ein Objekt.

Probier es aus:

alert(jQuery('#michgibtsüberhauptnicht'));

Wenn du unheimlich viele Inputs und Buttons hast, musst die irgendwie eine Beziehung herstellen zwischen dem Button und dem dazu passenden Input ....so wie es jetzt ist, überlässt du alles dem Zufall(du wirst immer auf das 1. Input mit der entsprechenden Klasse zugreifen.)

Wie man diese Beziehung am Besten herstellt, lässt sich nicht sagen, ohne mehr über die Sache zu wissen.

 

[marcel_t]

....so wie es jetzt ist, überlässt du alles dem Zufall(du wirst immer auf das 1. Input mit der entsprechenden Klasse zugreifen.)

ok das klingt verständlich. Ich dachte halt wenn ich als Selektor die ID (und im zweiten Versuch sogar zusätzlich noch die Klasse) angebe, dass es dann klar ist, welches <input>-Feld ich anspreche.

Wie man diese Beziehung am Besten herstellt, lässt sich nicht sagen, ohne mehr über die Sache zu wissen.

Vielleicht hierfür mal den Ausschnitt aus dem SMARTY-Template:

<div class="outerDIV">
   <input class="save_input_value" id="employeeID={$line.employeeid}&day={$daykey}" value="{$user_input.link}"/>
   <a class="input_save_value_btn" href="{$user_input.savevalues}"><span>Wert &Uuml;bernehmen</span></a>
   <span class="ausgabe">{$user_input.link}</span>
</div>

Mit "unheimlich viel" meine ich, dass die Elemente abhängig sind, welche Auswahl der Nutzer trifft (geht um Zeitspanne, wählt er 100 Tage sind es 100 <input>-Felder bspw. und in meinem Fall oben quasi 100 div-Container mit dem angegebenem Inhalt ) Die ID der <input>-Felder generiert sich aus den Werten einer for-schleife, also alle ID's sind einmalig/eindeutig. Erkennst du eine sinnvolle Beziehung/Abhängigkeit? Eventuell den Buttons auch eine ID zuweisen? Wenn ich nur schon etwas mehr Ahnung hätte von JQuery..

 

[Sven Mintel]

Vielleicht hierfür mal den Ausschnitt aus dem SMARTY-Template:

Das ist doch eine 1A Beziehung

beide(Button und Input) haben das selbe Elternelement, anhand dieser Tatsache kann man beim Klick auf das zum geklickten Button passende Input zugreifen:

jQuery(".input_save_value_btn")
  .click( function(e) 
          {
            alert($(this).parent().find(".save_input_value").val());
          }
        );

 

[marcel_t]

Ich geh in einer Stunde zur Mittagspause, wenn das hier nicht so virtuell wäre würde ich dir glatt ein ausgeben! es funktioniert!! Danke!!