Come posso ottenere il valore del campo di immissione testo usando JavaScript?

Sto lavorando a una ricerca con JavaScript. Vorrei usare un modulo, ma rovina qualcos'altro sulla mia pagina. Ho questo campo di testo di input:

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

E questo è il mio codice JavaScript:

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

Come posso ottenere il valore dal campo di testo in JavaScript?

Esistono vari metodi per ottenere direttamente un valore della casella di testo di input (senza avvolgere l'elemento di input all'interno di un elemento del modulo):

Metodo 1:

document.getElementById('textbox_id').value per ottenere il valore della casella desiderata

Per esempio, document.getElementById("searchTxt").value;

Nota: il metodo 2,3,4 e 6 restituisce una raccolta di elementi, quindi utilizzare [numero intero] per ottenere l'occorrenza desiderata. Per il primo elemento, usa [0], per il secondo usa 1 , e così via ...

Metodo 2:

Utilizzare document.getElementsByClassName('class_name')[whole_number].valuequale restituisce Live HTMLCollection

Ad esempio, document.getElementsByClassName("searchField")[0].value; se questa è la prima casella di testo nella tua pagina.

Metodo 3:

Utilizzare document.getElementsByTagName('tag_name')[whole_number].valueche restituisce anche una raccolta HTMLC live

Ad esempio, document.getElementsByTagName("input")[0].value; se questa è la prima casella di testo nella tua pagina.

Metodo 4:

document.getElementsByName('name')[whole_number].value che> restituisce anche una NodeList live

Ad esempio, document.getElementsByName("searchTxt")[0].value; se questa è la prima casella di testo con il nome "searchtext" nella tua pagina.

Metodo 5:

Usa il potente document.querySelector('selector').valueche utilizza un selettore CSS per selezionare l'elemento

Ad esempio, document.querySelector('#searchTxt').value; selezionato dall'id
document.querySelector('.searchField').value;selezionato dalla classe selezionata dal nome
document.querySelector('input').value;tagnato
document.querySelector('[name="searchTxt"]').value;selezionato dal nome

Metodo 6:

document.querySelectorAll('selector')[whole_number].value che utilizza anche un selettore CSS per selezionare gli elementi, ma restituisce tutti gli elementi con quel selettore come Nodelist statico.

Ad esempio, document.querySelectorAll('#searchTxt')[0].value; selezionato dall'id
document.querySelectorAll('.searchField')[0].value;selezionato dalla classe selezionata dal nome
document.querySelectorAll('input')[0].value; tagnato
document.querySelectorAll('[name="searchTxt"]')[0].value;selezionato dal nome

Supporto

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

Link utili

1. Per vedere il supporto di questi metodi con tutti i bug inclusi maggiori dettagli clicca qui
2. Differenza tra raccolte statiche e raccolte live fai clic qui
3. Differenza tra NodeList e HTMLCollection fare clic qui

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

Vedi questo funzionamento in codepen.

Vorrei creare una variabile per memorizzare l'input in questo modo:

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

E poi vorrei semplicemente usare la variabile per aggiungere il valore di input alla stringa.

= "Your string" + input;

Dovresti essere in grado di digitare:

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

Sono sicuro che ci sono modi migliori per farlo, ma questo sembra funzionare su tutti i browser e richiede una conoscenza minima di JavaScript per effettuare, migliorare e modificare.

Inoltre, puoi chiamare in base ai nomi dei tag, in questo modo: in questo form_name.input_name.value; modo avrai il valore specifico dell'input determinato in un modulo specifico.

Prova questo

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

Testato su Chrome e Firefox:

Ottieni valore per ID elemento:

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

Imposta valore nell'elemento modulo:

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

Dai un'occhiata anche all'implementazione del calcolatore JavaScript: http://www.4stud.info/web-programming/samples/dhtml-calculator.html

AGGIORNAMENTO da @ bugwheels94: quando si utilizza questo metodo, tenere presente questo problema .

Puoi usare onkeyup quando hai più campo di input. Supponiamo di averne quattro o input.en quindi document.getElementById('something').valuefastidioso. abbiamo bisogno di scrivere 4 righe per recuperare il valore del campo di input.

Pertanto, è possibile creare una funzione che memorizzi il valore nell'oggetto in caso di evento keyup o keydown.

Esempio :

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

È possibile utilizzare form.elements per ottenere tutti gli elementi in un modulo. Se un elemento ha id può essere trovato con .namedItem ("id"). Esempio:

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

Fonte: w3schools

Se sei inputin a forme vuoi ottenere valore dopo l'invio puoi fare come

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

Beneficio di questo modo: esempio la tua pagina ha 2 form per input sendere receiverinformazioni.

Se non si utilizza formper ottenere valore, allora
- È possibile impostare 2 diversi id(o tago name...) per ogni campo come sender-namee receiver-name, sender-addresse receiver-address, ...
- Se si imposta lo stesso valore per 2 input, quindi dopo getElementsByName(o getElementsByTagName.. .) devi ricordare che 0 o 1 è sendero receiver. Successivamente, se si modifica l'ordine di 2 formin HTML, è necessario ricontrollare questo codice

Se si utilizza form, allora si può usare name, address...

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

semplice js

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

Puoi leggere il valore di

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>

Se stai usando jQuery, allora usando plugin formInteract, devi solo fare questo:

// Just keep the HTML as it is.

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

Nella parte inferiore della pagina è sufficiente includere questo file plugin e scrivere questo codice:

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

Oppure, se si utilizza un URL con parametri, utilizzare questo:

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

Ecco il link al progetto https://bitbucket.org/ranjeet1985/forminteract

È possibile utilizzare questo plug-in per molti scopi come ottenere il valore di un modulo, inserire valori in un modulo, convalida dei moduli e molti altri. Puoi vedere alcuni esempi di codice nel file index.html del progetto.

Ovviamente sono l'autore di questo progetto e tutti sono invitati a migliorarlo.