Sélecteurs jQuery pour les formulaires

Sélecteurs jQuery pour les formulaires

  1. Objectifs

    • Connaitre les sélecteurs jQuery pour les formulaires.
  2. Les selecteurs

    • jQuery est fourni avec de nombreux sélecteurs de formulaire pour accéder aux éléments de formulaire plus facilement et plus efficacement.
    • Lorsqu’on manipule des formulaires, les sélecteurs personnalisés de jQuery peuvent simplifier la sélection des éléments recherchés.
    • Comme les autres sélecteurs, il est possible de combiner les sélecteurs pour formulaires afin d’obtenir une meilleure précision.
    • Par exemple, nous pouvons sélectionner tous les boutons radio cochés (non les cases à cocher) avec $(':radio:checked') ou sélectionner toutes les zones de saisie de mot de passe et les champs de saisie de texte désactivés avec $(':password, :text:disabled').
    • Pour sélectionne tous les éléments bouton et tous les éléments de type button: $(':button').
    • Avec les sélecteurs personnalisés, nous appliquons les principes de base de CSS pour construire la liste des éléments correspondants.
  3. jQuery sélecteurs d’élément

    • La liste suivante décrit quelques sélecteurs du formulaire.
    • Les boutons
      • En HTML5, il y a quatre sortes de boutons :
      • jQuery propose une pseudo-classe associée respectivement à chacun de ces boutons :
      • :button ,Éléments button et input dont l’attribut de type est égal à button.
        • Exemple:
          • Pour sélectionner un bouton d’envoi :$('input:submit');
      • :reset,,: Sélectionne tous les éléments de type reset.
        • Exemple:
          • Pour sélectionner un bouton de réinitialisation :$('input:reset');
      • :image,,:Sélectionne tous les éléments de type image
      • :submit,, : Sélectionne tous les éléments de type submit
    • Les champs
      • :text :Éléments de saisie dont l’attribut de type est égal au nom du sélecteur, sélectionne tous les éléments de type text
        • :password, ,: Sélectionne tous les éléments de type password (mot de passe) .
          • Exemple:
            • Pour choisir un mot de passe :$('input:password');
            • Pour obtenir la valeur du mot de passe : $('input:password').val();
            • Pour définir la valeur du mot de passe : $('input:text').val("New Text");
        • :input ,Éléments de type input, textarea, select et button.
          • Exemple:
            • Pour sélectionner une zone de texte :$('textarea');
            • Pour obtenir la valeur textarea : $('textarea').val();
            • Pour définir la valeur textarea : $('textarea').val("New Text in Textarea");
      • Les états des champs
        • :enabled Éléments de formulaire activés.
        • :disabled :Éléments de formulaire désactivés, Sélectionne tous les éléments qui sont désactivées.
        • :checked Boutons radio ou cases à cocher sélectionnés.
        • :selected Éléments option sélectionnés.
      • Le champ d’envoi de fichier
        • :file : Sélectionne tous les éléments de type file
          • Exemple:
            • Pour sélectionner un fichier :$('input:file');
            • Pour vérifier si une case à cocher est cochée : $('input:checkbox[name=checkboxname]').is(':checked');
            • Pour obtenir la valeur du fichier: $('input:file').val();
      • Les options
        • :checkbox : Sélectionne tous les éléments de type checkbox.
          • Exemple:
            • Pour sélectionner une case à cocher :$('input:checkbox');
            • Pour vérifier si une case à cocher est cochée : $('input:checkbox[name=checkboxname]').is(':checked');
            • Pour cocher une case: $('input:checkbox[name=checkboxname]').attr('checked',true);
            • Pour décocher une case à cocher: $('input:checkbox[name=checkboxname]').attr('checked',false);
        • :radio, : Sélectionne tous les éléments de type radio.
          • Exemple:
            • Pour sélectionner un bouton radio :$('input:radio');
            • Pour obtenir l’option du bouton radio sélectionné : $('input:radio[name=radiobutton-name]:checked').val();
            • Pour sélectionner la première option de bouton radio
              : $('input:radio[name=radiobutton-name]:nth(0)').attr('checked',true);, ou $('input:radio[name=radiobutton-name]')[0].checked = true;
  4. Application

    • Utiliser bootstrap4 pour créer un formulaire qui contient tous les éléments qu’on a vue précédemment
    • Utiliser JQuery pour changer la couleur des boutons et leur contour
    • Trouver le nombre de boutons dans le formulaire(<input type="button")
    • <script type="text/javascript">
      $(document).ready(function(){
          var input = $(":button").css({background:"yellow",
      border:"3px red solid"});
          $("div").text("Pour ce type  jQuery a trouvé " + input.length
      + " boutons.")
                  .css("color", "#ff0000");
          $("form").submit(function () { return false; });
      });
      </script>
    • Trouver le nombre de case à cocher dans le formulaire
    •     var n = $(":checkbox").length;
           $("#div").text("Pour ce type  jQuery a trouvé " + n
      + " checkbox.")



Abonnez vous à notre chaîne YouTube gratuitement