Bagaimana cara mendapatkan nilai bidang input teks menggunakan JavaScript?


873

Saya sedang mengerjakan pencarian dengan JavaScript. Saya akan menggunakan formulir, tetapi itu mengacaukan sesuatu yang lain di halaman saya. Saya memiliki bidang teks input 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 saya mendapatkan nilai dari bidang teks ke dalam JavaScript?

Jawaban:


1769

Ada berbagai metode untuk mendapatkan nilai kotak teks input secara langsung (tanpa membungkus elemen input di dalam elemen formulir):

Metode 1:

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

Sebagai contoh, document.getElementById("searchTxt").value;

 

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

Metode 2:

Gunakan document.getElementsByClassName('class_name')[whole_number].valueyang mengembalikan Live HTMLCollection

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

Metode 3:

Gunakan document.getElementsByTagName('tag_name')[whole_number].valueyang juga mengembalikan HTMLCollection langsung

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

Metode 4:

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

Misalnya, document.getElementsByName("searchTxt")[0].value; jika ini adalah kotak teks pertama dengan nama 'searchtext' di halaman Anda.

Metode 5:

Gunakan kuat document.querySelector('selector').valueyang menggunakan pemilih CSS untuk memilih elemen

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

Metode 6:

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

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

Dukung

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

Tautan yang bermanfaat

  1. Untuk melihat dukungan dari metode ini dengan semua bug termasuk lebih detailnya klik di sini
  2. Perbedaan antara koleksi statis dan koleksi langsung klik Di Sini
  3. Perbedaan Antara NodeList dan HTMLCollection klik Di Sini

IE8 mendukung QSA sejauh yang saya bisa lihat, itu hanya tidak mendukung pemilih CSS3 dalam string pemilih.
Fabrício Matté

@ FabrícioMatté saya baru saja memeriksa di sini quirksmode.org/dom/tests/basics.html#querySelectorAll dan itu memberi tahu saya bahwa itu tidak
bugwheels94

Menarik. Tes sederhana di IE8 untuk Win7 menunjukkan bahwa querySelectordidukung jsfiddle.net/syNvz/show dan QSA juga jsfiddle.net/syNvz/2/show
Fabrício Matté

1
Dokumen yang sangat membantu, disimpan untuk referensi. Terima kasih.
Andy

1
@GKislin Ah! Saya melihat. Senang bahwa saya tidak tahu tentang itu. Tetapi setelah membaca ini , saya merasa enggan untuk menambahkan suntingan ini ke jawabannya sekarang. Mungkin suatu hari nanti, saya akan menambahkannya dengan peringatan untuk menghindarinya. Salah satu alasan peringatan adalah ini . Jika Anda merasa itu benar-benar baik, maka editlah dengan peringatan atau tambahkan jawaban lain atas keinginan Anda :)
bugwheels94

33
//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 ini berfungsi dalam codepen.


Sementara saya menghargai kelengkapan jawaban yang diterima, saya menemukan jawaban ini dapat digunakan kembali: mengakses, dalam kode JS, nilai yang dimasukkan dalam elemen input teks DOM (kotak teks). Untuk detail, lihat jawaban saya, di tempat lain dalam Pertanyaan ini.
Victoria Stuart

17

Saya akan membuat variabel untuk menyimpan input seperti ini:

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

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

= "Your string" + input;


Jika Anda menginginkannya sebagai objek javascript yang tepat sehingga Anda dapat secara terprogram mengakses setiap properti, cukup lakukan: var input = JSON.parse (document.getElementById ("input_id"). Value);
JakeJ

15

Anda harus bisa mengetik:

var input = document.getElementById("searchTxt");

function searchURL() {
     window.location = "http://www.myurl.com/search/" + input.value;
}
<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 itu membutuhkan pemahaman minimal JavaScript untuk membuat, meningkatkan, dan mengedit.


14

Anda juga dapat, memanggil dengan nama tag, seperti ini: form_name.input_name.value; Jadi Anda akan memiliki nilai spesifik dari input yang ditentukan dalam bentuk tertentu.


Iya! Saya terkejut dengan kesederhanaan ini. Lihatlah realisasi kalkulator sederhana 4stud.info/web-programming/samples/dhtml-calculator.html Apakah ada referensi untuk fungsi javascript ini, karena saya sebelumnya saya selalu menggunakan jQuery atau getElementById
Grigory Kislin

5

Coba yang ini

<input type="text" onkeyup="trackChange(this.value)" id="myInput">
<script>
function trackChange(value) {
    window.open("http://www.google.com/search?output=search&q=" + value)
}
</script>

4

Diuji di Chrome dan Firefox:

Dapatkan nilai berdasarkan id elemen:

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

Tetapkan nilai 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: saat menggunakan metode ini waspadai masalah ini .


3

Anda dapat menggunakan onkeyup ketika Anda memiliki lebih banyak bidang input. Misalkan Anda memiliki empat atau input document.getElementById('something').value. Maka itu menjengkelkan. kita perlu menulis 4 baris untuk mengambil nilai bidang input.

Jadi, Anda bisa membuat fungsi yang menyimpan nilai di objek pada peristiwa 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>

2

Orang bisa menggunakan form.elements untuk mendapatkan semua elemen dalam formulir. Jika suatu elemen memiliki id itu dapat ditemukan dengan .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


2

Jika Anda inputberada di a formdan Anda ingin mendapatkan nilai setelah mengirimkan, Anda dapat melakukannya

<form onsubmit="submitLoginForm(event)">
    <input type="text" name="name">
    <input type="password" name="password">
    <input type="submit" value="Login">
</form>

<script type="text/javascript">

    function submitLoginForm(event){
        event.preventDefault();

        console.log(event.target['name'].value);
        console.log(event.target['password'].value);
    }
</script>

Manfaat cara ini: Contoh halaman Anda punya 2 form untuk input senderdan receiverinformasi.

Jika Anda tidak menggunakan formuntuk mendapatkan nilai, maka
- Anda dapat menetapkan 2 berbeda id(atau tagatau name...) untuk setiap bidang seperti sender-namedan receiver-name, sender-addressdan receiver-address, ...
- Jika Anda menetapkan nilai yang sama untuk 2 input, maka setelah getElementsByName(atau getElementsByTagName.. .) Anda harus ingat 0 atau 1 adalah senderatau receiver. Nanti jika Anda mengubah urutan 2 formdalam html, Anda perlu memeriksa kode ini lagi

Jika Anda menggunakan form, maka Anda dapat menggunakan name, address, ...


1
<input id="new" >
    <button  onselect="myFunction()">it</button>    
    <script>
        function myFunction() {
            document.getElementById("new").value = "a";    
        }
    </script>

1

js sederhana

function copytext(text) {
    var textField = document.createElement('textarea');
    textField.innerText = text;
    document.body.appendChild(textField);
    textField.select();
    document.execCommand('copy');
    textField.remove();
}

-2

Anda dapat membaca nilai dengan

searchTxt.value


-3

Jika Anda menggunakan jQuery maka dengan menggunakan plugin formInteract, Anda hanya perlu melakukan ini:

// 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 menggunakan URL berparameter maka 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, validasi formulir, dan banyak lagi. Anda dapat melihat beberapa contoh kode dalam file index.html proyek.

Tentu saja saya penulis proyek ini dan semuanya dipersilakan untuk membuatnya lebih baik.


7
Anda mungkin harus menyebutkan bahwa ini adalah plugin pribadi Anda.
Hanna

Ada kesalahan ketik dalam cuplikan kode. Di bagian kedua kode, kutipan ganda tidak ada.
Vincenzo
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.