formulaire : input caché

**fazpedro** · 05/10/2011, 15h19

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 :

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
<!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" />
.....

**SpaceFrog** · 05/10/2011, 15h23

match => regxep non ?
ha non tiens ^^

**Bovino** · 05/10/2011, 15h23

Code :

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

<!-- fin de tarif caché si gratuit -->

En JavaScript, les commentaires, c'est pas vraiment comme ça...

**vermine** · 05/10/2011, 15h24

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.

**fazpedro** · 05/10/2011, 16h01

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

Code :

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

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>

**vermine** · 05/10/2011, 16h07

Parce que montant est un champs hidden :

Code :

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

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

**fazpedro** · 05/10/2011, 16h11

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

**vermine** · 05/10/2011, 16h16

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 :

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

formulaire : input caché

jQuery

Vue hybride

Discussions similaires

Partager

Partager