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

Antwoord 5

U kunt ook namen noemen, zoals deze: form_name.input_name.value;
U krijgt dus de specifieke waarde van bepaalde invoer in een specifieke vorm.


Antwoord 6

Probeer deze eens

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

Antwoord 7

Getest in Chrome en Firefox:

Waarde ophalen op element-ID:

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

Waarde instellen in formulierelement:

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

Bekijk ook een implementatie van een JavaScript-calculator: http:/ /www.4stud.info/web-programming/samples/dhtml-calculator.html

UPDATE van @bugwheels94: let bij het gebruik van deze methode op dit probleem.


Antwoord 8

Als uw input in een form is en u na het indienen waarde wilt krijgen, kunt u dit doen zoals

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

Voordeel van deze manier: uw pagina heeft bijvoorbeeld een 2 form voor invoer van informatie over de sender en receiver.

Als u form niet gebruikt om waarde op te halen, dan
– U kunt 2 verschillende id(of tag of name …) voor elk veld instellen, zoals sender-name en receiver-name, sender-address en receiver-address, …
– Als u dezelfde waarde voor invoer 2 instelt, moet u na getElementsByName (of getElementsByTagName …) onthouden dat 0 of 1 sender is of receiver. Als u later de volgorde van 2 form in html wijzigt, moet u deze code opnieuw controleren

Als u form gebruikt, dan kunt u name, address, …


Antwoord 9

Men kan de form.elements gebruiken om alle elementen in een formulier te krijgen. Als een element een id heeft, kan het worden gevonden met .namedItem(“id”). Voorbeeld:

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

Bron: w3schools


Antwoord 10

U kunt onkeyup gebruiken als u meer invoervelden heeft. Stel je hebt vier of input.then
document.getElementById('something').value is vervelend. we moeten 4 regels schrijven om de waarde van het invoerveld op te halen.

Je kunt dus een functie maken die waarde in object opslaat bij keyup- of keydown-gebeurtenis.

Voorbeeld:

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

Antwoord 11

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

Antwoord 12

eenvoudige js

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

Antwoord 13

U kunt de waarde lezen door

searchTxt.value

Antwoord 14

Probeer dit eens ..

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>

Antwoord 15

Dit is een flink aantal jaren geleden, maar jeetje, dit is te moeilijk gemaakt..

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

Dus in feite zal searchTxt.value de waarde van het invoerveld retourneren met id='searchTxt'.

Hopelijk helpt dat iemand in 2021.


Antwoord 16

Als u jQuery gebruikt, hoeft u alleen maar dit te doen door de plug-in formInteract te gebruiken:

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

Onderaan de pagina voegt u gewoon dit plug-inbestand toe en schrijft u deze code:

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

Of als u een geparameteriseerde URL gebruikt, gebruik dan dit:

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

Hier is de link naar het project https://bitbucket.org/ranjeet1985/forminteract

Je kunt deze plug-in voor veel doeleinden gebruiken, zoals het verkrijgen van de waarde van een formulier, het plaatsen van waarden in een formulier, het valideren van formulieren en nog veel meer. U kunt een voorbeeld van code zien in het index.html-bestand van het project.

Natuurlijk ben ik de auteur van dit project en iedereen is welkom om het te verbeteren.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Other episodes