Comment puis-je obtenir la valeur du champ de saisie de texte en utilisant JavaScript?

Je travaille sur une recherche avec JavaScript. J'utiliserais un formulaire, mais il gâche quelque chose d'autre sur ma page. J'ai ce champ de texte de saisie:

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

Et voici mon code JavaScript:

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

Comment puis-je obtenir la valeur du champ de texte dans JavaScript?

Il existe différentes méthodes pour obtenir directement une valeur de zone de texte d'entrée (sans encapsuler l'élément d'entrée dans un élément de formulaire):

Méthode 1:

document.getElementById('textbox_id').value pour obtenir la valeur de la case souhaitée

Par exemple, document.getElementById("searchTxt").value;

Remarque: Les méthodes 2, 3, 4 et 6 renvoient une collection d'éléments, utilisez donc [numéro_entier] pour obtenir l'occurrence souhaitée. Pour le premier élément, utilisez [0], pour le second, utilisez 1 , etc.

Méthode 2:

Utilisation document.getElementsByClassName('class_name')[whole_number].valuequi renvoie une Live HTMLCollection

Par exemple, document.getElementsByClassName("searchField")[0].value; s'il s'agit de la première zone de texte de votre page.

Méthode 3:

Utilisation document.getElementsByTagName('tag_name')[whole_number].valuequi renvoie également une HTMLCollection en direct

Par exemple, document.getElementsByTagName("input")[0].value; s'il s'agit de la première zone de texte de votre page.

Méthode 4:

document.getElementsByName('name')[whole_number].value qui renvoie également une NodeList en direct

Par exemple, document.getElementsByName("searchTxt")[0].value; s'il s'agit de la première zone de texte portant le nom «searchtext» dans votre page.

Méthode 5:

Utilisez le puissant document.querySelector('selector').valuequi utilise un sélecteur CSS pour sélectionner l'élément

Par exemple, document.querySelector('#searchTxt').value; sélectionné par id
document.querySelector('.searchField').value;sélectionné par classe
document.querySelector('input').value;sélectionné par tagname
document.querySelector('[name="searchTxt"]').value;sélectionné par nom

Méthode 6:

document.querySelectorAll('selector')[whole_number].value qui utilise également un sélecteur CSS pour sélectionner des éléments, mais il renvoie tous les éléments avec ce sélecteur en tant que Nodelist statique.

Par exemple, document.querySelectorAll('#searchTxt')[0].value; sélectionné par id
document.querySelectorAll('.searchField')[0].value;sélectionné par classe
document.querySelectorAll('input')[0].value; sélectionné par tagname
document.querySelectorAll('[name="searchTxt"]')[0].value;sélectionné par nom

Soutien

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

Liens utiles

1. Pour voir le support de ces méthodes avec tous les bugs, y compris plus de détails, cliquez ici
2. Différence entre les collections statiques et les collections Live, cliquez ici
3. Différence entre NodeList et HTMLCollection cliquez ici

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

Voir ce fonctionnement dans codepen.

Je créerais une variable pour stocker l'entrée comme ceci:

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

Et puis j'utiliserais simplement la variable pour ajouter la valeur d'entrée à la chaîne.

= "Your string" + input;

Vous devriez pouvoir taper:

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

Je suis sûr qu'il existe de meilleures façons de le faire, mais celui-ci semble fonctionner sur tous les navigateurs, et il nécessite une compréhension minimale de JavaScript pour créer, améliorer et modifier.

Vous pouvez également appeler par des noms de balises, comme ceci: form_name.input_name.value; Ainsi, vous aurez la valeur spécifique de l'entrée déterminée sous une forme spécifique.

Essaye celui-là

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

Testé dans Chrome et Firefox:

Obtenir la valeur par identifiant d'élément:

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

Définissez la valeur dans l'élément de formulaire:

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

Jetez également un œil à l'implémentation d'une calculatrice JavaScript: http://www.4stud.info/web-programming/samples/dhtml-calculator.html

MISE À JOUR de @ bugwheels94: lorsque vous utilisez cette méthode, soyez conscient de ce problème .

Vous pouvez utiliser onkeyup lorsque vous avez plus de champ de saisie. Supposons que vous en ayez quatre ou une entrée, ce qui document.getElementById('something').valueest ennuyeux. nous devons écrire 4 lignes pour récupérer la valeur du champ de saisie.

Ainsi, vous pouvez créer une fonction qui stocke la valeur dans l'objet lors d'un événement keyup ou keydown.

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

On peut utiliser les form.elements pour obtenir tous les éléments d'un formulaire. Si un élément a un id, il peut être trouvé avec .namedItem ("id"). Exemple:

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

Source: w3schools

Si vous êtes inputdans un formet que vous souhaitez obtenir de la valeur après la soumission, vous pouvez faire comme

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

Avantage de cette façon: Exemple, votre page en a 2 form pour la saisie senderet l' receiverinformation.

Si vous n'utilisez pas formpour obtenir la valeur, alors
- Vous pouvez définir 2 différents id(ou tagou name...) pour chaque champ comme sender-nameet receiver-name, sender-addresset receiver-address, ...
- Si vous définissez la même valeur pour 2 entrées, puis après getElementsByName(ou getElementsByTagName.. .) vous devez vous rappeler que 0 ou 1 est senderou receiver. Plus tard, si vous modifiez l'ordre de 2 formen html, vous devez vérifier à nouveau ce code

Si vous utilisez form, vous pouvez utiliser name, address...

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

js simple

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

Vous pouvez lire la valeur en

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>

Si vous utilisez jQuery puis en utilisant le plugin formInteract, il vous suffit de faire ceci:

// Just keep the HTML as it is.

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

Au bas de la page, incluez simplement ce fichier de plugin et écrivez ce 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
});

Ou si vous utilisez une URL paramétrée, utilisez ceci:

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

Voici le lien vers le projet https://bitbucket.org/ranjeet1985/forminteract

Vous pouvez utiliser ce plugin à de nombreuses fins, comme obtenir la valeur d'un formulaire, mettre des valeurs dans un formulaire, valider des formulaires et bien d'autres. Vous pouvez voir un exemple de code dans le fichier index.html du projet.

Bien sûr, je suis l'auteur de ce projet et tous sont les bienvenus pour l'améliorer.