JQuery est un framework Javascript qui a révolutionné la manière dont ont 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 de champs de formulaire grâce à JQuery.
La clef de JQuery réside dans la balise <head> de votre document. JQuery.js est un fichier javascript qui contient les fonctions principales. J’en ai téléchargé la version allégée (72 Ko) à partir de JQuery.com
<script type= »text/javascript » src= »./js/jquery-1.4.2.min.js »></script>
La liste déroulante (select) fait afficher des champs de formulaire
Mon premier exercice est de laisser JQuery afficher des champs de formulaire si une valeur particulière d’un champ liste déroulante est sélectionnée.
Voici mon formulaire HTML avec 3 éléments : 2 listes déroulantes (id = type et id = choix) et un textarea (id = text) :
<form><select id= »type »><option>choix de type</option><option value= »1″>type 1</option><option value= »2″>type 2</option><option value= »3″>type 3</option></select><br /><select id= »choix »><option>choix</option><option value= »1″>choix 1</option><option value= »2″>choix 2</option><option value= »3″>choix 3</option></select><br /><textarea id= »text »></textarea></form>
L’affichage de cette page dans un navigateur affichera les 3 éléments (2 listes déroulantes et le champs textarea).
Mon objectif est d’afficher seulement la première liste déroulante (id = type) et de seulement afficher la seconde liste déroulante et le textarea si la troisième entrée de la première liste déroulante est sélectionnée.
Dans la <head> de mon document, j’ajoute un script qui commence avec la fonction $(document).ready(). Ceci vous permet de charger autant de fonctions que nécessaire dès que le DOM est chargé et avant que le contenu de votre page ait été chargé. Vous pourriez- enregistrer cette fonction à l’intérieur d’un fichier .js séparé et le pouvoir de JQuery est que vous n’aurez rien d’autre à ajouter au contenu HTML de votre document :
<script language= »javascript »>//<![CDATA[
$(document).ready(function() {
$("#choix").hide();
$("#text").hide();
$("#type").change(function() {
if ( $("#type").val() == "3"){
$("#choix").show();
$("#text").show();
}
else{
$("#choix").hide();
$("#text").hide();
}
});
if ( $("#type").val() == "3"){
$("#choix").show();
$("#text").show();
}
$("#choix").change(function() {
var val = $("#choix").val();
$("#text").append(val + "\n");
});
});
//]]></script>
Vous devriez aisément compendre ce que ce script fait : la liste déroulante « choix » et le champ textarea sont masqués par défaut. JQuery a accès aux éléments de formulaire grâce à leur id (#choix, par exemple). Si la valeur de la liste déroulante « type » est 3, les autres éléments du formulaire seront affichés, sinon, ils seront masqués. Puis si lma valeur de la liste déroulante « choix » change, sa valeur sera ajoutée au contenu du champ textarea.
La case à cocher (checkbox) fait afficher des champs de formulaire
Mon second exercice est de laisser JQuery identifier si une case à cocher (checkbox) est cochée pour faire afficher ou masquer des champs de formulaire.
J’ajoute un champ checkbox à mon formulaire HTML :
<form><input type= »checkbox » id= »check » /><select id= »type »><option>choose a type</option><option value= »1″>type 1</option><option value= »2″>type 2</option><option value= »3″>type 3</option></select><br /><select id= »choice »><option>choice</option><option value= »1″>choice 1</option><option value= »2″>choice 2</option><option value= »3″>choice 3</option></select><br /><textarea id= »text »></textarea></form>
Puis je modifie le script de ma balise <head> pour identifier si la case a été cochée ou non :
<script language= »javascript »>//<![CDATA[
$(document).ready(function() {
$("#choix").hide();
$("#text").hide();
$("#type").change(function() {
if ( $("#type").val() == "3"){
$("#choix").show();
$("#text").show();
}
else{
$("#choix").hide();
$("#text").hide();
}
});
if ( $("#type").val() == "3"){
$("#choix").show();
$("#text").show();
}
$("#check").change(function() {
if($("#check").attr("checked")) {
$("#choix").show();
$("#text").show();
}
else{
$("#choix").hide();
$("#text").hide();
}
});
$("#choix").change(function() {
var val = $("#choix").val();
$("#text").append(val + "\n");
});
});
//]]></script>
Avec JQuery, vous pourrez aussi ajouter quelques effets à la « scriptaculous » avec ces actions show et hide :
$(« #choix »).show(« slow »);
affichera l’élément de formulaire lentement.
Vous pourriez aussi utiliser une valeur numérique :
$(« #choix »).hide(200);
Webliography :
Bonjour,
Est ce que je peux utiliser ce script en php?
ces scripts javascript JQuery s’ajoutent au code en html => oui, peut cohabiter avec du PHP sans souci
Salut,
J’ai essayé d’integrer ce code en php en créant deux fichier :
1-> contient le formulaire « formulaire.php »
===========================================
choose a typetype 1type 2type 3
choicechoice 1choice 2choice 3
===========================================
2-> contient le code javascript code.js
En fait j’ai besoin de tester cet exemple afin de l’integrer dans mon application
Merci pour votre aide
D’une autre façon comment je peux implanter code jquery dans fichier .php
Je vous remercie par avance
on met généralement le jquery dans la head
Merci pour votre reponse mais toujours pas !!
Voici mon code :
$(« #column_select »).change(function() {
$(‘div[id^=layout_select]‘).hide();
$(‘.’+this.value).show();
});
Review preparation and review
Support
Report review
Delivery of report to the customer
Report diffused
=======> vous pouvez l’interpreter en ligne http://jsfiddle.net/
Merci pour votre aide !
http://jsfiddle.net/RGXa7/93/
Sur le lien dessus fonctionne normal par contrej’ai pas pu sur mon serveur local xampp!!
Est ce que c’est un prbleme de library jquery.js !!
c’est il va me falloir ajouter la library jquery .js dans la balise et ma fonction javascript a la fin de la balise
ça marche merci