Input visible ou pas selon le choix d'un select

Version imprimable

26/05/2016, 11h05
CrasherSEP

Input visible ou pas selon le choix d'un select

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 :-)

Code:

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>

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

Code:

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:

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

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

Code:

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 ?...

26/05/2016, 14h02
CrasherSEP

Super, merci :-)
26/05/2016, 19h22
NoSmoking

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.
27/05/2016, 08h35
chadoum

Oui en effet, ou avec jQuery...

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:

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 :-)

27/05/2016, 19h18
NoSmoking

Citation:

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.