Onchange et affichage de div

**playmo44** · 02/08/2017, 17h24

Bonjour,

J'ai un javascript qui affiche ou non un calque :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
function hideElement(id,hide) { 
var elt = document.getElementById(id); 
	if (hide) { 
		elt.style.visibility = "hidden"; 
	} else { 
		elt.style.visibility = "visible"; 
	} 
}

Dans ma page j'ai un select modedepaiement et j'aimerais qu'en fonction du choix que je fais, il affiche le div ou non.

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<select name="modepaiement">
<option value="0" onchange="hideElement('modep1',true);hideElement('modep2',true);hideElement('modep3',true);">-- Mode de paiement --</option>
<option value="2" onchange="hideElement('modep1',false);hideElement('modep2',true);hideElement('modep3',true);">Chèque bancaire</option>
<option value="7" onchange="hideElement('modep1',true);hideElement('modep2',true);hideElement('modep3',false);">Chèque vacances et chèque bancaire</option>
<option value="6" onchange="hideElement('modep1',true);hideElement('modep2',false);hideElement('modep3',true);">Chèque vacances et espèce</option>
<option value="1" onchange="hideElement('modep1',true);hideElement('modep2',true);hideElement('modep3',true);">Espèce</option>
<option value="5" onchange="hideElement('modep1',true);hideElement('modep2',true);hideElement('modep3',true);">Vélocomotion</option>
<option value="3" onchange="hideElement('modep1',true);hideElement('modep2',true);hideElement('modep3',true);">Virement</option>
</select>

Le script marche très bien quand je l'utilise avec un bouton radio et un onclick mais pas avec le select. Pourriez-vous me dire ou se situe mon erreur ?

Je vous remercie par avance.

**Michel** · 02/08/2017, 18h01

Pour moi, il manque un morceau du code HTML pour qu'on puisse tester.
A quoi correspondent les identifiants modp1,modp2....
On devine mais ce serait plus simple sans devinette !

**playmo44** · 02/08/2017, 18h46

Excusez moi...

Voici la partie manquante :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<div id="modep1" style="position:absolute; left:648px; top:820px; width:250px; height:50px; z-index:1; visibility: hidden" align="left">
&nbsp;&nbsp;&nbsp;Numéro de Chèque : <input type="text" name="nbch" value="" size="10">
</div>
<div id="modep2" style="position:absolute; left:648px; top:820px; width:250px; height:50px; z-index:1; visibility: hidden" align="left">
&nbsp;&nbsp;&nbsp;Montant en chèques vacances : <input type="text" name="ancv" value="" size="10">
</div>
<div id="modep3" style="position:absolute; left:648px; top:820px; width:250px; height:50px; z-index:1; visibility: hidden" align="left">
&nbsp;&nbsp;&nbsp;Numéro de Chèque : <input type="text" name="nbch" value="" size="10"><br><br>
&nbsp;&nbsp;&nbsp;Montant en chèques vacances : <input type="text" name="ancv" value="" size="10">
</div>

**Kennel sébastien** · 02/08/2017, 19h32

Bonjour playmo44,

Qu'est-ce que cela donne si tu utilises « onclick » plutôt que « onchange » sur le select ?

**danielhagnoul** · 02/08/2017, 19h39

L’événement se produit sur le "select" pas sur les "option" !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<select name="modepaiement" onchange="hideElement( this.value );">
	<option value="0">-- Mode de paiement --</option>
	<option value="2">Chèque bancaire</option>
	<option value="7">Chèque vacances et chèque bancaire</option>
	<option value="6">Chèque vacances et espèce</option>
	<option value="1">Espèce</option>
	<option value="5">Vélocomotion</option>
	<option value="3">Virement</option>
</select>

**playmo44** · 02/08/2017, 20h21

Merci pour vos réponses.

Les 2 méthodes (onChange et OnClik) fonctionnent mais avec le onChange, si je me suis trompé et que je reviens dessus, les calques se superposent. Je choisis donc le onClick.

