2012-08-08 9 views
51

Mam dane wejściowe HTML z linkiem w wartości.Zmiana .val. JQuery nie zmienia wartości wejściowej

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

Używam jQuery do zmiany wartości określonego zdarzenia.

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

Powyższy kod zmienia wartość w polu tekstowym, ale nie zmienia wartości w kodzie (wartość = „http://www.link.com” pozostaje bez zmian). Potrzebuję również zmiany wartości = "".

+0

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

+0

Korzystanie z elementu inspekcji Chrome. – Lukas

+2

@Luke Wartość zmieni się, ale widoczna wartość elementu HTML w inspektorze Chrome nie będzie widoczna. Spróbuj wysłać alert do wartości lub przesłać go do konsoli, a zobaczysz, że się zmieniło. Zobacz, to się zmieniło: http://jsfiddle.net/a8SxF/ – TheZ

Odpowiedz

105

Zamiast tego użyj attr.
$('#link').attr('value', 'new value');

demo

+4

To jest całkowicie poprawne, używając 'setAttribute' lub jQuery' attr' również wpłyniesz na wartość elementu DOM: http://jsfiddle.net/a8SxF/1/ – TheZ

+3

@TheZ, ponieważ jest to flaga brudnej wartości wejściowej o wartości false. Spróbuj wejść w interakcję z wejściem (wartość jest brudna po wprowadzeniu danych przez użytkownika), a następnie setAttribute – Esailija

+0

@Eailailija Wow, to bardzo wyjaśnia. Właśnie wtedy, gdy myślałem, że nie może być więcej typów gotch xD – TheZ

9

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

+0

To wyjaśnia. Wpisywanie również nie zmienia , ale wpływa na wynik $ ("# a"). Val(). Pytanie tylko, aby się upewnić: Czy $ ("# a").val (wartość) naprawdę poprawny sposób zmiany wartości elementu wejściowego, tak, że zostanie przesłana właściwa wartość? –

+0

Tak, zgadza się. zmiana atrybutu nie zmieni tego, co jest przesyłane. –

0
<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'> 
+1

Tak, to doesn ' t zaktualizuj ac wartość jednakowa. Aktualizuje pole tekstowe na ekranie, ale przy próbie przesłania formularza wartość jest taka, jaka była, gdy strona została pierwotnie załadowana. – Grant

1

To jest tylko możliwy scenariusz, który mi się stało. Jeśli komuś pomaga, to świetnie: napisałem skomplikowaną aplikację, która gdzieś wzdłuż kodu 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 ("value"), ale nie zauważyłem, że zaraz potem wywołałem metodę ClearAllInputs ... więc to też może się zdarzyć.

2

rozwinąć trochę na odpowiedź Ricarda: https://stackoverflow.com/a/11873775/7672426

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

o val()

Ustawienie wartości za pomocą tej metody (lub za pomocą właściwości wartość natywną) nie powoduje wysyłania zdarzenia zmiany. Z tego powodu odpowiednie programy obsługi zdarzeń nie zostaną wykonane. Jeśli chcesz je wykonać, powinieneś zadzwonić .trigger ("zmień") po ustawieniu wartości.

0

Mój podobny problem został spowodowany przez umieszczenie w selektorze znaków specjalnych (np. Kropek).

poprawka została do ucieczki znaków specjalnych:

$("#dots\\.er\\.bad").val("mmmk"); 
Powiązane problemy