Activer ou afficher une balise SELECT si un INPUT type TEXT n'est pas vide

Version imprimable

Bonsoir, :coucou:

Je m'adresse à vous car après des recherches je n'ai pas trouvé la solution.

Il s'agit de d'activer ou afficher une balise SELECT si un INPUT type TEXT n'est pas vide ?

Voici mon code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
        function verif_champ(champ)
        {
        if(document.getElementById('champ').value == '')
                document.getElementById('select').disabled=true;
        else
                document.getElementById('select').disabled=false;
        }
        </script><br>
	<form name='form1' onsubmit='return verif_champ(document.form1.champ.value)'/>
		<input type="text" name ="champ" Style ="margin-left:0px"/>
		<select id="liste_5" name="select" disabled="disabled" Style ="margin-left:0px; margin-top:0px; height:20px"> 
			<option value="" selected="selected"> </option> 
			<option value="test1">test1</option> 
			<option value="test2">test2</option> 
		</select>
	</form>

Mais ça ne fonctionne pas. :calim2:

Merci d'avance pour votre aide.

20/12/2021, 09h05
ProgElecT

Salut

Plutôt que disabled qui fait annuler les événements mais laisse visible le select, utilises visibility ==> hidden/visible ou bien display ==>none/block.
De plus il faut capturer l'événement onchange sur l'input type="text" pour que ta fonction soit jouée.

Code:

<input type="text" name ="champ" onchange="verif_champ(this)" Style ="margin-left:0px"/>

Bonjour ProgElecT, :D

Je précise avant tout que j'ai une faible notion de Javascript.

Finalement j'ai suivi vos conseils, et je préfère rendre visible la balise SELECT sur clic de l'INPUT "Filtrer" si l'INPUT type TEXT n'est pas vide.

Voici mon code rectifié :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
	<script>
        function verif_champ(champ)
        {
        if(document.getElementById('champ').value == '')
                document.getElementById('select').style.visibility= 'hidden';
        else
                document.getElementById('select').style.visibility = 'visible';
        }
        </script><br>
	<form name='form1'/>
		<input type="text" name ="champ" required Style ="margin-left:0px"/>
		<input type="submit" name='filtrer' onchange="verif_champ(this)" Style ="margin-left:0px" value="Filtrer"/>
		<select id="liste_5" name="select" Style ="margin-left:0px; margin-top:0px; height:20px"> 
			<option value="" selected="selected"> </option> 
			<option value="test1">test1</option> 
			<option value="test2">test2</option> 
		</select>
	</form>

Mais ça ne fonctionne pas ? :aie:

J'ai amélioré mon code, il me reste plus qu'à coder la condition que l'INPUT type TEXT NE SOIT PAS VIDE.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
	<script> 
        function activList(){ 
                if(document.getElementById('liste_5').style.visibility= 'hidden')
                        document.getElementById('liste_5').style.visibility= 'visible';
                else 
                        document.getElementById('liste_5').style.visibility= 'hidden';
        } 
        function activList2(){ 
                        document.getElementById('liste_5').style.visibility= 'hidden';
        } 
        </script> 
 
	<input type="text" name ="champ" onClick="activList2()" Style ="margin-left:0px; margin-top:0px; margin-bottom:0px"/>
	<input type="submit" name='filtrer' Style ="margin-left:0px; margin-top:0px" value="Filtrer" onClick="activList()"/>	
	<select id="liste_5" name="date" class="hide" Style ="margin-left:0px; margin-top:5px; height:20px"> 	
	<option value="" selected="selected"> </option> 
	<option value="test1">test1</option> 
	<option value="test2">test2</option> 
	</select><br><br>

Re

Petites modification de ton code,

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
	<script> 
                function activList(elem){ 
                        let str = elem.value;
                        if(str.trim() === ''){
                                document.getElementById('liste_5').style.visibility= 'hidden';
                        }else{
                                document.getElementById('liste_5').style.visibility= 'visible';
                        }
                }//------------------------------------------------------------------------------------------
                function activList2(){ 
                        document.getElementById('liste_5').style.visibility= 'hidden';
                }//------------------------------------------------------------------------------------------ 
        </script> 
 
	<input type="text" name ="champ" oninput="activList(this)" Style ="margin-left:0px; margin-top:0px; margin-bottom:0px"/>
	<input type="submit" name='filtrer' Style ="margin-left:0px; margin-top:0px" value="Filtrer" onclick="activList2()"/>	
	<select id="liste_5" name="date" class="hide" Style ="margin-left:0px; margin-top:5px; height:20px"> 	
	<option value="" selected="selected"> </option> 
	<option value="test1">test1</option> 
	<option value="test2">test2</option> 
	</select><br><br>

<input type="text" de onchange passe en oninput de façon à réagir à chaque appuis sur une touche du clavier.
De plus, pour être sûr que l'entrée utilisateur n'est pas que des espaces, passe par la fonction native trim().
Je ne comprend pas totalement l'utilité de la fonction activList2(), à voire plus tard je pense.

20/12/2021, 19h17
modus57

Bonsoir ProgElecT,

Je ne connaissais pas oninput que je découvre dans votre code qui fonctionne super bien et en effet fonction activList2() n'a aucune utilité dans votre solution.

La fonction activList2() dans mon code permet sur clic de l'INPUT type TEXT de masquer la balise SELECT.

Elle est inutile maintenant.

Merci beaucoup pour votre aide. :ccool:

C'est en bûchant qu'on devient bûcheron.