Manipuler la visibilité des éléments HTML en fonction des choix utilisateurs peut être complexe.
Sans une méthode efficace, les formulaires peuvent devenir statiques, frustrant les utilisateurs par leur manque d’interactivité.
L’événement jQuery .change() offre une solution élégante pour rendre vos formulaires plus dynamiques et réactifs en ajustant automatiquement les éléments en fonction des sélections utilisateur.
Apprenez les bases de jQuery à travers des projets pratiques et engageants.
L’événement jQuery .change() est déclenché chaque fois que la valeur d’un élément d’entrée, d’un élément de sélection ou d’un élément de zone de texte est modifiée. Cet événement est utile dans les situations où vous souhaitez effectuer une action lorsque l’utilisateur modifie la valeur d’entrée, de sélection ou de zone de texte.
Vous en saurez davantage sur l’application de l’événement change.
Utiliser l'événement jQuery change
Dans notre application, il s’agira pour nous d’utiliser la méthode d’événement change pour manipuler la visibilité de deux éléments HTML en fonction de la valeur d’un troisième.
Ici vous aurez tout le code nécessaire pour pouvoir faire cela.
Code HTML:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery</title>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.rll-youtube-player .play{--wpr-bg-182063f3-972e-4260-8e1d-8210bed5a2dd: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-182063f3-972e-4260-8e1d-8210bed5a2dd: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"182063f3-972e-4260-8e1d-8210bed5a2dd","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<form action="" method="post">
<h1>Créer un article</h1>
<select id="catType">
<option value="0">catégorie</option>
<option value="1">choisir une catégorie</option>
<option value="2">créer une catégorie</option>
</select>
<input type="text" placeholder="nom" id="nom">
<input type="number" step="any" placeholder="tarif" id="tarif">
<input type="text" placeholder="créer une catégorie" id="cat">
<select id="catID">
<option value="0">choix de la catégorie</option>
<option value="1">chaussure</option>
<option value="2">pantalon</option>
<option value="3">pull</option>
</select>
<input type="submit" value="valider">
</form>
<script src="js/jquery.js" data-rocket-defer defer></script>
<script src="js/script.js" data-rocket-defer defer></script>
<script>window.addEventListener('DOMContentLoaded', function() {var rocket_beacon_data = {"ajax_url":"https:\/\/blog.alphorm.com\/wp-admin\/admin-ajax.php","nonce":"c3811e8083","url":"https:\/\/blog.alphorm.com\/utilisation-evenement-jquery-change","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}});</script><script data-name="wpr-wpr-beacon" src='https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script><script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>
Code CSS :
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #8e44ad;
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
form {
width: 400px;
background-color: #ecf0f1;
padding: 20px;
border-radius: 10px;
}
h1 {
text-align: center;
margin-top: 0;
margin-bottom: 30px;
padding-bottom: 9px;
border-bottom: 2px dashed #ccc;
}
input, select {
display: block;
padding: 20px;
margin-top: 15px;
width: 100%;
box-sizing: border-box;
border: 1px solid #ddd;
border-radius: 5px;
outline: none;
text-transform: capitalize;
}
::placeholder {
margin-left: 8px;
font-size: 1rem;
letter-spacing: 1px;
color: #bbb;
}
input[type="submit"] {
cursor: pointer;
font-size: 1.2rem;
}
option {
font-size: 1rem;
background-color: #bbb;
}
Code JavaScript :
$(document).ready(function() {
$('#cat').hide();
$('#catID').hide();
$('#catType').change(function() {
if(this.value == 1) {
$('#catID').show();
$('#cat').hide();
} else if(this.value == 2) {
$('#cat').show();
$('#catID').hide();
} else {
$('#cat').hide();
$('#catID').hide();
}
});
});
Le script JavaScript sur la méthode change attache un écouteur d’événements à l’élément HTML portant l’identifiant catType. Lorsque la valeur de cet élément change (par exemple, lorsqu’un utilisateur sélectionne une nouvelle option dans le menu déroulant), le code à l’intérieur de la fonction est exécuté.
L’instruction if vérifie la valeur de l’élément #catType (Choisir une catégorie) :
Si la valeur est 1, elle affiche l’élément #catID (choix de catégorie) et masque l’élément #cat (Créer une catégorie).
Si la valeur est 2, elle affiche l’élément #cat (créer une catégorie) et masque l’élément #catID (choisir une catégorie).
Si la valeur n’est ni 1 ni 2, elle masque les éléments #cat et #catID.
En résumé, nous avons utilisé la méthode change pour basculer la visibilité de deux éléments en fonction de la sélection d’un troisième élément. Cette fonction enregistre la nouvelle valeur chaque fois que l’utilisateur sélectionne une option différente dans la liste déroulante, ce qui est essentiel pour les formulaires qui réagissent aux choix de l’utilisateur.
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.
FAQ
Comment fonctionne l'événement jQuery .change()?
Pourquoi utiliser l'événement change dans jQuery?
Comment manipuler la visibilité des éléments HTML avec jQuery?
Quel est l'impact de l'événement change sur l'interactivité des formulaires?
Quels sont les avantages de l'utilisation de jQuery pour la manipulation DOM?
Conclusion
En maîtrisant l’événement jQuery change, vous pouvez transformer vos formulaires en outils interactifs et dynamiques. Comment pourriez-vous intégrer cette méthode dans vos projets actuels?