Bonne soirée

**Mak-chan** · 10/08/2017, 15h59

Bonjour à tous,
Je suis en galère avec le même genre de problème et plutôt que de créer un énième sujet neuf sur le sujet, je tente le diable ici

Bien sûr, je suis incompétent, mais pas totalement idiot pour autant : j'ai farfouillé les méandres du web et bien évidement testé d'adapter plusieurs solutions trouvées, don celle présentée ici !
Seulement je n'y arrive pas, adapter une chose sans la comprendre ne m'as jamais réussis ^.^'
(La reprendre salement telle quelle ne donne rien également .. Ou alors j'élude un détails sans le vouloir)
Et donc voilà :
Moi aussi je dispose d'une splendide liste de choix qui doit, suivant ce dernier, afficher où masquer un champs d'informations.
Moi aussi, j'y arrive "aisément" sur des Radio mais pas à le réadapter à ma Liste x_x ...

Je n'arrive pas à adapter cette solution à mon formulaire non plus.
A dire vrai, je ne comprends pas vraiment comment fonctionne le script :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
function hideElement(id,hide) { 
var elt = document.getElementById(id); 
	if (hide) { 
		elt.style.visibility = "hidden"; 
	} else { 
		elt.style.visibility = "visible"; 
	} 
}

Enfin si, je le comprends en partie :

Il récupère l'ID d'un élément et son statut "hide"
Si le statut "hide" est ... Remplis (?) : le Cache. Sinon, l'Affiche .. ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<select name="modepaiement" onchange="hideElement( this.value );">
	<option value="0">-- Mode de paiement --</option>
	<option value="2">Chèque bancaire</option>
	<option value="7">Chèque vacances et chèque bancaire</option>
	<option value="6">Chèque vacances et espèce</option>
	<option value="1">Espèce</option>
	<option value="5">Vélocomotion</option>
	<option value="3">Virement</option>
</select>

Au changement (onChange) d'un choix dans la liste, à sa sélection donc : on appel la fonction en lui donnant tout ce qu'elle à besoin (ID+hide), où l'ID est plutôt la "value", donc le script tourne sur ID=2 pour Chèque, etc ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<div id="modep1" style="position:absolute; left:648px; top:820px; width:250px; height:50px; z-index:1; visibility: hidden" align="left">
&nbsp;&nbsp;&nbsp;Numéro de Chèque : <input type="text" name="nbch" value="" size="10">
</div>
<div id="modep2" style="position:absolute; left:648px; top:820px; width:250px; height:50px; z-index:1; visibility: hidden" align="left">
&nbsp;&nbsp;&nbsp;Montant en chèques vacances : <input type="text" name="ancv" value="" size="10">
</div>
[...]

Et les DIVs sont invisibles, normalement dépendantes des choix sélectionnés plus haut pour repasser visibles.

Seulement je ne voit pas à quel moment on fait le liens entre la value d'options :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<option value="2">Chèque bancaire</option>

Et l'ID de div :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="modep1"....

Et je ne suis vraiment pas certains de comprendre le rôle de l'attribut "hide" dans la fonction JS ..

Si quelqu'un pouvais m'expliquer en détails, je serais sûrement plus à même de réadapter ce code à mes besoins .. ?
Bien sûr, s'il faut je peux joindre mes morceaux de code à moi mais ça deviendrais encore d'avantage une aide perso pompée sur le sujet d'un autre et puis est-ce vraiment si utile dans la mesure où le but recherché est vraiment très similaire .. ?

Merci d'essayer de m'aider, et pardon de relancer un sujet techniquement résolu mais je me dit que c'est peut-être préférable à en créer un nouveau, sachant que pour l'instant je me contente d'en comprendre la solution proposée

**playmo44** · 10/08/2017, 17h01

Bonjour Mak-chan,

En fait pour le chargement du div caché qui a marché dans mon cas, j'ai utilisé la solution du onClick dans l'option :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<select name="modepaiement">
<option value="0">-- Mode de paiement --</option>
<option value="2" onclick="hideElement('modep1',false);hideElement('modep2',true);">Chèque bancaire</option>
<option value="4" onclick="hideElement('modep1',true);hideElement('modep2',false);">Chèque vacances</option>
<option value="7" onclick="hideElement('modep1',false);hideElement('modep2',false);">Chèque vacances et chèque bancaire</option>
<option value="6" onclick="hideElement('modep1',true);hideElement('modep2',false);">Chèque vacances et espèce</option>
<option value="1" onclick="hideElement('modep1',true);hideElement('modep2',true);">Espèce</option>
<option value="5" onclick="hideElement('modep1',true);hideElement('modep2',true);">Vélocomotion</option>
<option value="3" onclick="hideElement('modep1',true);hideElement('modep2',true);">Virement</option>			
</select>

L' ID (function hideElement(id,hide)) correspond au nom du calque est le hide correspond à :
- soit vrai (true) dans ce cas, le calque est caché,
- soit faux (false) dans ce cas, il est visible.

En espérant avoir répondu à ta question.

Bonne journée.

**Kennel sébastien** · 10/08/2017, 18h20

Ce sont tes « div » qui doivent être rendu visible ou invisible à l'option qui correspond ?

Alors dans ce cas dans ta fonction tu dois changer l'instruction suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var elt = document.getElementById(id);

Par :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var elt = document.getElementById("modep" + id);

En effet « this.value » retourne la valeur de l'option comme 1 ou 2 par exemple.

Ça ne cible pas t'es « div » qui sont : modep1, modep2 etc.

Quant-au paramètre « hide » il n'est pas nécessaire si tu veux inversé l'état :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
function hideElement(id) { 
    let style = document.getElementById("modep" + id).style; 
 
    style.visibility = (style.visibility === "hidden") ? "visible" : "hidden";
}

**Mak-chan** · 11/08/2017, 14h35

Envoyé par Mak-chan

[...] .. Ou alors j'élude un détails sans le vouloir)

Et ben oui, j'ai complétement zappé le fait qu'au final c'était "onclick" sur chaque Options ..
J'étais partit sur la version de Danielhagnoul pour le Select et avait compris ton choix entre onclick & onchange dans le sens inverse que ce tu expliquais ... Aah la fatigue

Autant pour moi ^^"

Par contre du coups,
Je conserve la fonction sur l'id, donné en paramètre des Options du Select plutôt que sur le mélange "value"-"id" proposé par Kennel, et l'inversion d'état sans "hide" est sympa mais ne re-cache pas le champs sous d'autre options

Envoyé par playmo44

[...]

L' ID (function hideElement(id,hide)) correspond au nom du calque est le hide correspond à :
- soit vrai (true) dans ce cas, le calque est caché,
- soit faux (false) dans ce cas, il est visible.

En espérant avoir répondu à ta question.

Bonne journée.

Oui certes, c'est vraiment logique et clair, je t'en remercie

!

J'ai vraiment capté le truc, et avec les bons codes où il faut ça tourne aussi chez moi en test. ('me reste encore à l'intégrer dans mon projet qui, pour l'instant, le refuse mais ça devrait se faire .. ^^")
Je joins mon code ici aux besoins, des fois qu'un autre ~~c' ..~~ type s'embrouille comme moi 8D

Mon objectif était d'afficher un champs "Précisez : ...." au choix "autre" dans une liste, donc une seule DIV à cacher et un seul choix concerné ^^ :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
<script>
    function hideElement(id,hide) { 
    //Cache le champs d'ID x s'il est visible, l'affiche s'il est invisible
        //Récupère l'elément d'ID donné dans la fonction dans "chAutre"
        var chAutre = document.getElementById(id); 
                            
        //Si hide est à true, reste caché
        if (hide) { 
                    chAutre.style.visibility = "hidden"; 
                     } 
        //Sinon, affiche
        else { 
                chAutre.style.visibility = "visible";
               }
   //Donc n'affiche le champs d'ID voulu que sur le choix avec cet ID et hide sur false
    }
                           
</script>
 
<div>
    <br/><hr/>
    <select>
    <!--Toutes les options sauf "Autre" cachent la div "autr"-->
              <option onclick="hideElement('autr',true);">-- Selectionnez le Choix --</option>
              <option onclick="hideElement('autr',true);">Oui</option>
              <option onclick="hideElement('autr',true);">Non</option>
                  <!--L'option Autre affiche la div d'id "autr"-->
              <option onclick="hideElement('autr',false);">Autre</option>			
    </select>
    <br/>
    <!--Div "autr", cachée par défaut-->
    <div id="autr" style="visibility: hidden" align="left">
           Si "Autre", indiquer : <input type="text">
    </div>
    <br/>
    <!--Un input non concerné-->
     <div align="left">
           Un autre champs : <input type="text">
      </div>
</div>

Encore merci pour vos éclaircissements ! =)

