FORMULAIRE

Question

22 Dec 2021 à 16:28

Bonjour,

J'ai besoin d'aide pour ce code.

Il fonctionne tres bien mais il est a usage "unique", je voudrai l'utiliser plusieurs fois dans mon formulaire. Que dois je changer ? je pense que c'est ID qui bloque , utiliser plutôt "getelementclassname" ou alors partir sur un autre code JS.

L'idée c'est qu'en sélectionnant une option du menu deroulant elle s'affiche en dessous. ( pourtant c'est simple, je clique ou je sélectionne, il s'affiche ... mais je sèche )

Si vous avez des idées...

<select class="keyup form-control apport_spot" style="display: none" id="selectBox" onchange="changeFunc();">
<option id="noaffiche" value="0"> Sélectionner un item</option>
<option id="afficher1" value="1" >FUN1</option>
<option id="afficher2" value="2" >FUN2</option>
<option id="afficher3" value="3" >FUN3</option>
<option id="afficher4" value="4" >FUN4</option>
</select>

<p id="noaffiche">
</p>
<p id="cacher1" style="display: none">
<strong>FUN1 :</strong>
</p>
<p id="cacher2" style="display: none">
<strong>FUN1:</strong>
</p>
<p id="cacher3" style="display: none">
<strong>FUN1 :</strong>
</p>
<p id="cacher4" style="display: none">
<strong>FUN2 :</strong>

et la suite

<script type="text/javascript">
function changeFunc() {
var selectBox = document.getElementById("selectBox");
var selectedValue = selectBox.options[selectBox.selectedIndex].value;

if (selectedValue == 0){
document.getElementById("noaffiche").style.display = "block";
document.getElementById("cacher1").style.display = "none";
document.getElementById("cacher2").style.display = "none";
document.getElementById("cacher3").style.display = "none";
document.getElementById("cacher4").style.display = "none";

}else if (selectedValue == 1){
document.getElementById("noaffiche").style.display = "none";
document.getElementById("cacher1").style.display = "block";
document.getElementById("cacher2").style.display = "none";
document.getElementById("cacher3").style.display = "none";
document.getElementById("cacher4").style.display = "none";
}else if (selectedValue == 2){
document.getElementById("noaffiche").style.display = "none";
document.getElementById("cacher1").style.display = "none";
document.getElementById("cacher2").style.display = "block";
document.getElementById("cacher3").style.display = "none";
document.getElementById("cacher4").style.display = "none";
}else if (selectedValue == 3){
document.getElementById("noaffiche").style.display = "none";
document.getElementById("cacher1").style.display = "none";
document.getElementById("cacher2").style.display = "none";
document.getElementById("cacher3").style.display = "block";
document.getElementById("cacher4").style.display = "none";
}else if (selectedValue == 4){
document.getElementById("noaffiche").style.display = "none";
document.getElementById("cacher1").style.display = "none";
document.getElementById("cacher2").style.display = "none";
document.getElementById("cacher3").style.display = "none";
document.getElementById("cacher4").style.display = "block";
}else{
document.getElementById("noaffiche").style.display = "block";
document.getElementById("cacher1").style.display = "none";
document.getElementById("cacher2").style.display = "none";
document.getElementById("cacher3").style.display = "none";
document.getElementById("cacher4").style.display = "none";
}
}
</script>
<script type="text/javascript">
document.getElementById("cacher1").style.display = "none";
document.getElementById("cacher2").style.display = "none";
document.getElementById("cacher3").style.display = "none";
document.getElementById("cacher4").style.display = "none";
</script>

parsimonhi

Modérateur

22 Dec 2021 à 19:41

Bonjour,

1) ll traine un "display:none" comme valeur de l'attribut style de ton <select>. Ça doit pas arranger les choses.
2) J'ai remplacé l'id du premier <p> par "cacher0", car ça simplifie le code, et aussi parce que "noaffiche" est déjà l'id d'un autre élément (un <option>) de la page.
3) Tu peux essayer le code ci-dessous :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="description" content="Test">
<title>Test</title>
<style>
p:not(:first-of-type) {display:none;}
</style>
</head>
<body>

<h1>Test</h1>

<select class="keyup form-control apport_spot" id="selectBox" onchange="changeFunc();">
<option id="noaffiche" value="0"> Sélectionner un item</option>
<option id="afficher1" value="1" >FUN1</option>
<option id="afficher2" value="2" >FUN2</option>
<option id="afficher3" value="3" >FUN3</option>
<option id="afficher4" value="4" >FUN4</option>
</select>

