Récupérer la valeur d’un INPUT en JavaScript

Récupérer la valeur d’un INPUT en JavaScript

  1. Objectifs

    • ِEtre capable de gérer une ligne de texte avec JavaScript




  2. Introduction

    • La zone de texte est l’élément d’entrée/sortie par excellence de Javascript.
    • La syntaxe Html est :
      <INPUT TYPE="text" NAME="nom" SIZE=x MAXLENGTH=y>

      pour un champ de saisie d’une seule ligne, de longueur x et de longueur maximale de y.

  3. L

    ire une valeur dans une zone de texte

    • Pour comprendre comment lire un texte écrit dans un champ de saisie d’une seule ligne, voici un exemple que nous le détaillerons petit à petit :
      1. Afficher le contenu dans une boite d’alerte
        • Saisir une valeur dans la zone de texte et la reproduire dans une boite d’alerte
        • <!DOCTYPE html>
          <html lang="fr">
          <head>
          <title>Lire une valeur dans un champs de texte</title>
          <meta charset="utf-8">
          <style>
          #bouton {margin-top: 12px;}
          </style>
          <script>
          function controle(){
          var saisie =document.getElementById("input").value;
          alert("Vous avez saisi : "+ saisie);
          }
          </script>
          <body> 
          
          <h2>Lire une valeur dans un champs de texte</h2>
          <form>
          <input type="text" id="input" name="input" value=""><br>
          <input type="button" id="bouton" value="Contrôler" onclick="controle()">
          </form>
          </body>
          </html>
          
        • Lorsque le bouton est cliqué, JavaScript appelle la fonction controle() récupère, par l’intermédiaire de la variable de la fonction saisie()
      2. Afficher le contenu dans une autre zone de texte
        • Saisir une valeur dans une zone de texte et la reproduire dans une autre zone de texte
        • <!DOCTYPE html>
          <html lang="fr">
          <head>
          <title>Lire une valeur dans un champs de texte</title>
          <meta charset="utf-8">
          <style>
          #bouton {margin-top: 12px;}
          </style>
          <script>
          function afficher(){
          var saisie =document.getElementById("texte1").value;
          document.getElementById("texte2").value=saisie ;
          }
          </script>
          <body> 
          <div align="center">
          <h3>Afficher une valeur dans un autre champs de texte</h3>
          <form>
          <input type="text" id="texte1"  value="" size="30"><br>
          <input type="button" id="bouton" value="Afficher" size="30" onclick="afficher()"><br><br>
          <input type="text" id="texte2"  size="30" value="">
          
          </form>
          </div>
          </body>
          </html>

        • Lorsque le bouton afficher est cliqué JavaScript appelle la fonction afficher().
          Cette fonction afficher() récupère, par l’intermédiaire de la variable saisie , la valeur de la zone de texte texte1 et le copie dans la zone de texte texte2
      3. Tester s’il est vide
        • Dans un formulaire, vous voulez que certains champs soient obligatoirement remplies.
        • Ce qui veux dire qu’on interdit les champs vides.
        • Dans l’exemple suivant on va voir comment réaliser cela dans une fonction javascript ?
        • <!DOCTYPE html>
          <html lang="fr">
          <head>
          <title>Lire une valeur dans un champs de texte</title>
          <meta charset="utf-8">
          <style>
          #bouton {margin-top: 12px;}
          </style>
          <script>
          function verif_champ() 
          { 
          var mots_cles =document.getElementById("input").value;
          	if (mots_cles == "") 
          	{ 
          	alert("Un champ n'est pas remplie"); 
          	return false; 
          	} 
          	return true; 
          } 
          </script>
          <body> 
          
          <h2> Un champs de texte vide (Testez)</h2>
          <form>
          <input type="text" id="input" name="mots_cles" value=""><br>
          <input type="button" id="bouton" value="Valider" onclick="verif_champ()">
          </form>
          </body>
          </html>
          
        • La fonction valider() appelée par le le clic sur le bouton (onclicck=”valider’)”),récupère dans la variable input la longueur de ce qui à été saisie dans la zone de texte (document.getElementById(“input”).value)
      4. Récupérer le texte d’une balise HTML en Javascript
        • Dans l’exemple ci-dessous nous allons utiliser la balise <div> comme exemple pour la récupération du texte. Il existe deux méthodes pour récupérer le texte d’une balise, soit on utilise la propriété textContent ou innerText.
        • Méthode 1 : En utilisant la propriété textContent
          • <html>
               <body>
                  <div id="myDiv">Welcom to WayToLearnX!</div>
               </body>
               <script type="text/javascript">
                  var text = document.getElementById('myDiv').textContent;
                  alert(text);
               </script>
            </html>
        • Méthode 2 : En utilisant la propriété innerText
          • <html>
               <body>
                  <div id="myDiv">Welcom to WayToLearnX!</div>
               </body>
               <script type="text/javascript">
                  var text = document.getElementById('myDiv').innerText;
                  alert(text);
               </script>
            </html>