formulaire : input caché

Version imprimable

Bonjour, je souhaite masquer sur un formulaire un champ "montant", puis le faire apparaître si le champ "Tarif" est sélectionné à "Payant" :

ici, le champ "montant" reste masqué...
merci.

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
<!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" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />	
<title><?php echo $nom_site ?></title>
<link rel="stylesheet" type="text/css" href="<?php echo $nom_style ?>" />
<script type="text/javascript" src="jquery-1.2.1.pack.js"></script>
 
<!-- montant caché si tarif Gratuit -->
<script type="text/javascript">
function showT()
{	var elem = document.getElementById("idSelect");var elem2 = document.getElementById("idInput");if(elem.value.match("Gratuit"))
	{		elem2.style.display='none'		}	else	{		elem2.style.display='inline';tabindex=7;} }
<!-- fin de tarif caché si gratuit -->
</script>
</head>
<body>
<label for="ev6">Tarif &nbsp; : &nbsp; </label>
<br />
<select name="tarif" tabindex="7" id="idSelect">
<option value="Gratuit"> Gratuit </option>
<option value="Payant"> Payant </option>
</select>
<br />
<br />
<label type="hidden"  onchange="showT();" for="ev12">Montant &nbsp; : &nbsp; </label>
<br />
<input type="hidden"  tabindex="9" id="idInput" onchange="showT();" name="montant" class="ev" />
.....

05/10/2011, 14h23
SpaceFrog

match => regxep non ?
ha non tiens ^^
05/10/2011, 14h23
Bovino

Code:



En JavaScript, les commentaires, c'est pas vraiment comme ça... :roll:
05/10/2011, 14h24
vermine

Bonjour,

La fonction doit être appelée sur le onchange du <select> et non pas sur celui du <label> (il n'y a d'ailleurs pas de onchange sur un <label>, je crois).

Ensuite, vous programmez en Javascript classique alors que vous utilisez jQuery. Pourquoi ne pas tout programmer en jQuery ? Je pense aux sélecteurs ainsi qu'à la gestion des évènements. ;)

j'ai modifié le onchange mais pas de changements...

Code:

1
2
3
4
5
6
<label for="ev6">Tarif &nbsp; : &nbsp; </label>
<br />
<select name="tarif" tabindex="7" onchange="showT();" id="idSelect" class="ev">
<option value="Gratuit"> Gratuit </option>
<option value="Payant"> Payant </option>
</select>

05/10/2011, 15h07
vermine

Parce que montant est un champs hidden :

Code:

<input type="hidden" tabindex="9" id="idInput" onchange="showT();" name="montant" class="ev" />

;)
05/10/2011, 15h11
fazpedro

@ vermine, oui mais si j'enlève "hidden" :
le champ "montant" apparait dès le départ et reste affiché même si j'indique "Gratuit"...

Ne confondez pas le type d'un champs (ici hidden) et son style (ici display mais ça aurait pu être visibility).

Un champs hidden restera caché. C'est son type.
Donc mettez un champs de type="text" avec un style="display:none".

Et ça marche avec votre fonction (sans le commentaire HTML en plein milieu du Javascript comme l'a dénoncé Bovino) :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function showT() { var elem = document.getElementById("idSelect"); var elem2 = document.getElementById("idInput"); if(elem.value.match("Gratuit")) { elem2.style.display='none' } else { elem2.style.display='inline'; tabindex=7; } }

Merci vermine,
effectivement...:calim2: ça fonctionne bien...j'suis pas très futé !

pour afficher le label "montant" uniquement si "Payant" ? j'ai essayé le code ci-dessous et cela fonctionne bien !

Merci beaucoup !!! :lol:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
function showT()
{	var elem = document.getElementById("idSelect");
	var elem2 = document.getElementById("idInput");
	var elem3 = document.getElementById("idlabel");
	if(elem.value.match("Gratuit"))
{	elem2.style.display='none';
	elem3.style.display='none';
	}	else	{
	elem2.style.display='inline';tabindex=7;
	elem3.style.display='inline'}
	}
.....
<label for="ev6">Tarif &nbsp; : &nbsp; </label>
<br />
<select name="tarif" tabindex="7" onchange="showT();" id="idSelect">
<option value="Gratuit"> Gratuit </option>
<option value="Payant"> Payant </option>
</select>
<br /><br />
<label id="idlabel" style="display:none" onchange="showT();" for="ev12">Montant &nbsp; : &nbsp; </label>
<br />
<input type="text" style="display:none" tabindex="9" id="idInput" name="montant" />