<p id="cacher0"></p>
<p id="cacher1"><strong>FUN1 :</strong></p>
<p id="cacher2"><strong>FUN2 :</strong></p>
<p id="cacher3"><strong>FUN3 :</strong></p>
<p id="cacher4"><strong>FUN4 :</strong></p>

<script type="text/javascript">
function changeFunc() {
	let index=document.getElementById("selectBox").selectedIndex,
		list=document.querySelectorAll('p[id^="cacher"]');
	for(let k=0;k<list.length;k++)
		list[k].style.display=(list[k].id==("cacher"+index))?"block":"none";
}
</script>
</body>
</html>

Amicalement,
Modifié par parsimonhi (22 Dec 2021 - 19:59)

BenjaminMontpellier

22 Dec 2021 à 21:31

Ca fonctionne bien merci Smiley biggrin

En revanche, si je veux mettre plusieurs "select" en utilisant le meme code JS. Je fais comment ?

parsimonhi

Modérateur

23 Dec 2021 à 02:18

Bonjour,

J'aurais dû me douter que la question allait venir ! Smiley lol

1) Dans le html, il faut rajouter le mot clé "event" en paramètre de la fonction changeFunc() :

<select class="keyup form-control apport_spot" onchange="changeFunc(event);">

2) Il faut faire quelques suppositions sur la structure de ton html. J'ai choisi de réunir chaque <select> et les <p> qui le suivent dans une même <section>. On peut très bien avoir autre chose. Il faudra alors peut-être adapter légèrement le code de changeFunc().

3) J'ai viré tous les id. Les id, ce n'est pas pratique quand on généralise, parce qu'il faut qu'ils soient uniques dans la page, et c'est toujours une prise de tête pour les générer et s'assurer qu'ils sont bien uniques.

4) J'ai rajouté une classe à tous les <p> concernés. Ça permet de les cibler facilement.

5) Dans le js, on modifie légèrement la fonction, en déduisant de quel <select> il s'agit via le paramètre de cette fonction, puis en ciblant les <p> qui ont le même parent que le <select> sélectionné et qui ont la bonne classe (ici j'ai nommé cette classe "magicP") :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="description" content="Test">
<title>Test</title>
<style>
p:not(:first-of-type) {display:none;}
</style>
</head>
<body>

<h1>Test</h1>

<section>
<h2>Section 1</h2>
<select class="keyup form-control apport_spot" onchange="changeFunc(event);">
<option value="0"> Sélectionner un item (Fun)</option>
<option value="1" >FUN1</option>
<option value="2" >FUN2</option>
<option value="3" >FUN3</option>
<option value="4" >FUN4</option>
</select>
<p class="magicP"></p>
<p class="magicP"><strong>FUN1 :</strong></p>
<p class="magicP"><strong>FUN2 :</strong></p>
<p class="magicP"><strong>FUN3 :</strong></p>
<p class="magicP"><strong>FUN4 :</strong></p>
</section>

<section>
<h2>Section 2</h2>
<select class="keyup form-control apport_spot" id="selectBox" onchange="changeFunc(event);">
<option value="0"> Sélectionner un item (Rha)</option>
<option value="1" >RHA1</option>
<option value="2" >RHA2</option>
<option value="3" >RHA3</option>
</select>
<p class="magicP"></p>
<p class="magicP"><strong>RHA1 :</strong></p>
<p class="magicP"><strong>RHA2 :</strong></p>
<p class="magicP"><strong>RHA3 :</strong></p>
</section>

<script type="text/javascript">
function changeFunc(e) {
	let select=e.target,
		index=select.selectedIndex,
		list=select.parentNode.querySelectorAll('p.magicP');
	for(let k=0;k<list.length;k++)
		list[k].style.display=(k==index)?"block":"none";
}
</script>
</body>
</html>

Et voilà !

Amicalement,
Modifié par parsimonhi (23 Dec 2021 - 02:26)

BenjaminMontpellier

23 Dec 2021 à 10:31

Parfait

Merci beaucoup.

Il me reste 2 soucis a regler.

Les propriété du P dans le style masque le reste de mon code .

Du coup, j'ai remplacé par H4 que je n'utilise pas et j'ai mis les meme propriété que P ( pas tres conventionnel mais ca marche Smiley smile

)

Le problème principal ( et j'espère que ce sera le dernier Smiley decu

), c'est que dans mon index, J'ai 2 sections : une section "formulaire" et un section "print"

Et donc les "select" sont dans la section "formulaire" et le résultat dans la section "print" mais dans ce cas de figure le code ne fonctionne pas.

Je vais tenter de chercher de mon cotes... si vous avez une piste Smiley biggrin

