Die Änderung von jQuery .val ändert den Eingabewert nicht

103

Ich habe eine HTML-Eingabe mit einem Link im Wert.

<input type = 'text' value = 'http://www.link.com' id = 'link' />

Ich verwende jQuery, um den Wert für ein bestimmtes Ereignis zu ändern.

$('#link').val('new value');

Der obige Code ändert den Wert des Textfelds, jedoch nicht den Wert im Code (value = 'http://www.link.com' bleibt unverändert). Ich brauche den Wert = '', um mich ebenfalls zu ändern.

javascript jquery Lukas
quelle
Was meinst du damit in the code? Betrachten Sie die ursprüngliche (also unveränderte) Quelle der Seite?
Frédéric Hamidi
Verwenden des Inspect-Elements von Chrome.
Lukas
3
@Luke Der Wert ändert sich, der sichtbare Wert des HTML-Elements im Inspektor von Chrome jedoch nicht. Versuchen Sie dann, den Wert zu benachrichtigen oder an die Konsole auszugeben, und Sie werden sehen, dass er sich geändert hat. Siehe, es hat sich geändert: jsfiddle.net/a8SxF
TheZ
Ja, das sehe ich jetzt. Ich verwende zClip, um den Wert in die Zwischenablage zu kopieren, aber es kopiert den alten Wert, nachdem er geändert wurde. Ich denke, ich kann es mit ein wenig Durcheinander beheben.
Lukas
1
Mögliches Duplikat der html () -Methode falsch, wenn sich der Eingabewert geändert hat
Esailija

Antworten:

177

Verwenden Sie attrstattdessen.
$('#link').attr('value', 'new value');

Demo

Ricardo Alvaro Lohmann
quelle
6
Dies ist völlig korrekt. Wenn Sie setAttributeoder jQuery's verwenden, wirken attrSie sich auch auf den Wert des DOM-Elements aus: jsfiddle.net/a8SxF/1
TheZ
4
@TheZ, weil das Dirty-Value-Flag der Eingabe falsch ist. Versuchen Sie, mit der Eingabe zu interagieren (der Wert ist nach Benutzereingaben verschmutzt) und setzen Sie dann Attribut
Esailija
5
Aber wenn Sie HTML mit bekommen wollen .html(), dann wird es immer noch den gleichen alten Wert geben, egal ob Sie verwenden .val('new value')oder attr('value', 'new value')... :(
Legionar
6
Codierte eine riesige und komplizierte Reihe von Funktionen mit .val (wie von allem, was ich zuvor gelesen habe, vorgeschlagen) und hatte genau das gleiche Problem. Verdammt nervig! Diese Antwort sollte die erste Anlaufstelle für alle jQuery-Neulinge sein, die Formularelemente dynamisch aktualisieren möchten. Hätte mir ein paar Stunden gespart, wenn ich das zuerst gelesen hätte!
Grant
2
Aus diesem Grund ist es so schwierig, mit JavaScript / JQuery Fuß zu fassen, so viele Einschränkungen wie diese. Das hat mir sehr geholfen. Danke dir!
eaglei22
13

Durch Ändern der value-Eigenschaft wird das nicht geändert defaultValue. Im Code (abgerufen mit .html()oder innerHTML) enthält das value-Attribut defaultValuedie Eigenschaft value und nicht value.

Kevin B.
quelle
1
Das erklärt es. Die Eingabe ändert auch nicht den <input id = 'a' value>, wirkt sich jedoch auf das Ergebnis von $ ("# a"). Val () aus. Eine Frage, nur um sicherzugehen: Ist $ ("# a"). Val (Wert) wirklich die richtige Methode, um den Wert eines Eingabeelements so zu ändern, dass der richtige Wert übermittelt wird?
Daniel Katz
1
Ja, das ist richtig. Durch Ändern des Attributs wird nicht geändert, was gesendet wird.
Kevin B
8

um Ricardos Antwort etwas zu erweitern: https://stackoverflow.com/a/11873775/7672426

http://api.jquery.com/val/#val2

über val ()

Das Festlegen von Werten mit dieser Methode (oder mit der systemeigenen Werteigenschaft) führt nicht zum Versand des Änderungsereignisses. Aus diesem Grund werden die entsprechenden Ereignishandler nicht ausgeführt. Wenn Sie sie ausführen möchten, sollten Sie nach dem Festlegen des Werts .trigger ("change") aufrufen.

Landan Jackson
quelle
2

Dies ist nur ein mögliches Szenario, das mir passiert ist. Nun, wenn es jemandem hilft, dann großartig: Ich habe eine komplizierte App geschrieben, die irgendwo entlang des Codes eine Funktion verwendet hat, um alle Textfeldwerte zu löschen, bevor sie angezeigt werden. Einige Zeit später habe ich versucht, einen Textfeldwert mit jquery val ('value') festzulegen, aber ich habe nicht bemerkt, dass ich gleich danach die ClearAllInputs-Methode aufgerufen habe. Dies könnte also auch passieren.

Amira
quelle
0

Mein ähnliches Problem wurde durch Sonderzeichen (z. B. Punkte) in der Auswahl verursacht.

Die Lösung bestand darin, den Sonderzeichen zu entkommen:

$("#dots\\.er\\.bad").val("mmmk");
WiredIn
quelle
Einverstanden, sehr schlecht, du solltest nicht entkommen, du solltest die ID deines Elements umbenennen.
Webaholik
-1 
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
function changes() {
$('#link').val('new value');
}
</script>
<button onclick="changes()">a</button>
<input type='text' value='http://www.link.com' id='link'>
ikerya
quelle
1
Ja, dies aktualisiert jedoch nicht den tatsächlichen Wert. Das Textfeld auf dem Bildschirm wird aktualisiert. Wenn Sie jedoch versuchen, ein Formular zu senden, entspricht der Wert dem Wert, als die Seite ursprünglich geladen wurde.
Grant
-1

Für mich war das Problem, dass das Ändern des Werts für dieses Feld nicht funktioniert hat:

$('#cardNumber').val(maskNumber);

Keine der oben genannten Lösungen hat bei mir funktioniert, daher habe ich weiter nachgeforscht und festgestellt:

Gemäß DOM Level 2-Ereignisspezifikation: Das Änderungsereignis tritt auf, wenn ein Steuerelement den Eingabefokus verliert und sein Wert seit dem Erhalt des Fokus geändert wurde. Das bedeutet, dass das Änderungsereignis so konzipiert ist, dass es bei Änderungen durch Benutzerinteraktion ausgelöst wird. Programmatische Änderungen führen nicht dazu, dass dieses Ereignis ausgelöst wird.

Die Lösung bestand darin, die Triggerfunktion hinzuzufügen und ein Änderungsereignis wie folgt auszulösen:

$('#cardNumber').val(maskNumber).trigger('change');
Ivan Jancic
quelle
-2

Überprüfen Sie mehr als ein Element mit nicht eindeutiger ID! Das war meine Situation mit jeder Schleife und der Verdoppelung meiner Ausweise.

Stefan Pawlow
quelle