Désactiver champ via <SELECT>

**BnA** · 19/02/2007, 16h51

Bonjour à tous!!

Voilà, j'ai un petit formulaire de contact pour un site marchand.

Sur ce formulaire il y a une balise <select> avec 3 options:

- PARTICULIERS

- ENTREPRISES

- EDUCATION

J'aimerais, lorsque "PARTICULIERS" est sélectionné, désactiver un <input> de mon formulaire (le mettre en "disabled" ou bien le cacher totalement, peu importe). Seulement je n'ai aucune idée de comment m'y prendre.

Voici mon code (je ne mets pas le CSS, inutile)

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>ELLA - Formulaire de contact </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="presentation-contact.css" rel="stylesheet" type="text/css">	
<SCRIPT language="javascript">
		function checkForm()
		{		
			var dest = document.contact.destinataire.value;
			if (dest=="notFilled")
			{
				alert("Veuillez remplir le champ \"Comment avez-vous connu le site Ella?\"");
				return false;
			}
			return true;
		}
</SCRIPT>
</head>
<!-- Heavy modifications by Lénaïc on 19/02/2007 -->
<body>
<!--<form name="contact" method="post" action="mailto:contact@ella.be">-->
 
<div id="container">
 
    <p class="title">Formulaire de contact</p>
 
   <p>Utilisez ce formulaire de contact direct afin d'obtenir des informations complémentaires sur ELLA ou sa gamme de produits</p>
 
   <p>Veuillez noter que <strong>TOUS les champs sont obligatoires</strong>.</p>
 
 
 
  <form name="contact" method="POST" action="/common/PostContact" onsubmit="return checkForm();">	 <!-- mod by py to change -->
 
	<!-- added by py -->
  <input type="hidden" name="usrlg" value="fr"/>
 
<table width="100%">
<tr>
<td width="42%" style="text-align:left;">
	Nom</td>
<td width="58%">
	<input name="nom" type="text" id="nom" class="text">
</td>
</tr>
<tr>
<td style="text-align:left;">
	Prénom
</td>
<td>
	<input name="prenom" type="text" id="prenom" class="text">
</td>
</tr>
<tr>
<td style="text-align:left;">
	Gamme
</td>
<td>
	<select name="secteur" style="width:200px;">
		<option>ELLA Particuliers</option>
		<option>ELLA Entreprises</option>
		<option>ELLA Education</option>	
	</select>
</td>
</tr>
<tr>
<td style="text-align:left;">
	Société / Organisme
</td>
<td>
	<input name="societe" type="text" id="societe2"  class="text">
</td>
</tr>
<tr>
<td style="text-align:left;">
	Adresse E-mail
</td>
<td>
	<input name="email" type="text" id="email"  class="text">
</td>
</tr>
<tr>
<td style="text-align:left;">
	Confirmer l'E-mail
</td>
<td>
	<input name="email2" type="text" id="email2"  class="text">
</td>
</tr>
<tr>
<td colspan="2">&nbsp;
 
</td>
</tr>
<tr>
<td style="text-align:left;">
	Objet du message
</td>
<td>
	<input name="objet" type="text" id="objet"  class="text">
</td>
</tr>
<tr>
<td colspan="2" style="text-align:left;">
	Votre message
</td>
</tr>
<tr>
<td colspan="2">
        <textarea name="message" id="textarea" rows="6" style="width:100%;"></textarea> 
</td>
</tr>
<tr>
<td colspan="2">
	<input name="reset" type="reset" value="Effacer" style="float:left;"/>
	<input type="submit" name="Submit" value="Envoyer" style="float:right;"/>
</td>
</tr>
</table>
 
</form>     
</body>
</html>

C'est la ligne juste après le <SELECT> qui doit être visible/invisible selon les cas.

Ma question est toute simple: comment m'y prendre?

Merci d'avance pour vos questions!

**DoubleU** · 19/02/2007, 18h12

Code :

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

1
2
3
4
5
6
 
<select name="secteur" style="width:200px;" onchange="hide()">
		<option>ELLA Particuliers</option>
		<option>ELLA Entreprises</option>
		<option>ELLA Education</option>	
</select>

et le javascript

Code :

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

1
2
3
4
5
6
7
8
9
 
function hide(){
 
	var objId = document.getElementById("select").value;
 
	if (objId == "ELLA Particuliers")
		document.getElementById("aCacher").style.display = "none";
 
}

Et tu mets dans une

Code :

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

<div id="aCacher" ></div>

ce que tu veux cacher.

Maintenant, avec ton tableau j'ai l'impression que ca met un peu le souk, et je ne crois pas qu'on puisse cacher des cellules d'un tableau (a confirmer ca) de cette facon.

Ca serait sans doute beaucoup plus simple de virer toutes tes cellules et de gérer ta mise en page avec du css.

Bon courage ^^

Désactiver champ via <SELECT>

JavaScript

Vue hybride

Discussions similaires

Partager

Partager