Easy-Micro

LANGAGE JavaScript
Formulaire JQuery
Agir sur les formulaires avec JQuery

Méthode val()

Pour travailler avec les formulaires, on utilise la méthode val() pour tester/modifier la valeur des zones de texte, boutons radio, cases à cocher, listes déroulantes et zones de liste contenues dans un document HTML.

<form>
<input type="radio" id="oui" name="q1" value="oui">
<input type="radio" id="non" name="q1" value="non">

<select id="lesFonctions">
<option value="ingenieur">Ingénieur</option>
<option value="etudiant">Etudiant</option>
<option value="enseignant">Enseignant</option>
</select>
</form>
  • $('#nom').val() : Lit le nom de l'utilisateur.
  • $('#pass').val() : Lit le mot de passe.
  • $(':radio#H:checked').val() : Lit l'état du bouton radio H. Renvoie true si le bouton est sélectionné, sinon false.
  • $('#fonction').val() : Lit l'élément sélectionné dans la liste déroulante.
  • $('#nom').val('Michel') : Écrit "Michel" dans la zone de texte Nom d'utilisateur.
  • $('#pass').val('abcde') : Écrit "abcde" dans la zone de texte Mot de passe.
  • $(':radio').val(['oui']); : Sélectionne le bouton radio oui (:radio permet de spécifier le type).
  • $('#fonction').val('retraite') : Sélectionne Retraité dans la liste déroulante.
Source : openclassrooms.com

Exemple de méthode val() sur un select

Exemple d'utilisation de la méthode JQuery val() pour récupérer la valeur d'une option d'un select
Un <div id="laFonction"></div> existe dans le HTML 
$(function() {

   // Méthode avec val() 
   $('#lesFonctions').on('change', function() {
       $('#laFonction').text($('#lesFonctions').val()); // Affiche la valeur sélectionnée dans le div laFonction
   });

});
Est utilisé ci-dessus la méthode JQuery on() avec le paramètre change, la méthode text() pour écrire et la méthode val() pour récupérer la valeur du select

$(function() {

   // Autre méthode avec this.value
   $('#lesFonctions').on('change', function() {
       $('#laFonction').text(this.value);
   });

});

Exemple de if à rajouter en bas de la fonction : si la valeur sélectionnée est 'etudiant' on fait apparaître une zone de texte pour récupérer son numéro.
Un <div id="newDiv"></div> est rajouté dans le HTML 
// si la valeur sélectionnée est 'etudiant'
    if($('#lesFonctions').val() == 'etudiant') {
       // on fait apparaître une zone de texte
       $('#newDiv').fadeIn('slow');
       $('#newDiv').html('Saisissez votre numéro d\'étudiant : <input type="text" id="numEtudiant">');
    }
     else {
         // on fait disparaître la zone de texte
         $('#newDiv').fadeOut('slow');

         // autre technique qui nécessite un css('display', 'inline');
         //$('#newDiv').css('display', 'none');
     }

Sélecteur de formulaire

Il y a même un ensemble de sélecteurs pour les éléments de formulaires. Ces filtres sont des raccourcis pour $("type=XXXXXXX]"). Par exemple, $(":checkbox") est la même chose que $( "[type=checkbox]" ), mais le raccourci du filtre vous permet d'en écrire moins !
  • :input : sélectionne les éléments input
  • :password : sélectionne les zones de mot de passe
  • :text : sélectionne les zones de teste
  • :checkbox : sélectionne les cases à cocher
  • :radio : sélectionne les boutons d'option
  • :submit : sélectionne les boutons de validation

Pour aller plus loin...


< Page précédente JAVASCRIPT Page suivante >