javascript et style

**pricedown** · 08/11/2011, 11h12

Bonjour

Je suis en train de cr�er mon premir site web et j'ai un soucis avec javascript:

J'ai cr�� un formulaire et j'ai par d�faut gris� certains champs :

Code html :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
<td><input type="date" name="toDelete" disabled=true style="background:grey"  /></td>
 
<td><input type="text" name="sqlRequest" disabled=true style="background:grey" />

Lorsqu'une case est coch� (onclick="checkadd();"), je d�grise ces champs.

Lorsque cette case est � nouveau d�coch�e, j'aimerais pouvoir regriser les champs. Probl�me : seule la premi�re case est regris�e. J'utilise cette fonction ci-dessous et seule la premi�re ligne est prise en compte. Savez vous pourquoi ?

Code js :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
document.forms["feuille"].password.style.background="white";
document.forms["feuille"].todelete.style.background="white";
document.forms["feuille"].sqlRequest.style.background="white";

Merci d'avance,

Michael

**Golgotha** · 08/11/2011, 11h16

Bonjour,

Il me semble que c'est sensible � la casse :

document.forms["feuille"].toDelete.style.background="white";

**pricedown** · 08/11/2011, 11h20

Merci pour la r�ponse. Mais le probleme ne vient pas de la:
j'ai mal recopi�, en v�rit� dans mon code il n'y a pas de majuscules nul part.

**Golgotha** · 08/11/2011, 11h24

Tu peux envoyer le code de ta page en entier ?

Au moins le formulaire et le javascript concern� en entier.

**pricedown** · 08/11/2011, 11h42

Bien sur. Voila:

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
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
<!-- formulaire -->
<form name="feuille" action="process.php" method="post">
<p>
<table>
<tr>
<td>Date: </td>
<td><input type="date" name="date" title="2010-10-31" /></td>
</tr>
<tr>
<td>Distance: </td>
<td><input type="int" name="distance" title="100" /></td>
</tr>
<tr>
<td>Speed: </td>
<td><input type="int" name="speed" title="25" /></td>
</tr>
<tr>
<td>Route: </td>
<td><input type="text" name="route" title="Gergovie Berzet" /><td/>
</tr>
<tr>
<td>Comments: </td>
<td><input type="text" name="comments" title="crevaison" /><td/>
</tr>
<tr>
<td>Date of entry to delete: </td>
<td><input type="date" name="todelete" title="2010-10-31" disabled=true style="background:grey"  /></td>
</tr>
<tr>
<td>SQL Request: </td>
<td><input type="text" name="sqlRequest" title="ex1:comments LIKE '%crevaison%'      ex2:route like '%berzet%'      ex3:date>'2010-10-10' AND date <'2010-12-12'      ex4:distance=45" disabled=true style="background:grey" />
<td/>
</tr>
<tr>
<td colspan="2" class="moreSpace">
<input type="radio" name="action" value="display" id="display" checked="checked" onfocus="decheck();"/> <label for="display">Display</label><!-- checked = "checked" permet de selectionner cette valeur par defaut-->
<input type="radio" name="action" value="add" id="add" onclick="checkadd();" /> <label for="add">Add</label>
<input type="radio" name="action" value="delete" id="delete" onclick="checkdelete();" /> <label for="delete">Delete</label>
<input type="radio" name="action" value="request" id="request" onclick="checksql();"/> <label for="request"> SQL Request</label>
 
 
 
 
<!--functions javascript to greyed/degreyed cases-->
<script type="text/javascript">
function checkadd() {
document.forms["feuille"].password.disabled = false;
document.forms["feuille"].password.style.background="white";
}
 
function checkdelete() {
document.forms["feuille"].password.disabled = false;
document.forms["feuille"].todelete.disabled = false;
document.forms["feuille"].password.style.background="white";
document.forms["feuille"].todelete.style.background="white";
}
 
function checksql() {
document.forms["feuille"].sqlRequest.disabled = false;
document.forms["feuille"].sqlRequest.style.background="white";
}
 
