JavaScript Obtenir la valeur de la zone de texte

Mehvish Ashiq 15 février 2024
JavaScript Obtenir la valeur de la zone de texte

Ce didacticiel explique la propriété text value et la fonction jQuery val() pour obtenir la valeur d’une zone de texte JavaScript.

La propriété text value est utilisée pour renvoyer ou définir la valeur de l’attribut value du champ d’entrée. L’attribut value affiche la valeur initiale de la zone de texte d’entrée. Il peut avoir des valeurs définies par l’utilisateur ou des valeurs par défaut.

La méthode jQuery val() consiste à obtenir la valeur de l’élément du formulaire. Ici, l’élément form désigne les éléments input, textarea et select. Il retourne le undefined s’il est appelé sur une collection vide. La fonction val() fixe ou renvoie la valeur de l’attribut value des éléments sélectionnés.

En utilisant cette fonction, nous pouvons définir la valeur de l’attribut value pour tous les éléments correspondants et renvoyer la valeur de l’attribut value du premier élément correspondant. N’oubliez pas que cette fonction est principalement utilisée avec des éléments de formulaire HTML.

Le code HTML restera le même pour tous les exemples (sauf celui utilisant l’élément <form>), mais le code JavaScript continuera de changer pour pratiquer différentes manières.

Code HTML:

<!DOCTYPE html>
<html>
	 <head>
 		<title> Learning JavaScript Get Textbox Value</title>
 	 </head>
	 <body>
    	Full Name: <input type="text" id="fullName" name="fullName" value="Mehvish Ashiq">
 		<button type="button" onclick="nameFunction()">Submit</button>
 		<p id="displayName"></p>
     </body>
</html>

Différentes façons d’obtenir la valeur de la zone de texte JavaScript

Divers extraits de code JavaScript sont donnés ci-dessous pour obtenir la valeur de la zone de texte JavaScript.

function nameFunction() {
  var element = document.getElementById('fullName').value;
  document.getElementById('displayName').innerHTML = element;
}

Production :

javascript obtenir la valeur de la zone de texte - sortie une

La première méthode que nous apprenons pour obtenir la valeur de textbox est document.getElementById(). Il sélectionne le premier élément avec l’attribut id avec la valeur particulière (ici, c’est fullName), obtient sa valeur en utilisant la propriété .value et l’enregistre dans la variable element. Le document.getElementById() est à nouveau utilisé pour modifier le contenu d’un élément ayant pour id la valeur displayName. Pour mettre à jour le contenu, la propriété .innerHTML est utilisée.

function nameFunction() {
  // first element in DOM  (index 0) with name="fullName"
  var element = document.getElementsByName('fullName')[0].value
  document.getElementById('displayName').innerHTML = element;
}

Production :

javascript obtenir la valeur de la zone de texte - sortie deux

Le code JavaScript ci-dessus utilise document.getElementByName pour obtenir la liste de tous les éléments portant le nom donné (fullName pour cette instance). La valeur de l’élément à l’indice 0 est sélectionnée dans la liste de tous les éléments. Cela peut également être utilisé si votre élément n’a pas d’attribut id.

function nameFunction() {
  document.getElementById('displayName').innerHTML =
      document.forms[0].elements[0].value;
}

Production :

javascript obtenir la valeur de la zone de texte - sortie trois

Le code ci-dessus modifie le contenu d’un élément dont la valeur d’id est displayName et affecte la valeur reçue de l’index 0. N’oubliez pas que vous devez avoir un élément <form> dans votre fichier HTML pour obtenir la valeur par index.

function nameFunction() {
  document.getElementById('displayName').innerHTML = $('input:text').val();
}

Production :

javascript obtenir la valeur de la zone de texte - sortie quatre

L’extrait de code donné ci-dessus présente la méthode jQuery val(), qui est utilisée pour accéder à la valeur de la zone de texte JavaScript. Cette méthode récupère la valeur du premier élément input dont le type est text. N’oubliez pas d’inclure jQuery dans la balise <head>.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Mehvish Ashiq avatar Mehvish Ashiq avatar

Mehvish Ashiq is a former Java Programmer and a Data Science enthusiast who leverages her expertise to help others to learn and grow by creating interesting, useful, and reader-friendly content in Computer Programming, Data Science, and Technology.

LinkedIn GitHub Facebook