Hoe krijg ik de waarde van het tekstinvoerveld met JavaScript?

Ik ben bezig met een zoekopdracht met JavaScript. Ik zou een formulier gebruiken, maar het verpest iets anders op mijn pagina. Ik heb dit invoertekstveld:

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

En dit is mijn JavaScript-code:

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

Hoe krijg ik de waarde uit het tekstveld in JavaScript?

Antwoord 1, autoriteit 100%

Er zijn verschillende methoden om direct een invoertekstvakwaarde te krijgen (zonder het invoerelement in een formulierelement te wikkelen):

Methode 1:

document.getElementById('textbox_id').value om de waarde van
gewenste doos

Bijvoorbeeld document.getElementById("searchTxt").value;

Opmerking: Methoden 2,3,4 en 6 retourneren een verzameling elementen, dus gebruik [whole_number] om het gewenste exemplaar te krijgen. Gebruik voor het eerste element [0],
gebruik voor de tweede 1, enzovoort…

Methode 2:

Gebruik
document.getElementsByClassName('class_name')[whole_number].value die een Live HTMLCollection retourneert

Bijvoorbeeld document.getElementsByClassName("searchField")[0].value; als dit het eerste tekstvak op uw pagina is.

Methode 3:

Gebruik document.getElementsByTagName('tag_name')[whole_number].value die ook een live HTMLCollection retourneert

Bijvoorbeeld document.getElementsByTagName("input")[0].value;, als dit het eerste tekstvak op uw pagina is.

Methode 4:

document.getElementsByName('name')[whole_number].value die ook >een live NodeList retourneert

Bijvoorbeeld document.getElementsByName("searchTxt")[0].value; als dit het eerste tekstvak met de naam ‘zoektekst’ op uw pagina is.

Methode 5:

Gebruik de krachtige document.querySelector('selector').value die een CSS-selector gebruikt om het element te selecteren

Bijvoorbeeld document.querySelector('#searchTxt').value; geselecteerd op id
document.querySelector('.searchField').value; geselecteerd op klasse
document.querySelector('input').value; geselecteerd op tagnaam
document.querySelector('[name="searchTxt"]').value; geselecteerd op naam

Methode 6:

document.querySelectorAll('selector')[whole_number].value die ook een CSS-selector gebruikt om elementen te selecteren, maar het retourneert alle elementen met die selector als een statische Nodelist.

Bijvoorbeeld document.querySelectorAll('#searchTxt')[0].value; geselecteerd op id
document.querySelectorAll('.searchField')[0].value; geselecteerd op klasse
document.querySelectorAll('input')[0].value; geselecteerd op tagnaam
document.querySelectorAll('[name="searchTxt"]')[0].value; geselecteerd op naam

Ondersteuning

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

Nuttige links

1. Klik hier om de ondersteuning van deze methoden met alle bugs en meer details te zien
2. Verschil tussen Statische collecties en Live collecties klik hier
3. Verschil tussen NodeList en HTMLCollection klik hier

Antwoord 2, autoriteit 2%

//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;
  }
}

Bekijk deze werking in codepen.

Antwoord 3

Ik zou een variabele maken om de invoer als volgt op te slaan:

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

En dan zou ik gewoon de variabele gebruiken om de invoerwaarde aan de string toe te voegen.

= "Your string" + input;

Antwoord 4

U zou moeten kunnen typen:

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

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

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

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

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

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

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

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

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

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

searchTxt.value

function handleValueChange() {
    var y = document.getElementById('textbox_id').value;
    var x = document.getElementById('result');
    x.innerHTML = y;
}
function changeTextarea() {
  var a = document.getElementById('text-area').value;
  var b = document.getElementById('text-area-result');
  b.innerHTML = a;
}

input {
  padding: 5px;
}
p {
  white-space: pre;
}

<input type="text" id="textbox_id" placeholder="Enter string here..." oninput="handleValueChange()">
<p id="result"></p>
<textarea name="" id="text-area" cols="20" rows="5" oninput="changeTextarea()"></textarea>
<p id="text-area-result"></p>

function searchURL() {
   window.location = 'http://www.myurl.com/search/' + searchTxt.value
}

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

// 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
});

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