function decheck() {
document.forms["feuille"].password.disabled = true;
document.forms["feuille"].sqlRequest.value = "";
document.forms["feuille"].todelete.disabled = true;
document.forms["feuille"].todelete.value = "";
document.forms["feuille"].sqlRequest.disabled = true;
document.forms["feuille"].sqlRequest.value = "";
document.forms["feuille"].password.style.background="grey";
document.forms["feuille"].todelete.style.background="grey";
document.forms["feuille"].sqlRequest.style.background="grey";
}
</script>
</td>
</tr>
<tr>
<td>Password: </td>
<td><input type="password" name="password" title="BDL......" <?php if (isset($_SESSION['password'])) echo 'value=' . $_SESSION['password']?> disabled=true style="background:grey"  /></td>
</tr>
<tr>
<td colspan="2" class="moreSpace"><input type="submit" value=" Submit " /></td>
</tr>
</table>
</form>

**Golgotha** · 08/11/2011, 11h47

C'est normale que le champs password ne soit pas l� ?

**pricedown** · 08/11/2011, 11h50

Envoy� par Golgotha

C'est normale que le champs password ne soit pas l� ?

Je ne voulais pas trop surcharger la page pour faciliter la lecture donc je n'avais pas recopi� le champ password. J'ai �dit� mon message pr�c�dent pour rajouter ce bout de code (il est � la fin).

**Sergejack** · 08/11/2011, 12h15

type="date", type="int", ...

Y a que moi que �a interpelle ?

**Golgotha** · 08/11/2011, 12h16

Bon...

C'est pas comme �a qu'on fait

Pour les radios button, tu va avoir une liste en fait � parcourir dans ton formulaire, et c'est � toi de tester si oui ou non c'est check�.

Tu peux toujours d�couper en plusieurs fonctions pour gerer le check de chaque champs individuellement mais il n'y aura qu'une fonction d'entr� pour tout les radios... je sais pas si je suis claire.

voici un exemple pour ton cas qui g�re le check sur le champs sql :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
function changeCheck() {
  if (document.forms["feuille"].radio[3].checked){
    document.forms.feuille.sqlRequest.disabled = false;
    document.forms["feuille"].sqlRequest.style.background="white";
  }else{
    document.forms["feuille"].sqlRequest.disabled = true;
    document.forms["feuille"].sqlRequest.style.background="grey";
  }
}

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
<input type="radio" name="radio" value="display" id="display" onclick="changeCheck()" "/> <label for="display">Display</label><!-- checked = "checked" permet de selectionner cette valeur par defaut-->
<input type="radio" name="radio" value="add" id="add" onclick="changeCheck()" /> <label for="add">Add</label>
<input type="radio" name="radio" value="delete" id="delete" onclick="changeCheck()" /> <label for="delete">Delete</label>
<input type="radio" name="radio" value="request" id="request" onclick="changeCheck()"/> <label for="request"> SQL Request</label>

Je vais essayer de te fournir une page de test avec 2 radios et 2 champs.

**Golgotha** · 08/11/2011, 12h25

Voici un exemple complet :

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
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
 
<!--functions javascript to greyed/degreyed cases-->
<script type="text/javascript">
 
 
function changeCheck() {
 
  if (document.forms["feuille"].rad[0].checked){
    document.forms.feuille.nom.disabled = false;
    document.forms["feuille"].nom.style.background="white";
  }else{
    document.forms["feuille"].nom.disabled = true;
    document.forms["feuille"].nom.style.background="grey";
  }
 
  if (document.forms["feuille"].rad[1].checked){
    document.forms.feuille.prenom.disabled = false;
    document.forms["feuille"].prenom.style.background="white";
  }else{
    document.forms["feuille"].prenom.disabled = true;
    document.forms["feuille"].prenom.style.background="grey";
  }
}
 
</script>
  </head>
  <body>
<!-- formulaire -->
  <form name="feuille" action="#" >
    <input name="nom" value="Nom" />
    <input name="prenom" value="Prenom" /><BR>
    Nom : <INPUT TYPE="radio" NAME="rad" Value="Nom" onClick=changeCheck()>
    Prenom :<INPUT TYPE="radio" NAME="rad" Value="Prenom" onClick=changeCheck()>
  </form>
 
  </body>
</html>

Si tu as des questions, n'h�site pas.

**Bovino** · 08/11/2011, 12h38

Envoy� par Sergejack

type="date", type="int", ...

Y a que moi que �a interpelle ?

