javascript et style

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

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, 12h16

Bonjour,

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

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

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

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

Tu peux envoyer le code de ta page en entier ?

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

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

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, 12h47

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

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

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, 13h15

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

Y a que moi que ça interpelle ?

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

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, 13h25

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, 13h38

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

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

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

Merci beaucoup pour votre aide!

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

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

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

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

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

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