javascript et style

Version imprimable

08/11/2011, 11h12
pricedown

javascript et style
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:

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:

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
08/11/2011, 11h16
Golgotha

Bonjour,

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

Citation:

document.forms["feuille"].toDelete.style.background="white";
08/11/2011, 11h20
pricedown

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.
08/11/2011, 11h24
Golgotha

Tu peux envoyer le code de ta page en entier ?

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

Bien sur. Voila:

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

08/11/2011, 11h47
Golgotha

C'est normale que le champs password ne soit pas là ?
08/11/2011, 11h50
pricedown

Citation:

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).
08/11/2011, 12h15
Sergejack

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

Y a que moi que ça interpelle ?

Bon...

C'est pas comme ça qu'on fait :aie:

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:

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:

1 2 3 4 <input type="radio" name="radio" value="display" id="display" onclick="changeCheck()" "/> <label for="display">Display</label> <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.

Voici un exemple complet :

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

08/11/2011, 12h38
Bovino

Citation:

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 ;)
08/11/2011, 13h04
Sergejack

Citation:

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.
08/11/2011, 13h11
Bovino

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.
08/11/2011, 13h54
pricedown

Merci beaucoup pour votre aide!
08/11/2011, 14h21
Willpower

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).

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:

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>

08/11/2011, 14h45
pricedown

J'ai essayé avec backgroundColor (document.forms["feuille"].route.backgroundColor="grey";) mais j'ai le même résultat.
08/11/2011, 14h50
Golgotha
Ce n'est pas encore tout à fait ça...

Je vais tenter de t'expliquer simplement.

cette ligne la :

Code:

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:

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

Ensuite il faut mettre un "else"

Code:

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:

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é .... }