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