Le type int oui, il s'agit en fait de "number" mais sinon ce sont des types accept�s pat HTML5

**Sergejack** · 08/11/2011, 13h04

Envoy� par Bovino

Le type int oui, il s'agit en fait de "number" mais sinon ce sont des types accept�s pat HTML5

Ce ne sont pas des types qui me semblent encore enti�rement support�s.
Loin de l�, sur FF7.

**Bovino** · 08/11/2011, 13h11

Certes, mais ce n'est pas pour autant qu'on ne peut pas les utiliser

Les navigateurs qui ne les supportent pas (encore ?) les traiteront juste comme des input text.

**pricedown** · 08/11/2011, 13h54

Merci beaucoup pour votre aide!

**Willpower** · 08/11/2011, 14h21

petite parenth�se au probl�me, au lieu d'utiliser la propri�t� css "background" qui peut prendre de trucs diff�rents en param�tres (url, couleur, position, etc...) j'utiliserai la propri�t� plus cibl�e si tu ne l'utilises que pour changer la couleur : "background-color" (css) et "backgroundColor" (javascript).

**pricedown** · 08/11/2011, 14h34

J'ai essay� de respecter ce que vous m'avez dit. Ca marche tres bien pour les disabled mais j'ai toujours le meme probleme qu'initialement avec style.background: seule la premiere case change de couleur. Une id�e?

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
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
127
128
129
130
131
<!-- formulaire -->
<form name="feuille" action="process.php" method="post">
<p>
<table>
<tr>
<td>Date: </td>
<td><input type="date" name="date" title="2010-10-31" disabled=true style="background:grey" /></td>
</tr>
<tr>
<td>Distance: </td>
<td><input type="number" name="distance" title="100" disabled=true style="background:grey" /></td>
</tr>
<tr>
<td>Speed: </td>
<td><input type="number" name="speed" title="25" disabled=true style="background:grey" /></td>
</tr>
<tr>
<td>Route: </td>
<td><input type="text" name="route" title="Gergovie Berzet" disabled=true style="background:grey" /><td/>
</tr>
<tr>
<td>Comments: </td>
<td><input type="text" name="comments" title="crevaison" disabled=true style="background:grey" /><td/>
</tr>
<tr>
<td>Date of entry to delete: </td>
<td><input type="date" name="todelete" title="2010-10-31" disabled=true style="background:grey"  /></td>
</tr>
<tr>
<td>SQL Request: </td>
<td><input type="text" name="sqlRequest" title="ex1:comments LIKE '%crevaison%'      ex2:route like '%berzet%'      ex3:date>'2010-10-10' AND date <'2010-12-12'      ex4:distance=45" disabled=true style="background:grey" />
<td/>
</tr>
<tr>
<td colspan="2" class="moreSpace">
<input type="radio" name="action" value="display" id="display" checked="checked" onclick="changeCheck();"/> <label for="display">Display</label><!-- checked = "checked" permet de selectionner cette valeur par defaut-->
<input type="radio" name="action" value="add" id="add" onclick="changeCheck();" /> <label for="add">Add</label>
<input type="radio" name="action" value="delete" id="delete" onclick="changeCheck();" /> <label for="delete">Delete</label>
<input type="radio" name="action" value="request" id="request" onclick="changeCheck();"/> <label for="request"> SQL Request</label>
 
