jQuery .val change tidak mengubah nilai input

103

Saya memiliki input HTML dengan tautan di nilainya.

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

Saya menggunakan jQuery untuk mengubah nilai pada acara tertentu.

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

Kode di atas mengubah nilai kotak teks tetapi tidak mengubah nilai dalam kode (value = 'http://www.link.com' tetap tidak berubah). Saya membutuhkan nilai = '' untuk berubah juga.

javascript jquery

— Lukas
sumber

Apa yang Anda maksud dengan in the code? Apakah Anda melihat sumber halaman asli (dengan demikian, tidak dimodifikasi)?

— Frédéric Hamidi

Menggunakan elemen inspeksi Chrome.

— Lukas

3

@Luke Nilainya akan berubah, tetapi nilai elemen HTML yang terlihat di pemeriksa Chrome tidak. Coba lalu beri tahu nilai atau keluarkan ke konsol dan Anda akan melihatnya telah berubah. Lihat, itu telah berubah: jsfiddle.net/a8SxF

— TheZ

Ya, saya melihatnya sekarang. Saya menggunakan zClip untuk menyalin nilai ke clipboard tetapi menyalin nilai lama setelah diubah. Saya pikir saya bisa memperbaikinya dengan sedikit main-main.

— Lukas

1

kemungkinan duplikasi metode html () salah ketika nilai input berubah

— Esailija

177

Gunakan attrsebagai gantinya.
$('#link').attr('value', 'new value');

demo

— Ricardo Alvaro Lohmann
sumber

6

Ini sepenuhnya benar, dengan menggunakan setAttributeatau jQuery attrAnda juga akan memengaruhi nilai elemen DOM: jsfiddle.net/a8SxF/1

— TheZ

4

@TheZ itu karena flag nilai kotor input salah. Cobalah berinteraksi dengan input (nilainya kotor setelah input pengguna) dan kemudian setAttribute

— Esailija

5

Tapi ketika ingin mendapatkan html dengan .html(), maka akan tetap ada nilai lama yang sama, tidak masalah, jika Anda menggunakan .val('new value')atau attr('value', 'new value')... :(

— Legionar

6

Mengkodekan banyak fungsi yang besar dan rumit menggunakan .val (seperti yang disarankan oleh semua yang saya baca sebelumnya) dan memiliki masalah yang sama persis. Sangat menyebalkan! Jawaban ini harus menjadi titik panggilan pertama bagi pemula jQuery yang ingin memperbarui elemen formulir secara dinamis. Akan menghemat beberapa jam jika saya membaca ini dulu!

— Berikan

2

Inilah sebabnya mengapa sangat sulit untuk memulai dengan JavaScript / JQuery, begitu banyak peringatan seperti ini. Ini sangat membantu saya. Terima kasih!

— eaglei22

13

Mengubah properti nilai tidak mengubah defaultValue. Dalam kode (diambil dengan .html()atau innerHTML) atribut nilai akan berisi defaultValue, bukan properti nilai.

— Kevin B
sumber

1

Itu menjelaskannya. Mengetik juga tidak mengubah nilai <input id = 'a'> tetapi memengaruhi hasil $ ("# a"). Val (). Sebuah pertanyaan untuk memastikan: Apakah $ ("# a"). Val (value) benar-benar cara yang benar untuk mengubah nilai elemen masukan, sehingga nilai yang benar akan dikirimkan?

— Daniel Katz

1

Ya itu benar. mengubah atribut tidak akan mengubah apa yang dikirimkan.

— Kevin B

8

untuk sedikit memperluas jawaban Ricardo: https://stackoverflow.com/a/11873775/7672426

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

tentang val ()

Menetapkan nilai menggunakan metode ini (atau menggunakan properti nilai asli) tidak menyebabkan pengiriman peristiwa perubahan. Karena alasan ini, penangan kejadian yang relevan tidak akan dijalankan. Jika Anda ingin menjalankannya, Anda harus memanggil .trigger ("change") setelah menyetel nilainya.

— Landan Jackson
sumber

2

Ini hanya skenario yang mungkin terjadi pada saya. Nah jika itu membantu seseorang maka hebat: Saya menulis aplikasi rumit yang di suatu tempat di sepanjang kode saya menggunakan fungsi untuk menghapus semua nilai kotak teks sebelum menunjukkannya. Beberapa waktu kemudian saya mencoba untuk menetapkan nilai kotak teks menggunakan jquery val ('nilai') tetapi saya tidak memperhatikan bahwa setelah itu saya memanggil metode ClearAllInputs .. jadi, ini juga bisa terjadi.

— amira
sumber

0

Masalah serupa saya disebabkan oleh karakter khusus (misalnya titik) di pemilih.

Perbaikannya adalah melarikan diri dari karakter khusus:

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

— WiredIn
sumber

Setuju, sangat buruk, Anda tidak boleh melarikan diri, Anda harus mengganti nama id elemen Anda.

— 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
sumber

1

Ya, ini tidak memperbarui nilai sebenarnya. Ini memperbarui kotak teks di layar, tetapi ketika Anda mencoba untuk mengirimkan formulir, nilainya adalah apa pun itu ketika halaman pertama kali dimuat.

— Berikan

-1

Bagi saya masalahnya adalah mengubah nilai untuk bidang ini tidak berhasil:

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

Tidak ada solusi di atas yang berhasil untuk saya, jadi saya menyelidiki lebih lanjut dan menemukan:

Menurut Spesifikasi Peristiwa DOM Level 2: Peristiwa perubahan terjadi saat kontrol kehilangan fokus input dan nilainya telah diubah sejak mendapatkan fokus. Itu berarti bahwa peristiwa perubahan dirancang untuk mengaktifkan perubahan melalui interaksi pengguna. Perubahan terprogram tidak menyebabkan acara ini diaktifkan.

Solusinya adalah menambahkan fungsi pemicu dan menyebabkannya memicu peristiwa perubahan seperti ini:

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

— Ivan Jancic
sumber

-2

Periksa kembali untuk lebih dari satu elemen dengan id non-unik! Itu adalah situasi saya dengan foreach loop dan duplikasi id saya.

— Stefan Pavlov
sumber