formulaire : input caché [Résolu]

fazpedro · 05/10/2011, 14h19

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, 14h23

match => regxep non ?
ha non tiens ^^

Bovino · 05/10/2011, 14h23

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, 14h24

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, 15h01

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, 15h07

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, 15h11

@ 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, 15h16

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

fazpedro · 05/10/2011, 15h47

Merci vermine,
effectivement...

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

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

05/10/2011, 14h23	#2
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 040 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 040 Points : 45 141 Points : 45 141	match => regxep non ? ha non tiens ^^ __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

05/10/2011, 14h23	#3
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 807 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 807 Points : 35 789 Points : 35 789	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... __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

05/10/2011, 14h24	#4
vermine Responsable JavaScript & AJAX Inscription : mars 2008 Messages : 2 690 Détails du profil Informations personnelles : Âge : 27 Informations forums : Inscription : mars 2008 Messages : 2 690 Points : 5 763 Points : 5 763	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. __________________ Elen Poukram - Isegoria - Sandawe
	00

05/10/2011, 15h07	#6
vermine Responsable JavaScript & AJAX Inscription : mars 2008 Messages : 2 690 Détails du profil Informations personnelles : Âge : 27 Informations forums : Inscription : mars 2008 Messages : 2 690 Points : 5 763 Points : 5 763	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" /> __________________ Elen Poukram - Isegoria - Sandawe
	00

05/10/2011, 15h11	#7
fazpedro Membre du Club Inscription : août 2009 Messages : 360 Détails du profil Informations personnelles : Sexe : Localisation : France Informations forums : Inscription : août 2009 Messages : 360 Points : 64 Points : 64	@ 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"...
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email