<!--functions javascript to greyed/degreyed cases-->
<script type="text/javascript">
function changeCheck() {
if (document.forms["feuille"].action[0].checked){//display
document.forms.feuille.date.disabled = true;
document.forms.feuille.distance.disabled = true;
document.forms.feuille.speed.disabled = true;
document.forms.feuille.route.disabled = true;
document.forms.feuille.comments.disabled = true;
document.forms.feuille.todelete.disabled = true;
document.forms.feuille.sqlRequest.disabled = true;
document.forms.feuille.password.disabled = true;
document.forms["feuille"].date.style.background="grey";
document.forms["feuille"].distance.style.background="grey";
document.forms["feuille"].speed.style.background="grey";
document.forms["feuille"].route.style.background="grey";
document.forms["feuille"].comments.style.background="grey";
document.forms["feuille"].todelete.style.background="grey";
document.forms["feuille"].sqlRequest.style.background="grey";
document.forms["feuille"].password.style.background="grey";
} 
  
else if (document.forms["feuille"].action[1].checked){//add
document.forms.feuille.date.disabled = false;
document.forms.feuille.distance.disabled = false;
document.forms.feuille.speed.disabled = false;
document.forms.feuille.route.disabled = false;
document.forms.feuille.comments.disabled = false;
document.forms.feuille.todelete.disabled = true;
document.forms.feuille.sqlRequest.disabled = true;
document.forms.feuille.password.disabled = false;
document.forms["feuille"].date.style.background="white";
document.forms["feuille"].distance.style.background="white";
document.forms["feuille"].speed.style.background="white";
document.forms["feuille"].route.style.background="white";
document.forms["feuille"].comments.style.background="white";
document.forms["feuille"].todelete.style.background="grey";
document.forms["feuille"].sqlRequest.style.background="grey";
document.forms["feuille"].password.style.background="white";
}
 
else if (document.forms["feuille"].action[2].checked){//delete
document.forms.feuille.date.disabled = true;
document.forms.feuille.distance.disabled = true;
document.forms.feuille.speed.disabled = true;
document.forms.feuille.route.disabled = true;
document.forms.feuille.comments.disabled = true;
document.forms.feuille.todelete.disabled = false;
document.forms.feuille.sqlRequest.disabled = true;
document.forms.feuille.password.disabled = false;
document.forms["feuille"].date.style.background="grey";
document.forms["feuille"].distance.style.background="grey";
document.forms["feuille"].speed.style.background="grey";
document.forms["feuille"].route.style.background="grey";
document.forms["feuille"].comments.style.background="grey";
document.forms["feuille"].todelete.style.background="white";
document.forms["feuille"].sqlRequest.style.background="grey";
document.forms["feuille"].password.style.background="white";
}
 
else if (document.forms["feuille"].action[3].checked){//sql request
document.forms.feuille.date.disabled = true;
document.forms.feuille.distance.disabled = true;
document.forms.feuille.speed.disabled = true;
document.forms.feuille.route.disabled = true;
document.forms.feuille.comments.disabled = true;
document.forms.feuille.todelete.disabled = true;
document.forms.feuille.sqlRequest.disabled = false;
document.forms.feuille.password.disabled = true;
document.forms["feuille"].date.style.background="grey";
document.forms["feuille"].distance.style.background="grey";
document.forms["feuille"].speed.style.background="grey";
document.forms["feuille"].route.style.background="grey";
document.forms["feuille"].comments.style.background="grey";
document.forms["feuille"].todelete.style.background="grey";
document.forms["feuille"].sqlRequest.style.background="white";
document.forms["feuille"].password.style.background="grey";
}
}
</script>
</td>
</tr>
<tr>
<td>Password: </td>
<td><input type="password" name="password" title="BDL......" <?php if (isset($_SESSION['password'])) echo 'value=' . $_SESSION['password']?> disabled=true style="background:grey"  /></td>
</tr>
<tr>
<td colspan="2" class="moreSpace"><input type="submit" value=" Submit " /></td>
</tr>
</table>
</form>

**pricedown** · 08/11/2011, 14h45

J'ai essay� avec backgroundColor (document.forms["feuille"].route.backgroundColor="grey";) mais j'ai le m�me r�sultat.

**Golgotha** · 08/11/2011, 14h50

Ce n'est pas encore tout � fait �a...

Je vais tenter de t'expliquer simplement.

cette ligne la :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

if (document.forms["feuille"].action[0].checked)

veux dire : Si le radio n�1 est coch�.
donc, dans ce if, on va mettre seulement ce qui doit �tre fait dans ce cas.
Qu'est ce qui change dans mon interface quand ce bouton est coch� ?

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

{ ... action associé au check de radio n° 1 ... }

Ensuite il faut mettre un "else"

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

else { ... action associ� au d�-check de radio n� 1 ... }

Ici on aura tout ce que tu veux changer dans ton interface quand le radio n� 1 est mis � vide, ou "d�coch�"

Ce qui donne pour le radio n� 1 :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
if (document.forms["feuille"].action[0].checked){

// .... Le bouton 1 � �t� coch� ....
} else  {

// .... Le bouton 1 � �t� d�coch� ....
}

javascript et style

JavaScript

Discussions similaires

Partager

Partager