Zmiana jQuery .val nie zmienia wartości wejściowej

103

Mam dane wejściowe HTML z linkiem w wartości.

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

Używam jQuery, aby zmienić wartość określonego zdarzenia.

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

Powyższy kod zmienia wartość pola tekstowego, ale nie zmienia wartości w kodzie (wartość = 'http://www.link.com' pozostaje niezmieniona). Potrzebuję również zmiany wartości = ''.

javascript jquery

— Lukas
źródło

Co masz na myśli in the code? Czy patrzysz na oryginalne (a więc niezmodyfikowane) źródło strony?

— Frédéric Hamidi

Korzystanie z elementu inspect Chrome.

— Lukas

3

@Luke Wartość się zmieni, ale widoczna wartość elementu HTML w inspektorze Chrome nie. Spróbuj następnie ostrzec wartość lub wyślij ją do konsoli, a zobaczysz, że się zmieniła. Widzisz, to się zmieniło: jsfiddle.net/a8SxF

— TheZ

Tak, teraz to rozumiem. Używam zClip do kopiowania wartości do schowka, ale kopiuje starą wartość po jej zmianie. Myślę, że mogę to naprawić przy odrobinie zamieszania.

— Lukas

1

możliwy duplikat metody html () jest nieprawidłowy, gdy wartość wejściowa uległa zmianie

— Esailija

177

Użyj attrzamiast tego.
$('#link').attr('value', 'new value');

próbny

— Ricardo Alvaro Lohmann
źródło

6

Jest to całkowicie poprawne, używając setAttributelub jQuery wpłynieszattr również na wartość elementu DOM: jsfiddle.net/a8SxF/1

— TheZ

4

@TheZ to dlatego, że flaga brudnej wartości wejścia jest fałszywa. Spróbuj wejść w interakcję z danymi wejściowymi (wartość jest brudna po wprowadzeniu danych przez użytkownika), a następnie

— ustaw atrybut

5

Ale jeśli chcesz pobrać html z .html(), nadal będzie ta sama stara wartość, nie ma znaczenia, jeśli użyjesz .val('new value')lub attr('value', 'new value')... :(

— Legionar

6

Zakodowałem ogromną i skomplikowaną grupę funkcji przy użyciu .val (jak sugeruje wszystko, co przeczytałem wcześniej) i miałem dokładnie ten sam problem. Cholernie irytujące! Ta odpowiedź powinna być pierwszym punktem do wezwania dla wszystkich początkujących użytkowników jQuery, którzy chcą dynamicznie aktualizować elementy formularza. Oszczędziłoby mi to dobre kilka godzin, gdybym przeczytał to jako pierwszy!

— Przyznaj

2

Dlatego tak trudno jest rozpocząć pracę z JavaScript / JQuery, tak wiele takich zastrzeżeń. To mi bardzo pomogło. Dziękuję Ci!

— eaglei 22

13

Zmiana właściwości value nie zmienia pliku defaultValue. W kodzie (pobranym za pomocą .html()lub innerHTML) atrybut value będzie zawierał właściwość defaultValue, a nie wartość.

— Kevin B.
źródło

1

To wyjaśnia to. Wpisanie również nie zmienia <input id = 'a' value>, ale wpływa na wynik $ ("# a"). Val (). Pytanie tylko dla pewności: czy $ ("# a"). Val (wartość) naprawdę jest poprawnym sposobem zmiany wartości elementu wejściowego, tak aby została przesłana właściwa wartość?

— Daniel Katz,

1

Tak to jest poprawne. zmiana atrybutu nie zmieni tego, co jest przesyłane.

— Kevin B

8

aby nieco rozwinąć odpowiedź Ricardo: https://stackoverflow.com/a/11873775/7672426

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

o val ()

Ustawienie wartości przy użyciu tej metody (lub przy użyciu natywnej właściwości value) nie powoduje wysłania zdarzenia change. Z tego powodu odpowiednie programy obsługi zdarzeń nie zostaną wykonane. Jeśli chcesz je wykonać, powinieneś wywołać .trigger ("change") po ustawieniu wartości.

— Landan Jackson
źródło

2

To tylko możliwy scenariusz, który mi się przydarzył. Cóż, jeśli komuś to pomoże, to świetnie: napisałem skomplikowaną aplikację, w której gdzieś w kodzie użyłem funkcji, aby wyczyścić wszystkie wartości pól tekstowych przed ich wyświetleniem. Jakiś czas później próbowałem ustawić wartość pola tekstowego za pomocą jquery val („wartość”), ale nie zauważyłem, że zaraz po tym wywołałem metodę ClearAllInputs… więc to też może się zdarzyć.

— amira
źródło

0

Mój podobny problem był spowodowany posiadaniem znaków specjalnych (np. Kropek) w selektorze.

Rozwiązaniem było uniknięcie znaków specjalnych:

$("#dots\\.er\\.bad").val("mmmk");

— WiredIn
źródło

Zgoda, bardzo źle, nie powinieneś uciekać, powinieneś zmienić nazwę swojego elementu.

— webaholik

0

$('#link').prop('value', 'new value');

— Raul
źródło

-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
źródło

1

Tak, to jednak nie aktualizuje rzeczywistej wartości. Aktualizuje pole tekstowe na ekranie, ale kiedy próbujesz przesłać formularz, wartość jest taka sama, jak była w momencie, gdy strona została pierwotnie załadowana.

— Przyznaj

-1

U mnie problem polegał na tym, że zmiana wartości tego pola nie zadziałała:

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

Żadne z powyższych rozwiązań nie zadziałało, więc zbadałem dalej i znalazłem:

Zgodnie ze specyfikacją zdarzenia DOM Level 2: Zdarzenie change występuje, gdy formant traci fokus wejściowy, a jego wartość została zmodyfikowana od czasu uzyskania fokusu. Oznacza to, że zdarzenie zmiany jest zaprojektowane tak, aby wywoływać zmianę w wyniku interakcji użytkownika. Zmiany programowe nie powodują uruchomienia tego zdarzenia.

Rozwiązaniem było dodanie funkcji wyzwalacza i spowodowanie wywołania zdarzenia zmiany w następujący sposób:

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

— Ivan Jancic
źródło

-2

Sprawdź dwukrotnie więcej niż jeden element z nieunikalnym identyfikatorem! To była moja sytuacja z pętlą foreach i powielaniem moich identyfikatorów.

— Stefana Pawłowa
źródło