Dapatkan nilai dalam kotak teks input

1004

Apa cara untuk mendapatkan dan merender nilai input menggunakan jQuery?

Ini satu:

$(document).ready(function() {
  $("#txt_name").keyup(function() {
    alert($(this).val());
  });
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<input type="text" id="txt_name" />

Bharanikumar
sumber
1
gunakan kode ini: var value = $ ('# txt_Name'). val (); Anda juga dapat mengatur nilai menggunakan jquery. silakan lihat posting ini di: coding-issues.blogspot.in/2013/10/…
Ranadheer Reddy

Jawaban:

1654
//Get
var bla = $('#txt_name').val();

//Set
$('#txt_name').val(bla);
Conrad
sumber
35
@ Prab, pertanyaannya adalah: "Apa cara untuk mendapatkan dan merender nilai input menggunakan jQuery?", Label bukan input.
Barry Michael Doyle
3
hapus tanda kutip dari 'bla'. Seharusnya $ ('# txt_name'). Val (bla);
Charles Xavier
9
@ ParbhuBissessar Belum tentu. Jika dia menginginkan teks literal 'bla', dia benar. Jika dia ingin valdari var blamaka dia perlu untuk menghapus tanda kutip.
double_j
perhatikan get's: "val ()" bukannya "val" Anda dapat melihat profil saya
TheRedstoneTaco
Saya melakukan ini tetapi memiliki masalah.
Wasey Raza
591

Anda hanya dapat memilih nilai dengan dua cara berikut:

// First way to get a value
value = $("#txt_name").val(); 

// Second way to get a value
value = $("#txt_name").attr('value');

Jika Anda ingin menggunakan JavaScript langsung untuk mendapatkan nilai, berikut adalah caranya:

document.getElementById('txt_name').value 
RJD22
sumber
6
Saya tahu ini pertanyaan yang lebih lama, tetapi jangan lupa bahwa attrmungkin juga diganti prop. Ini secara semantik lebih baik.
Sablefoste
Hanya $("#txt_name").val(str);bekerja untuk saya di Chrome untuk menetapkan nilai. Coba posting ini .
gkiko
Fungsi append jQuery tampaknya tidak memiliki masalah menambahkan ke HTML sambil menjaga nilai formulir.
Adam F
1
$ ("# txt_name"). attr ('value'); mengembalikan nilai / jawaban default salah!
zloctb
1
perlu diingat bahwa $("#txt_name").attr('value')akan selalu mengembalikan konten atribut "nilai", jadi jika Anda mengubah bidang input, nilainya tidak berubah. .val()akan selalu mengembalikan isi bidang ..
honk31
84

Ada satu hal penting untuk disebutkan:

$("#txt_name").val();

akan mengembalikan nilai real saat ini dari bidang teks, misalnya jika pengguna mengetik sesuatu di sana setelah memuat halaman.

Tapi:

$("#txt_name").attr('value')

akan mengembalikan nilai dari DOM / HTML.

Artur79
sumber
40

Anda bisa mendapatkan valueatribut secara langsung karena Anda tahu itu adalah <input>elemen, tetapi penggunaan Anda saat .val()ini sudah menjadi yang sekarang.

Untuk yang di atas, cukup gunakan .valuepada elemen DOM secara langsung, seperti ini :

$(document).ready(function(){
  $("#txt_name").keyup(function(){
    alert(this.value);
  });
});
Nick Craver
sumber
@ Bharan Mengapa Anda membutuhkan alternatif?
Doug Molineux
3
di beberapa tempat, saya ingin menggunakan alternatif,
Bharanikumar
16

Anda harus menggunakan berbagai cara untuk mendapatkan nilai saat ini dari elemen input.

METODE - 1

Jika Anda ingin menggunakan yang sederhana .val(), coba ini:

<input type="text" id="txt_name" />

Dapatkan nilai dari Input

// use to select with DOM element.
$("input").val();

// use the id to select the element.
$("#txt_name").val();

// use type="text" with input to select the element
$("input:text").val();

Tetapkan nilai ke Input

// use to add "text content" to the DOM element.
$("input").val("text content");

// use the id to add "text content" to the element.
$("#txt_name").val("text content");

// use type="text" with input to add "text content" to the element
$("input:text").val("text content");

METODE - 2

Gunakan .attr()untuk mendapatkan konten.

<input type="text" id="txt_name" value="" />

Saya hanya menambahkan satu atribut ke kolom input. value=""atribut adalah orang yang membawa konten teks yang kita masukkan di bidang input.

$("input").attr("value");

METODE - 3

Anda dapat menggunakan ini langsung pada inputelemen Anda .

$("input").keyup(function(){
    alert(this.value);
});
Simplans
sumber
15

Anda bisa mendapatkan nilai seperti ini:

this['inputname'].value

Dimana thismengacu pada form yang berisi input.

SO penuh dengan Monyet
sumber
8
Jawaban ini mengasumsikan thismengacu pada formulir yang berisi input.
nandan
15

Saya pikir fungsi ini tidak terjawab di sini di jawaban sebelumnya:

.val( function(index, value) ) 
dilip kumbham
sumber
6

Untuk mendapatkan nilai kotak teks, Anda dapat menggunakan val()fungsi jQuery .

Sebagai contoh,

$('input:textbox').val() - Dapatkan nilai kotak teks.

$('input:textbox').val("new text message") - Tetapkan nilai kotak teks.

Yuval
sumber
3

Bagi mereka yang menyukai saya adalah pemula di JS dan mendapatkan undefinedalih-alih nilai teks pastikan bahwa Anda idtidak mengandung karakter yang tidak valid .

Mikhail Sirotenko
sumber
3

Anda cukup mengatur nilai dalam kotak teks.

Pertama, Anda mendapatkan nilai suka

var getValue = $('#txt_name').val();

Setelah mendapatkan nilai yang ditetapkan dalam input suka

$('#txt_name').val(getValue);
Muddasir23
sumber
1

Coba ini. Pasti akan berhasil.

var userInput = $('#txt_name').attr('value')
H. Ostwal
sumber
Tidak, itu tidak akan terjadi !! (1) Jika tidak ada atribut "nilai" ( <input type="text" />), ia mengembalikan tidak terdefinisi. (2) Jika Anda melakukannya seperti ini <input type="text" value="test" />dan tipe pengguna foo di bidang input, $('#txt_name').attr('value')tes masih mengembalikan ".
ndsvw
Jawaban ini tidak benar tetapi ini adalah API yang saya cari.
Anthony