Bagaimana cara mendapatkan nilai bidang input teks menggunakan JavaScript?

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?

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

//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.

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;

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.

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.

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>

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 .

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>

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

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, ...

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

js sederhana

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

Anda dapat membaca nilai dengan

searchTxt.value

function searchURL() {
   let txt = searchTxt.value;
   console.log(txt);
   // window.location = "http://www.myurl.com/search/" + txt; ...
}

document.querySelector('.search').addEventListener("click", ()=>searchURL());

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

<button class="search">Search</button>

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.