Bagaimana cara mendapatkan nilai kolom input teks menggunakan javascript?

Saya sedang mengerjakan pencarian menggunakan javascript. Saya akan menggunakan formulir, tetapi pada halaman saya itu merusak segalanya. Saya memiliki bidang entri teks ini:

 <input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/> 

Dan ini adalah kode javascript saya:

 <script type="text/javascript"> function searchURL(){ window.location = "http://www.myurl.com/search/" + (input text value); } </script> 

Bagaimana cara mendapatkan nilai dari bidang teks dalam javascript?

697
19 июля '12 в 18:00 2012-07-19 18:00 user979331 diatur pada 19 Juli '12 pada jam 6:00 malam 2012-07-19 18:00
@ 12 jawaban

Ada berbagai metode untuk mendapatkan nilai bidang teks input secara >

Metode 1:

document.getElementById('textbox_id').value untuk mendapatkan nilai dari bidang yang diinginkan

Misalnya, document.getElementById("searchTxt").value;

Catatan: Metode 2,3,4 dan 6 mengembalikan koleksi item, jadi gunakan [whole_number] untuk mendapatkan acara yang diinginkan. Untuk elemen pertama, gunakan [0], untuk elemen kedua, gunakan 1 , dll ...

Metode 2:

Gunakan document.getElementsByClassName('class_name')[whole_number].value , yang mengembalikan Live HTMLCollection

Misalnya, document.getElementsByClassName("searchField")[0].value; jika ini adalah bidang teks pertama pada halaman Anda.

Metode 3:

Gunakan document.getElementsByTagName('tag_name')[whole_number].value , yang juga mengembalikan HTMLCollection >

Misalnya, document.getElementsByTagName("input")[0].value; jika ini adalah bidang teks pertama pada halaman Anda.

Metode 4:

document.getElementsByName('name')[whole_number].value , yang juga> mengembalikan NodeList >

Misalnya, document.getElementsByName("searchTxt")[0].value; jika ini adalah bidang teks pertama yang disebut "pencarian teks" di halaman Anda.

Metode 5:

Gunakan document.querySelector('selector').value , yang menggunakan pemilih CSS untuk memilih elemen

Misalnya, document.querySelector('#searchTxt').value; id yang dipilih
document.querySelector('.searchField').value; dipilih berdasarkan kelas
document.querySelector('input').value; tag dipilih
document.querySelector('[name="searchTxt"]').value; dipilih berdasarkan nama

Metode 6:

document.querySelectorAll('selector')[whole_number].value , yang juga menggunakan pemilih CSS untuk memilih elemen, tetapi mengembalikan semua elemen dengan pemilih ini sebagai nodelist statis.

Misalnya, document.querySelectorAll('#searchTxt')[0].value; id yang dipilih
document.querySelectorAll('.searchField')[0].value; dipilih berdasarkan kelas
document.querySelectorAll('input')[0].value; tag dipilih
document.querySelectorAll('[name="searchTxt"]')[0].value; dipilih berdasarkan nama

Dukungan

 Browser Method1 Method2 Method3 Method4 Method5/6 IE6 Y(Buggy) NYY(Buggy) N IE7 Y(Buggy) NYY(Buggy) N IE8 YNYY(Buggy) Y IE9 YYYY(Buggy) Y IE10 YYYYY FF3.0 YYYYN IE=Internet Explorer FF3.5/FF3.6 YYYYY FF=Mozilla Firefox FF4b1 YYYYY GC=Google Chrome GC4/GC5 YYYYYY=YES,N=NO Safari4/Safari5 YYYYY Opera10.10/ Opera10.53/ YYYY(Buggy) Y Opera10.60 Opera 12 YYYYY 

Tautan yang bermanfaat

1482
19 июля '12 в 18:02 2012-07-19 18:02 jawabannya diberikan oleh bugwheels94 19 Juli, '12 pukul 18:02 2012-07-19 18:02
 //creates a listener for when you press a key window.onkeyup = keyup; //creates a global Javascript variable var inputTextValue; function keyup(e) { //setting your input text to the global Javascript Variable for every key press inputTextValue = e.target.value; //listens for you to press the ENTER key, at which point your web address will change to the one you have input in the search box if (e.keyCode == 13) { window.location = "http://www.myurl.com/search/" + inputTextValue; } } 

Lihat cara kerjanya di codephen.

19
05 нояб. jawabannya diberikan maudulus 05 Nov. 2014-11-05 01:34 '14 pada 1:34 2014-11-05 01:34

Saya akan membuat variabel untuk menampung input sebagai berikut:

 var input = document.getElementById("input_id").value; 

Dan kemudian saya hanya akan menggunakan variabel untuk menambahkan nilai input ke string.

= "Your string" + input;

13
04 июня '15 в 10:12 2015-06-04 10:12 jawabannya diberikan oleh Vadim Tatarnikov pada 04 Juni '15 pukul 10:12 2015-06-04 10:12

Anda juga dapat memanggil nama tag, misalnya: form_name.input_name.value; Dengan demikian, Anda akan memiliki nilai spesifik dari input tertentu dalam bentuk tertentu.

12
23 июня '14 в 21:10 2014-06-23 21:10 jawabannya diberikan oleh user3768564 pada 23 Juni '14 pukul 21:10 2014-06-23 21:10

Anda harus bisa mengetik:

 <input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/> 

Saya yakin ada cara yang lebih baik untuk melakukan ini, tetapi yang ini tampaknya berfungsi di semua browser, dan pemahaman minimal JavaScript diperlukan untuk membuat, meningkatkan, dan mengedit.

