Discussion :

[modus57]

Bonsoir,

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

Merci d'avance pour votre aide.

[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 html :

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

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

[modus57]

Bonjour ProgElecT,

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

[modus57]

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

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

[ProgElecT]

Re

Petites modification de ton code,

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

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

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