Bonjour à tous !
Comme vous le savez, JQuery est un Framework JavaScript qui a révolutionné la manière dont on peut générer des événements côté client. L’interaction entre JavaScript et HTML est devenue beaucoup plus aisée et standardisée grâce à JQuery.
Dans cet article, je montre comment gérer l’affichage des champs de formulaire grâce à JQuery qui affiche ou masque un champ si une valeur particulière d’un champ liste déroulante est sélectionnée.
Cliquez !
On a dans notre formulaire HTML une listes déroulante 'Type Article' avec Trois choix (Achat, Mais d oeuvre, Sous Traitance et Composé).
Le principe est que :
Si on choisit "Sous Traitance" ou "Mais d oeuvre", dans la liste déroulante, le champ "Competences" apparait au-dessous du Champ "Type Article".
Si on choisit autres choix c.-à-d. "Achat" ou "Composé" le champ "Competences" disparait.
Pour cela, il suffit de faire un script en utilisant la fonction « .change » qui détecte un changement de choix dans le menu déroulant et qui associe à chaque choix une action particulière.
Code JQuery :
$(document).ready(function() {
// [.change] Une fonction de JQuery à exécuter chaque fois que l'événement est déclenché.
$("select[title='Type Article']").change(function() {
var selected = $("select[title='Type Article']").val();
if (selected == "Sous Traitance" || selected == "Mais d oeuvre") {
// [.fadeIn();] Fonction pour afficher le contenu du champ Compétence
// [.fadeOut();] Fonction pour cacher le contenu du champ Compétence
$("#competences").fadeIn();
}
else {
$("#competences").fadeOut();
}
});
});
NB : Avant d’appeler le Script il faut masquer le champ "Compétences" avec « Style= «Display : none » Et de lui affecter un id=competences
Cordialement.
Vous devez être membre de Sharepoint France pour ajouter des commentaires !
Rejoindre Sharepoint France