7
02 июня '14 в 1:17 2014-06-02 01:17 jawabannya diberikan oleh Fredrik A. 02 Juni '14 di 1:17 2014-06-02 01:17

Coba ini

 <input type="text" onKeyup="trackChange(this.value)" id="myInput"> <script> function trackChange(value) { window.open("http://www.google.co.in/search?output=search } </script> 
3
11 июня '13 в 12:32 2013-06-11 12:32 jawabannya diberikan oleh Hari Das pada 11 Juni '13 di 12:32 2013-06-11 12:32

Diuji di Chrome dan Firefox:

Dapatkan nilai berdasarkan id item:

 <input type="text" maxlength="512" id="searchTxt" class="searchField"/> <input type="button" value="Get Value" onclick="alert(searchTxt.value)"> 

Nilai yang ditetapkan dalam elemen formulir:

 <form name="calc" id="calculator"> <input type="text" name="input"> <input type="button" value="Set Value" onclick="calc.input.value='Set Value'"> </form> 

https://jsfiddle.net/tuq79821/

Lihat juga implementasi kalkulator JavaScript: http://www.4stud.info/web-programming/samples/dhtml-calculator.html

PEMBARUAN dari @ bugwheels94: ketika menggunakan metode ini Anda harus tahu masalah ini .

2
26 апр. GKislin menjawab pada 26 April 2017-04-26 13:47 '17 pada pukul 1:47 siang 2017-04-26 13:47

Anda bisa menggunakan form.elements untuk mendapatkan semua elemen dalam formulir. Jika item memiliki pengidentifikasi, item tersebut dapat ditemukan menggunakan. NamedItem ("id"). Contoh:

 var myForm = document.getElementById("form1"); var text = myForm.elements.namedItem("searchTxt").value; var url = "http://www.myurl.com/search/" + text; 

Sumber: w3schools

1
04 июля '18 в 10:29 2018-07-04 10:29 Balasan diberikan oleh Valter Ekholm pada 04 Juli 18 di 10:29 2018-07-04 10:29

Anda dapat menggunakan onkeyup ketika Anda memiliki lebih banyak bidang input. Misalkan Anda memiliki empat atau input. Lalu document.getElementById('something').value GetElementById document.getElementById('something').value Nilainya mengganggu. kita perlu menulis 4 baris untuk mendapatkan nilai dari kolom input.

Dengan demikian, Anda bisa membuat fungsi yang menyimpan nilai dalam suatu objek di acara keyup atau keydown.

Contoh:

 <div class="container"> <div> <label for="">Name</label> <input type="text" name="fname" id="fname" onkeyup=handleInput(this)> </div> <div> <label for="">Age</label> <input type="number" name="age" id="age" onkeyup=handleInput(this)> </div> <div> <label for="">Email</label> <input type="text" name="email" id="email" onkeyup=handleInput(this)> </div> <div> <label for="">Mobile</label> <input type="number" name="mobile" id="number" onkeyup=handleInput(this)> </div> <div> <button onclick=submitData()>Submit</button> </div> </div> 

Javascript:

 <script> const data={ }; function handleInput(e){ data[e.name] = e.value; } function submitData(){ console.log(data.fname); //get first name from object console.log(data); //return object } </script> 
0
11 дек. Jawabannya diberikan oleh Dhruv Raval 11 Des. 2018-12-11 08:12 '18 jam 8:12 pagi 2018-12-11 08:12
 <input id="new" > <button onselect="myFunction()">it</button> <script> function myFunction() { document.getElementById("new").value = "a"; } </script> 
0
07 марта '18 в 20:47 2018-03-07 20:47 Jawaban diberikan oleh Davinder Singh pada 07 Maret '18 pada 20:47 2018-03-07 20:47

js sederhana

 function copytext(text) { var textField = document.createElement('textarea'); textField.innerText = text; document.body.appendChild(textField); textField.select(); document.execCommand('copy'); textField.remove(); } 
0
17 янв. Balas diberikan oleh Ricardo Luis Zuluaga Salazar pada 17 Jan 2019-01-17 16:14 '19 jam 16:14 2019-01-17 16:14

Jika Anda menggunakan jQuery, lalu menggunakan plugin formInteract, Anda hanya perlu melakukannya:

 // Just keep the HTML as it is. <input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/> 

Di bagian bawah halaman, cukup sertakan file plugin ini dan tulis kode ini:

 // Initialize one time at the bottom of the page. var search= $("#searchTxt).formInteract(); search.getAjax("http://www.myurl.com/search/", function(rsp){ // Now do whatever you want to with your response }); 

Atau, jika Anda menggunakan URL parameter, gunakan ini:

 $.get("http://www.myurl.com/search/"+search.get().searchTxt, {}, function(rsp){ // Now do work with your response; }) 

Berikut ini tautan ke proyek https://bitbucket.org/ranjeet1985/forminteract

Anda dapat menggunakan plugin ini untuk banyak tujuan, seperti mendapatkan nilai formulir, memasukkan nilai ke dalam formulir, memvalidasi formulir, dan banyak lagi. Anda dapat melihat kode sampel di file index.html proyek.

Tentu saja, saya adalah penulis proyek ini, dan semua orang dapat melakukannya dengan lebih baik.

-3
05 февр. balasan diberikan kepada Ranjeet Rana 05 Feb. 2015-02-05 08:47 '15 pada 8:47 2015-02-05 08:47

Pertanyaan lain tentang tag atau Ajukan pertanyaan