Obtenir la valeur du formulaire HTML en JavaScript
-
Utilisez le
document.formspour obtenir la valeur du formulaire HTML en JavaScript -
Utilisez le
idpour accéder à la valeur du formulaire HTML en JavaScript
En JavaScript, nous pouvons utiliser l’attribut id d’un élément d’entrée spécifique pour obtenir les valeurs ou déclencher l’attribut name pour accéder aux valeurs.
Les deux conventions procéderont à la récupération des données brutes de l’utilisateur. Techniquement, l’objectif est de saisir toutes les entrées d’un utilisateur et de s’assurer que le processus fonctionne.
Ici nous allons travailler avec le HTML DOM alias document.forms pour récupérer tous les éléments du HTML form. Une brève introduction aux méthodes disponibles pour interagir avec les éléments et attributs HTML est ici.
De plus, dans notre exemple, nous utiliserons la manière informelle d’identifier l'id d’un élément pour en extraire l’information.
Utilisez le document.forms pour obtenir la valeur du formulaire HTML en JavaScript
La méthode document.forms prend l’attribut name pour localiser le formulaire et son élément. Tactiquement, toutes les valeurs de la forme passeront par cette voie d’initiation.
Nous aurons un élément select suivi d’un élément multiple option. Et nous choisirons une préférence à partir de là, et la valeur sera séparée.
Plus tard, lorsque le document.forms sera lancé, il saisira la valeur séparée. Vérifions le bloc de code pour une visualisation correcte.
Extrait de code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
</head>
<body>
<form name="form">
<select name="fruit" id="fruits">
<option value="0">Select Fruit</option>
<option value="mango">Mango</option>
<option value="apple">Apple</option>
<option value="orange">Orange</option>
</select>
<button type = "submit">Hit</button>
</form>
<p id="print"></p>
</body>
</html>
var form = document.forms['form'];
form.onsubmit = function(e) {
e.preventDefault();
var select = document.form.fruit.value;
console.log(select);
document.getElementById('print').innerHTML = select.toUpperCase();
}
Production :
Comme vous pouvez le voir, l’objet form qui prend la méthode document.forms pour interagir avec les valeurs HTML form renverra tous les éléments.
La méthode onsubmit permet d’aller plus loin en travaillant avec la valeur sélectionnée. Dans l’instance, l’objet select prend la valeur désirée avec l’attribut name correspondant de l’élément form et select.
Plus tard, nous avons imprimé la valeur au format majuscule sur la page.
Utilisez le id pour accéder à la valeur du formulaire HTML en JavaScript
Pour cet exemple, nous utiliserons le documnet.getElementById le querySelector pour piloter sur les entrées du formulaire.
La possibilité d’utiliser ce format est répandue et fonctionne de manière similaire à la méthode document.forms. Ainsi, les lignes de code suivantes illustreront l’aperçu.
Extrait de code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
</head>
<body>
<form name="form" id="forms">
Enter name:
<input type="text" id="name">
<input type="button" value=" Click Up">
</form>
<p id="print"></p>
</body>
</html>
var form = document.getElementById('forms');
form.onclick = function(e) {
e.preventDefault();
var name = document.getElementById('name').value;
console.log(name);
document.getElementById('print').innerHTML = name.toUpperCase();
}
Production :
Le formulaire accédé par l’objet form en JavaScript, et la valeur de l’entrée ont également été dérivés de la méthode .value.
Dans l’exemple précédent, nous avons utilisé l’élément button pour soumettre l’entrée, et ici nous avons utilisé le bouton de type d'entrée pour effectuer la soumission.
La différence ici est seulement dans onsubmit et onclick, les deux fonctionnent de la même manière.
