Wie erhalte ich den Wert eines Texteingabefeldes mit JavaScript?

Question

Ich arbeite gerade an einer Suche mit JavaScript. Ich würde ein Formular verwenden, aber das bringt etwas anderes auf meiner Seite durcheinander. Ich habe dieses Eingabe-Textfeld:

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

Und dies ist mein JavaScript-Code:

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

Wie kann ich den Wert aus dem Textfeld in JavaScript übertragen?

Answer 1

Kurz

Sie können den Wert lesen durch searchTxt.value

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

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

<!-- SHORT ugly test code -->
<button class="search" onclick="searchURL()">Search</button>

Answer 2

Wenn Ihr input ist in einer form und Sie möchten den Wert nach dem Senden erhalten, können Sie wie folgt vorgehen:

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

Der Vorteil dieses Weges: Beispiel Ihrer Seite haben 2 form zur Eingabe sender et receiver Informationen.

Wenn Sie verwenden nicht form für get value dann

• Sie können zwei verschiedene id (oder tag ou name ...) für jedes Feld wie sender-name et receiver-name , sender-address et receiver-address , ...
• Wenn Sie für zwei Eingänge denselben Wert einstellen, dann wird nach getElementsByName (oder getElementsByTagName ...) müssen Sie daran denken, dass 0 oder 1 ist sender ou receiver . Später, wenn Sie die Reihenfolge von 2 form in HTML, müssen Sie diesen Code erneut überprüfen

Wenn Sie verwenden form dann können Sie name , address , ...

Answer 3

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

Answer 4

Sie können verwenden onkeyup wenn Sie mehr als ein Eingabefeld haben. Nehmen wir an, Sie haben vier oder eine Eingabe. Dann document.getElementById('something').value ist ärgerlich. Wir müssen vier Zeilen schreiben, um den Wert eines Eingabefeldes abzurufen.

Sie können also eine Funktion erstellen, die bei einem Keyup- oder Keydown-Ereignis einen Wert im Objekt speichert.

Exemple :

<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 the first name from the object
        console.log(data); // return object
    }
</script>

Answer 5

Getestet in Chrome und Firefox:

Wert nach Element-ID abrufen:

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

Wert im Formularelement setzen:

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

Sehen Sie sich auch an eine JavaScript-Rechner-Implementierung .

Von @bugwheels94: Wenn Sie diese Methode verwenden, sollten Sie Folgendes beachten dieses Thema .