Input visible ou pas selon le choix d'un select

**CrasherSEP** · 26/05/2016, 11h05

Bonjour,

J'ai une liste déroulante avec plusieurs choix. un des choix est : "autre"

J'aimerais faire apparaitre un input juste en dessous si le choix se porte sur "autre".

J'ai cherché sur le web, mais je n'ai rien trouvé de concluant...

Pourriez-vous m'aider ?

Merci d'avance :-)

**chadoum** · 26/05/2016, 12h23

Code :

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
 
<!DOCTYPE html>
<html>
<head>
    <title></title>
	<meta charset="utf-8" />
 
</head>
<body>
    <select id="ddl">
        <option value="test">TEST</option>
        <option value="other">AUTRE</option>
    </select>
    <input type="text" name="name" id="inputToDisplay" style="display:none" />
    <script>
        var select = document.getElementById( "ddl" )
        select.addEventListener( "change", function ( e )
        {
            var input = document.getElementById( "inputToDisplay" )
 
            if ( e.target.value == "other" )
                input.style.display = "inline-block"
            else
                input.style.display = "none"
        } )
    </script>
</body>
</html>

**CrasherSEP** · 26/05/2016, 13h32

Merci, cela fonctionne nickel... mais j'aimerais plutôt comme cela, et là ça ne fonctionne pas...

Code :

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
<!DOCTYPE html>
<html>
<head>
    <title></title>
	<meta charset="utf-8" />
 
<script language="Javascript">
function activer() 
{
          var select = document.getElementById( "ddl" )
        select.addEventListener( "change", function ( e )
        {
            var input = document.getElementById( "inputToDisplay" )
 
            if ( e.target.value == "other" )
                input.style.display = "inline-block"
            else
                input.style.display = "none"
        } )
    </script>
 
</head>
<body>
    <select id="ddl" onchange="activer();">
        <option value="test">TEST</option>
        <option value="other">AUTRE</option>
    </select>
    <input type="text" name="name" id="inputToDisplay" style="display:none" />
 
</body>
</html>

J'aimerais en plus de faire apparaitre l'input "inputToDisplay", faire aussi apparaitre un petit texte juste avant :

- Si autre : [Input]

Ps : Est-il possible d'utiliser ces commandes au lieu des vôtres ?

Code :

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

1
2
document.pgenerate.autres.hidden=true;
document.pgenerate.autres.disabled=true;

**chadoum** · 26/05/2016, 13h47

Pour déclencher l'action à partir du onchange, tu dois modifier ce qui se passe dans ta fonction Activer :

Code :

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
 
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
 
    <script>
        function activer()
        {
            var select = document.getElementById( "ddl" )
 
            var otherFields = document.querySelectorAll( ".toDisplay" )
 
            if ( select.value == "other" )
                Array.from( otherFields ).forEach( function ( input ) { input.style.display = "inline-block" } )
            else
                Array.from( otherFields ).forEach( function ( input ) { input.style.display = "none" } )
        }
    </script>
 
</head>
<body>
    <select id="ddl" onchange="activer();">
        <option value="test">TEST</option>
        <option value="other">AUTRE</option>
    </select>
    <span class="toDisplay" style="display:none">Si autre : </span>
    <input type="text" name="name" class="toDisplay" style="display:none" />
 
</body>
</html>

J'ai également ajouté le champ texte avant l'input mais je pense que tu aurais pu le faire seul !

Pour la dernère question, je ne sais pas d'où te vient la propriété pgenerate sur document ?...

**CrasherSEP** · 26/05/2016, 14h02

Super, merci :-)

**NoSmoking** · 26/05/2016, 19h22

Bonjour,
Attention toutefois Array.from( otherFields ).forEach( n'est pris en compte par IE que dans sa déclinaison EDGE, il faudra surement avoir recours à un polyfill.

**chadoum** · 27/05/2016, 08h35

Oui en effet, ou avec jQuery...

**CrasherSEP** · 27/05/2016, 14h08

Suite aux différents messages, serait-il possible de faire fonctionner ceci avec un select ?

Exemple : si le choix du select est "autres" alors l'input apparait ainsi que le texte "Si autres :". Je n'y arrive pas... :-(

Code :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
 
<script language="Javascript">
function activer()
{
document.pgenerate.autres.disabled=false;
document.pgenerate.autres.hidden=false;
document.pgenerate.autres2.visibility="hidden";
}
</script>
 
<script language="Javascript">
function desactiver()
{
document.pgenerate.autres.disabled=true;
document.pgenerate.autres.hidden=true;
document.pgenerate.autres.value="";
document.pgenerate.autres2.visibility="visible";
}
</script>
 
 
<script language="Javascript">
function activer2()
{
if (document.pgenerate.checkbox2.checked == "other" )
{
document.pgenerate.autres.disabled=false;
document.pgenerate.autres.hidden=false;
document.pgenerate.autres2.visibility="hidden";
}
else
{
document.pgenerate.autres.disabled=true;
document.pgenerate.autres.hidden=true;
document.pgenerate.autres.value="";
document.pgenerate.autres2.visibility="visible";
}}
</script>
 
 
</head>
 
<body>
<div id="contener">
<table width="480" height="200" border="0" align="left" cellpadding="0" cellspacing="0" bordercolor="#0000CC" bgcolor="#eaeff5">
  <tr> 
    <td width="480" height="200" align="left" valign="top"> 
      <form action="php/fichier.php" method="post" name="pgenerate">
	    <div align="left"><a name="debutformulaire" id="debutformulaire"></a></div>
        <table width="563" height="105" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td width="48" height="30">&nbsp;</td>
            <td width="515" height="30"><p>
  <input id="oui" type="radio" name="inscription" value="oui" onclick="activer()"/>
  Oui<br>
  <input name="inscription" type="radio" id ="non" onfocus="desactiver()" value="non" checked="checked" />
  Non</p></td>
          </tr>
          <tr>
            <td height="30">&nbsp;</td>
            <td height="30">
            <select name="checkbox2" id="checkbox2" onclick="activer2()">
              <option value="1">un</option>
              <option value="2">deux</option>
              <option value="other">autres</option>
            </select></td>
          </tr>
          <tr>
            <td height="30">&nbsp;</td>
            <td height="30"><p><span name="autres2" id="autres2" style="visibility: hidden">Si autres : </span>
				<input name="autres" type="text" id="autres" size="40" disabled=true hidden=true/>
            </p></td>
          </tr>
          <tr>
            <td height="15" colspan="2">&nbsp;</td>
          </tr>
        </table>
        <p align="right"> 
          <input type="button" value="Envoyer" onclick="verif(this.form);"/>
          <input type="reset" value="Effacer" />
        </p>
      </form>    </td>
  </tr>
</table>                  
</body>
</html>

Grand merci :-)

**NoSmoking** · 27/05/2016, 19h18

document.pgenerate.autres2.visibility="hidden";

tu le sort d'où cet élément autres2, pas de trace dans ton code.

Remarques :

• <script language="Javascript"> est obsolète, mettre <script type="text/javascript"> ou en HTML5 <script> tout court.

• Même si ton écriture n'est pas incorrecte, pour la récupération des éléments autant utiliser document.getElementById, document.querySelector ou document.querySelectorAll.

Input visible ou pas selon le choix d'un select

JavaScript

Discussions similaires

Partager

Partager