javascript et style [Résolu]

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 :

Citation:

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

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

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

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

Sergejack · 08/11/2011, 13h04

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.

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

08/11/2011, 11h24	#4
Golgotha Modérateur cédric Développeur informatique Inscription : août 2007 Messages : 732 Détails du profil Informations personnelles : Nom : cédric Âge : 27 Localisation : France Informations professionnelles : Activité : Développeur informatique Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : août 2007 Messages : 732 Points : 1 562 Points : 1 562	Tu peux envoyer le code de ta page en entier ? Au moins le formulaire et le javascript concerné en entier. __________________ modérateur webmasters - développements web & php faq jQuery - règles du forum - faqs web mon espace perso Venez participez au deuxième defi Web !
	00

08/11/2011, 11h47	#6
Golgotha Modérateur cédric Développeur informatique Inscription : août 2007 Messages : 732 Détails du profil Informations personnelles : Nom : cédric Âge : 27 Localisation : France Informations professionnelles : Activité : Développeur informatique Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : août 2007 Messages : 732 Points : 1 562 Points : 1 562	C'est normale que le champs password ne soit pas là ? __________________ modérateur webmasters - développements web & php faq jQuery - règles du forum - faqs web mon espace perso Venez participez au deuxième defi Web !
	00

08/11/2011, 13h11	#13
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 808 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 808 Points : 35 793 Points : 35 793	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. __________________ 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

08/11/2011, 11h20	#3
pricedown Invité de passage Inscription : juillet 2008 Messages : 8 Détails du profil Informations forums : Inscription : juillet 2008 Messages : 8 Points : 2 Points : 2	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.
	00

08/11/2011, 12h15	#8
Sergejack Membre chevronné Inscription : juillet 2006 Messages : 1 194 Détails du profil Informations forums : Inscription : juillet 2006 Messages : 1 194 Points : 746 Points : 746	type="date", type="int", ... Y a que moi que ça interpelle ?
	10

08/11/2011, 13h54	#14
pricedown Invité de passage Inscription : juillet 2008 Messages : 8 Détails du profil Informations forums : Inscription : juillet 2008 Messages : 8 Points : 2 Points : 2	Merci beaucoup pour votre aide!
	00

08/11/2011, 14h21	#15
Willpower Membre Expert Boris Dessy sans emploi Inscription : décembre 2010 Messages : 872 Détails du profil Informations personnelles : Nom : Boris Dessy Localisation : Belgique Informations professionnelles : Activité : sans emploi Informations forums : Inscription : décembre 2010 Messages : 872 Points : 1 381 Points : 1 381	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).
	00

08/11/2011, 14h45	#17
pricedown Invité de passage Inscription : juillet 2008 Messages : 8 Détails du profil Informations forums : Inscription : juillet 2008 Messages : 8 Points : 2 Points : 2	J'ai essayé avec backgroundColor (document.forms["feuille"].route.backgroundColor="grey";) mais j'ai le même résultat.
	00

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