**danielhagnoul** · 11/08/2017, 22h51

Vos problèmes viennent du fait que vous codez le HTML et le JS de manière archaïque !

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<!-- cache-control avec max-age=60 pour le développement uniquement -->
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta name="author" content="Daniel Hagnoul">
  <title>test</title>
  <style>
    * {
      box-sizing: border-box;
    }
 
                /* code du test */
                
                
                /* fin code du test */
                
  </style>
  <script>
    'use strict';
                                
                document.addEventListener( "DOMContentLoaded", ev => {
                        
                        // code du test
                        
                        
                        // fin code du test
                        
                }, false );
    
    window.addEventListener( "load", ev => {
                        
                        // code du test
                        
                var 
                        elemNodePaiement = document.querySelector( "select[name='modepaiement']" ),
                        elemModeP1 = document.querySelector( "#modep1" ),
                        elemModeP2 = document.querySelector( "#modep2" );
 
                elemNodePaiement.addEventListener( "change", ev => {
                        elemModeP1.style.visibility = "hidden";
                        elemModeP2.style.visibility = "hidden";
                        
                        switch( ev.target.value ){
                                case "2" :
                                        elemModeP1.style.visibility = "visible";
                                        break;
                                case "4" :
                                        elemModeP2.style.visibility = "visible";
                                        break;
                                case "7" :
                                        elemModeP1.style.visibility = "visible";
                                        elemModeP2.style.visibility = "visible";
                                        break;
                                case "6" :
                                        elemModeP2.style.visibility = "visible";
                                        break;
                                case "1" :
                                case "5" :
                                case "3" :
                                        // debug, console, touche F12
                                        console.log( "valeur = ", ev.target.value );
                                        break;
                                default:
                                        console.error( "valeur inconnue" );
                        }
                        
                }, false );
 
                        // fin code du test
                        
    }, false );
  </script>
</head>
<body>
	<main>
 
		<select name="modepaiement">
			<option value="0">-- Mode de paiement --</option>
			<option value="2">Chèque bancaire</option>
			<option value="4">Chèque vacances</option>
			<option value="7">Chèque vacances et chèque bancaire</option>
			<option value="6">Chèque vacances et espèce</option>
			<option value="1">Espèce</option>
			<option value="5">Vélocomotion</option>
			<option value="3">Virement</option>			
		</select>
 
		<div id="modep1" style="position:absolute; left:12px; top:48px; width:250px; height:50px; z-index:1; visibility: hidden" align="left">
		&nbsp;&nbsp;&nbsp;Numéro de Chèque : <input type="text" name="nbch" value="" size="10">
		</div>
		<div id="modep2" style="position:absolute; left:12px; top:96px; width:250px; height:50px; z-index:1; visibility: hidden" align="left">
		&nbsp;&nbsp;&nbsp;Montant en chèques vacances : <input type="text" name="ancv" value="" size="10">
		</div>
 
  </main>
</body>
</html>

Onchange et affichage de div

JavaScript

Discussions similaires

Partager

Partager