Comment obtenir la valeur d'entrée en javascript

Dans le développement front-end, afin de traiter les données saisies par l'utilisateur, il est généralement nécessaire d'obtenir la valeur d'entrée de l'élément de formulaire. JavaScript fournit quelques méthodes pour obtenir les valeurs d'entrée, jetons un coup d'œil.

1. Obtenez la valeur d'entrée de la zone de texte

La zone de texte est l'un des éléments de formulaire les plus courants. Lorsque vous obtenez sa valeur d'entrée, vous pouvez utiliser l'attribut value. Nous pouvons obtenir l'élément de zone de texte via la méthode getElementById, puis utiliser l'attribut value pour obtenir la valeur saisie.

Exemple de code :

<input type="text" id="myText">
<script>
    var inputVal = document.getElementById("myText").value;
    console.log(inputVal);
</script>

Dans le code ci-dessus, nous définissons d'abord un élément de zone de texte, puis utilisons JavaScript pour obtenir sa valeur d'entrée, et enfin la valeur est affichée sur la console.

2. Obtenez la valeur d'entrée de la boîte à sélection multiple

La boîte à sélection multiple est généralement utilisée pour sélectionner une ou plusieurs options. Nous pouvons obtenir sa valeur d'entrée en parcourant toutes les sélections. Nous devons d'abord obtenir toutes les options de la zone de sélection multiple, puis parcourir toutes les options et obtenir l'état des options via l'attribut coché.

Exemple de code :

<input type="checkbox" class="checkbox" value="apple">
<input type="checkbox" class="checkbox" value="orange">
<input type="checkbox" class="checkbox" value="banana">
<script>
    var checkboxes = document.getElementsByClassName("checkbox");
    var checkedVal = [];
    for(var i = 0; i < checkboxes.length; i++){
        if(checkboxes[i].checked){
            checkedVal.push(checkboxes[i].value);
        }
    }
    console.log(checkedVal);
</script>

Dans le code ci-dessus, nous définissons d'abord plusieurs éléments de boîte à sélection multiple et obtenons tous les éléments de boîte à sélection multiple via la méthode getElementsByClassName. Ensuite, nous obtenons le statut de chaque option en parcourant et stockons la valeur de l'option sélectionnée dans un tableau.

3. Obtenir la valeur d'entrée du bouton radio

L'obtention de la valeur d'entrée du bouton radio est similaire à la boîte de sélection multiple. Elle nécessite également de parcourir les éléments du bouton radio pour obtenir l'état de l'option. Mais la différence est que puisque le bouton radio ne peut sélectionner qu'une seule option à la fois, nous pouvons généralement utiliser l'attribut name pour regrouper les éléments du bouton radio, ce qui facilite la navigation entre toutes les options.

Exemple de code :

<input type="radio" name="fruit" value="apple">
<input type="radio" name="fruit" value="orange">
<input type="radio" name="fruit" value="banana">
<script>
    var radios = document.getElementsByName("fruit");
    var checkedVal = null;
    for(var i = 0; i < radios.length; i++){
        if(radios[i].checked){
            checkedVal = radios[i].value;
            break;
        }
    }
    console.log(checkedVal);
</script>

Dans le code ci-dessus, nous définissons d'abord plusieurs éléments de bouton radio et les regroupons par l'attribut name. Ensuite, nous obtenons l'état de la sélection actuelle par parcours. Si l'option est sélectionnée, nous stockons sa valeur dans la variable vérifiéeVal.

Résumé : 

Ce qui précède est la méthode d'obtention de la valeur d'entrée de l'élément de formulaire. Les méthodes d'obtention de la zone de texte, de la zone de sélection multiple et du bouton radio sont différentes, mais elles obtiennent toutes la valeur d'entrée en parcourant les éléments. puis obtenir la valeur d'entrée via des attributs spécifiques. Quelle que soit la méthode utilisée, l'obtention de la valeur d'entrée de l'élément de formulaire est une étape nécessaire dans le traitement des données saisies par l'utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!