Question Comment 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 y a 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?


623
2017-07-19 15:00


origine


Réponses:


Il existe plusieurs méthodes pour obtenir une valeur de zone de texte d'entrée directement (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   case désirée

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

Remarque: Les méthodes 2, 3, 4 et 6 retournent une collection d'éléments, utilisez donc [entier] pour obtenir l'occurrence désirée. Pour le premier élément, utilisez [0],   pour la deuxième utilisation 1, etc...

Méthode 2:

Utilisation    document.getElementsByClassName('class_name')[whole_number].value qui renvoie un 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].value qui renvoie également un HTMLCollection en direct

Par exemple,  document.getElementsByTagName("input")[0].value;, si c'est la première zone de texte dans votre page.

Méthode 4:

document.getElementsByName('name')[whole_number].value qui retourne aussi un NodeList en direct

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

Méthode 5:

Utilisez le puissant document.querySelector('selector').value qui 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 les éléments, mais retourne tous les éléments avec ce sélecteur comme un 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 en direct cliquez ici
  3. Différence entre NodeList et HTMLCollection cliquez ici

1328
2017-07-19 15:02



//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 le codepen. 


17
2017-11-04 22:34



Je voudrais créer 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;


13
2018-06-04 07:12



Aussi vous pouvez, appelez par des noms de tags, comme ceci: form_name.input_name.value; Vous aurez donc la valeur spécifique de l'entrée déterminée sous une forme spécifique.


11
2018-06-23 18:10



Vous devriez être capable de taper:

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

<script>
    var input = document.getElementById("searchTxt");

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

Je suis sûr qu'il existe de meilleurs moyens de le faire, mais celui-ci semble fonctionner dans tous les navigateurs, et il nécessite une compréhension minimale de JavaScript pour créer, améliorer et éditer.


7
2018-06-01 22:17



Essaye celui-là

<input type="text" onKeyup="trackChange(this.value)" id="myInput">
<script>
function trackChange(value)
{

window.open("http://www.google.co.in/search?output=search&q="+value)

}
</script>

3
2018-06-11 09:32



Testé dans Chrome et Firefox:

Obtenir de 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éfinir 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 coup d'oeil à une implémentation de calculatrice JavaScript: http://www.4stud.info/web-programming/samples/dhtml-calculator.html

UPDATE de @ bugwheels94: lors de l'utilisation de cette méthode soyez conscient de ce problème.


2
2018-04-26 10:47



On peut utiliser le formulaire.elements pour obtenir tous les éléments dans un formulaire. Si un élément a un identifiant, 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;

La source: w3schools


0
2017-07-04 07:29



Si vous utilisez jQuery, alors en utilisant plugin formInteract, vous avez juste besoin 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, il suffit d'inclure ce fichier plugin et d'écrire 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 le rendre meilleur.


-2
2018-02-05 05:47



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

-2
2018-03-07 17:47