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].value
qui 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].value
qui 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').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 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
- Pour voir le support de ces méthodes avec tous les bugs, y compris plus de détails, cliquez ici
- Différence entre les collections statiques et les collections Live, cliquez ici
- Différence entre NodeList et HTMLCollection cliquez ici
querySelector
est également pris en charge et QSA aussi jsfiddle.net/syNvz/2/showVoir ce fonctionnement dans codepen.
la source
Je créerais une variable pour stocker l'entrée comme ceci:
Et puis j'utiliserais simplement la variable pour ajouter la valeur d'entrée à la chaîne.
= "Your string" + input;
la source
Vous devriez pouvoir taper:
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.
la source
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.la source
Essaye celui-là
la source
Testé dans Chrome et Firefox:
Obtenir la valeur par identifiant d'élément:
Définissez la valeur dans l'élément de formulaire:
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 .
la source
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').value
est 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 :
javascript:
la source
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:
Source: w3schools
la source
Si vous êtes
input
dans unform
et que vous souhaitez obtenir de la valeur après la soumission, vous pouvez faire commeAvantage de cette façon: Exemple, votre page en a 2
form
pour la saisiesender
et l'receiver
information.Si vous n'utilisez pas
form
pour obtenir la valeur, alors- Vous pouvez définir 2 différents
id
(outag
ouname
...) pour chaque champ commesender-name
etreceiver-name
,sender-address
etreceiver-address
, ...- Si vous définissez la même valeur pour 2 entrées, puis après
getElementsByName
(ougetElementsByTagName
.. .) vous devez vous rappeler que 0 ou 1 estsender
oureceiver
. Plus tard, si vous modifiez l'ordre de 2form
en html, vous devez vérifier à nouveau ce codeSi vous utilisez
form
, vous pouvez utilisername
,address
...la source
la source
js simple
la source
Vous pouvez lire la valeur en
Afficher l'extrait de code
la source
Si vous utilisez jQuery puis en utilisant le plugin formInteract, il vous suffit de faire ceci:
Au bas de la page, incluez simplement ce fichier de plugin et écrivez ce code:
Ou si vous utilisez une URL paramétrée, utilisez ceci:
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.
la source