Comment obtenir la valeur du champ de saisie de texte à l'aide de JavaScript?

JavaScript peut interagir avec différentes pages Web pour fournir un serveur ainsi que des services côté client. Le but de Javascrip est de fournir des éléments interactifs sur les pages Web pour engager les utilisateurs. Ces éléments interactifs incluent le style dynamique, la saisie de la valeur, l'obtention de la valeur des formulaires, etc.

Dans cet article, une implémentation pratique de la façon d'obtenir la valeur du texte à partir des champs d'entrée est effectuée à l'aide de JavaScript.

Il existe différentes façons d'acquérir la valeur à partir du champ de saisie en utilisant JavaScript. Gardant ceux-ci en vue, les résultats du poste sont:

• • Utilisation du GetElementByid en javascript
  • Utilisation de GetElementsByClassName dans JavaScript

Méthode 1: Utilisation du GetElementByid en javascript

En javascript, le getElementbyid La méthode est utilisée pour obtenir la valeur de zone de texte d'entrée avec un attribut ID. Cette méthode est utilisée pour renvoyer une sortie par une valeur spécifiée. Il renvoie la valeur nulle si l'élément n'est pas présent ici. La plupart des utilisateurs l'utilisent pour lire et modifier les éléments HTML. La syntaxe de GetElementByid est la suivante:

Syntaxe

document.getElementByid ("inputID").valeur;

Dans cette syntaxe, le getElementbyid La méthode extrait la valeur en passant le même attribut d'ID «entrée".

Code

Un exemple d'obtention de la valeur du champ de texte d'entrée.

appuie sur le bouton

Dans le code ci-dessus:

• • Tout d'abord, le champ de saisie est utilisé pour prendre l'entrée de l'utilisateur.
  • Après cela, le getInputValue () La fonction est utilisée pour acquérir la propriété de valeur en utilisant getElementbyid.valeur.
  • Un nouveau bouton est créé qui a la fonction getInputValue () sur son événement OnClick.

Sortir

Après avoir exécuté le code, une zone de texte et un bouton apparaîtra. Lorsque vous écrivez un mot dans la zone de texte et que le bouton est enfoncé, une boîte d'alerte apparaîtra qui contient le mot / texte écrit dans la zone de texte plus tôt. Le pop-up d'alerte serait comme indiqué ci-dessous:

Méthode 2: Utilisation de GetElementsByClassName dans JavaScript

En javascript, une autre méthode connue sous le nom getElementsByClassName est utilisé pour obtenir la valeur du champ de saisie du texte. Il renvoie l'ensemble des éléments spécifiés par le nom de la classe. Le getElementsByClassName () La méthode est appelée en utilisant l'élément de document. Il recherche l'ensemble du document et donne la sortie de tous les éléments enfants présents dans le document. La syntaxe pour utiliser cette méthode est fournie ci-dessous:

document.getElementsByClassName ("InputClass") [0].valeur;

La syntaxe est décrite comme:

• • Entrée: représente le nom de la classe.
  • [0]: Il représente que si aucun élément correspondant n'est présent ici, puis retourne indéfini.

Code

Utilisation de la méthode GetElementsByClassName et affichez-la.

Obtenir de la valeur

Le code ci-dessus représente que Entrée est spécifié comme un nom de classe du champ de texte. Après cela, le getInputValue () La fonction est utilisée, dans laquelle getElementsByClassName () est appelé en utilisant le document élément en spécifiant le nom de classe "Entrée".

Sortir

Dans l'affichage ci-dessus, la valeur "Minhal”Est ​​placé à l'intérieur du texte déposé.

Après avoir appuyé sur le Obtenir de la valeur bouton, la valeur est stockée et affichée comme un message d'alerte dans la fenêtre contextuelle. De cette façon, le getElementsByClassName () La méthode peut être utilisée pour obtenir la valeur du champ de saisie de texte à l'aide de JavaScript.

Conclusion

En javascript, le getElementByid () et getElementsByClassName () Les méthodes sont utilisées pour obtenir la valeur du champ de saisie du texte. Dans le getElementByid () Méthode, la valeur de la zone de texte d'entrée est extraite avec un attribut ID. Tandis que le getElementsByClassName () La méthode renvoie l'ensemble des éléments spécifiés par le nom de la classe. Ces deux méthodes sont prises en charge par des navigateurs avancés, qui incluent le chrome, l'opéra, le safari, etc. Vous avez appris à extraire la valeur du champ de saisie du texte avec Javascrip.