parsimonhi

Modérateur

23 Dec 2021 à 12:44

Bonjour,

1) Pour cette histoire de masquage des <p>, il faudrait remettre les <p>, et remplacer :

p:not(:first-of-type) {display:none;}

qui cache la plupart des <p> par

p.magicP:not(:first-of-type) {display:none;}

qui ne cachera que des <p> ayant la classe "magicP".

2) Pour les questions de <section>, si tous les <select> sont réunies d'un côté, et tous les <p> sont réunis d'un autre côté, le plus simple est sans doute de rajouter un attribut propriétaire (ils commencent forcément par "data-"), différent pour chaque <select>, et mettre aussi cet attribut pour les <p> qui lui sont reliés (si toutefois j'ai bien compris la structure de ton html).

Exemple :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="description" content="Test">
<title>Test</title>
<style>
p:not(:first-of-type) {display:none;}
</style>
</head>
<body>

<h1>Test</h1>

<section>

<h2>Section "select"</h2>

<select data-type="fun" class="keyup form-control apport_spot" onchange="changeFunc(event);">
<option value="0"> Sélectionner un item (Fun)</option>
<option value="1" >FUN1</option>
<option value="2" >FUN2</option>
<option value="3" >FUN3</option>
<option value="4" >FUN4</option>
</select>

<select data-type="rha" class="keyup form-control apport_spot" id="selectBox" onchange="changeFunc(event);">
<option value="0"> Sélectionner un item (Rha)</option>
<option value="1" >RHA1</option>
<option value="2" >RHA2</option>
<option value="3" >RHA3</option>
</select>

</section>

<section>
<h2>Section "p"</h2>

<p data-type="fun" class="magicP"></p>
<p data-type="fun" class="magicP"><strong>FUN1 :</strong></p>
<p data-type="fun" class="magicP"><strong>FUN2 :</strong></p>
<p data-type="fun" class="magicP"><strong>FUN3 :</strong></p>
<p data-type="fun" class="magicP"><strong>FUN4 :</strong></p>

<p data-type="rha" class="magicP"></p>
<p data-type="rha" class="magicP"><strong>RHA1 :</strong></p>
<p data-type="rha" class="magicP"><strong>RHA2 :</strong></p>
<p data-type="rha" class="magicP"><strong>RHA3 :</strong></p>

</section>

<script type="text/javascript">
function changeFunc(e) {
	let select=e.target,
		index=select.selectedIndex,
		type=select.getAttribute("data-type");
		list=document.querySelectorAll('p[data-type="'+type+'"]');
	for(let k=0;k<list.length;k++)
		list[k].style.display=(k==index)?"block":"none";
}
</script>
</body>
</html>

Amicalement,
Modifié par parsimonhi (23 Dec 2021 - 12:45)

BenjaminMontpellier

24 Dec 2021 à 14:53

Bonjour, ca marche parfaitement. je suis en train de l'adapter a mon code ...

Merci encore pour votre aide et joyeux noel

*Par contre, j'ai la value 2 qui ne fonctionne pas sur l'adaptation que j'ai faite du code que vous m'avez fourni Smiley decu



<select data-type="fun"  class="keyup form-control " onchange="changeFunc(event);">
                        <option value="0"> Sélectionner une societé </option>
                        <option value="1" >CANAL STAR</option>
                        <option value="2" >RADIO PORTE SUD</option>
                        <option value="3" >SPRGB</option>
                      
                   
                        </select> 
                     
                </div>




                

<span><div data-type="fun" class="magicPT" ></div>
                    <div data-type="fun" class="magicP" style="display: none" value="apport_CANALSTAR" id="apport_CANALSTAR">

                   
        <div class="form-check">
                <input class="form-check-input boolean" type="checkbox" value="apport_nim" id="apport_nim">
                <label class="form-check-label" for="apport_nim" style="font-weight: normal;">
                   NIMES
                </label>
        </div>

        <div class="form-check">
                <input class="form-check-input boolean" type="checkbox" value="apport_med" id="apport_med">
                <label class="form-check-label" for="apport_med" style="font-weight: normal;">
                    MONTPELLIER
                </label>
        </div>

        <div class="form-check">
                <input class="form-check-input boolean" type="checkbox" value="apport_mar" id="apport_mar">
                <label class="form-check-label" for="apport_mar" style="font-weight: normal;">
                    MARSEILLE
                </label>

        </div>

        <div class="form-check">
             <input class="form-check-input boolean" type="checkbox" value="apport_caz" id="apport_caz">
             <label class="form-check-label" for="apport_caz" style="font-weight: normal;">
               COTE D'AZUR
            </label>

        </div>
</div>

</span>






<span><div data-type="fun" class="magicPT" ></div>
    <div data-type="fun" class="magicP" style="display: none" value="apport_RADIOPORTESUD" id="apport_RADIOPORTESUD">

   
<div class="form-check">
<input class="form-check-input boolean" type="checkbox" value="apport_tou" id="apport_tou">
<label class="form-check-label" for="apport_tou" style="font-weight: normal;">
    TOULOUSE
</label>
</div>


</div>

</span>





<span><div data-type="fun" class="magicPT" ></div>
    <div data-type="fun" class="magicP" style="display: none" value="apport_RPRGB" id="apport_RPRGB">

   
<div class="form-check">
<input class="form-check-input boolean" type="checkbox" value="apport_dij" id="apport_dij">
<label class="form-check-label" for="apport_dij" style="font-weight: normal;">
    DIJON
</label>
</div>

<div class="form-check">
<input class="form-check-input boolean" type="checkbox" value="apport_bel" id="apport_bel">
<label class="form-check-label" for="apport_bel" style="font-weight: normal;">
  BELFORT
</label>
</div>

<div class="form-check">
<input class="form-check-input boolean" type="checkbox" value="apport_dun" id="apport_dun">
<label class="form-check-label" for="apport_dun" style="font-weight: normal;">
    DUNKERQUE
</label>

</div>

<div class="form-check">
<input class="form-check-input boolean" type="checkbox" value="apport_nan" id="apport_nan">
<label class="form-check-label" for="apport_nan" style="font-weight: normal;">
NANTES
</label>

</div>
</div>



</span>




<script type="text/javascript"> 
    function changeFunc(e) {
        let select=e.target,
            index=select.selectedIndex,
            type=select.getAttribute("data-type");
            list=document.querySelectorAll('DIV[data-type="'+type+'"]');
        for(let k=-0;k<list.length;k++)
            list[k].style.display=(k==index)?"block":"none";
    }
    </script>
<!-- script select campagne-->

BenjaminMontpellier

26 Dec 2021 à 09:25

Autre question ( je suis relou )

Pourquoi je ne peux pas utiliser ces 2 fonctions en meme temps ?

Que dois changer dans la fonction pour que ca puisse etre utiliser en meme temps ?


     <!-- script select campagne-->
<script type="text/javascript"> 
    function changeFunc(e) {
        let select=e.target,
            index=select.selectedIndex,
            type=select.getAttribute("data-type");
            list=document.querySelectorAll('p[data-type="'+type+'"]');
        for(let k=0;k<list.length;k++)
            list[k].style.display=(k==index)?"block":"none";
    }
    </script>
<!-- script select campagne-->
 <!-- script select campagne-->
 <script type="text/javascript"> 
    function changeFunc(e) {
        let select=e.target,
            index=select.selectedIndex,
            type=select.getAttribute("data-type");
            list=document.querySelectorAll('DIV[data-type="'+type+'"]');
        for(let k=0;k<list.length;k++)
            list[k].style.display=(k==index)?"block":"none";
    }
    </script>
<!-- script select campagne-->

parsimonhi

Modérateur

26 Dec 2021 à 14:51

Bonjour,

BenjaminMontpellier a écrit :
*Par contre, j'ai la value 2 qui ne fonctionne pas sur l'adaptation que j'ai faite du code que vous m'avez fourni

1) On ne met pas de <div> à l'intérieur de <span> (mais ce n'est pas ça qui empêche le code de marcher)
2) Il vaut mieux utiliser div (en minuscule) au lieu de DIV (en majuscule) dans code de la fonction changeFunc() (mais ce n'est pas ça qui empêche le code de marcher)
3) Il fallait une seule div vide (c'était ça l'erreur)

<div data-type="fun" class="magicP"></div>

Note : on aurait pu se passer de cette <div> vide, et dans ce cas on remplace index par (index-1) dans la fonction changeFunc() :

    function changeFunc(e) {
        let select=e.target,
            index=select.selectedIndex,
            type=select.getAttribute("data-type");
            list=document.querySelectorAll('div[data-type="'+type+'"]');
        for(let k=0;k<list.length;k++)
            list[k].style.display=(k==(index-1))?"block":"none";
    }

BenjaminMontpellier a écrit :
Pourquoi je ne peux pas utiliser ces 2 fonctions en meme temps ?

Il faut leur donner des noms différents (sinon, la déclaration de la 2e fonction "écrase" la déclaration de la 1re fonction).

Amicalement

Sujet clos

JavaScript, DOM et API Web HTML5

FORMULAIRE