Griser un champ text suivant le cochage d'une checkbox

**Seb981** · 10/08/2007, 11h21

Bonjour à tous,

Dans mes formulaires, j'ai plusieurs checkbox avec comme choix "oui" ou "non".
Ces checkbox servent à savoir si un outil appartient à un garage. Si on coche oui, un champ description est disponible, si on coche non, il n'y aura pas de liaison dans la table garage_outil et donc si il y a une description qui a été mise alors qu'il n'y a pas d'outil, cette description ne serra pas visible d'ou le choix de griser le champ description lorsque la checkbox est à non.

J'ai commencé à faire cette fonction mais celle-ci ne marche pas, rien ne se grise. Pourriez-vous m'aider à la faire marcher ? Mon deuxiéme probléme c'est que j'ai plusieurs checkbox et manquant cruellement de base en javascript je ne vois pas comment faire pour que ma fonction soit utilisable pour toutes les checkbox.

Le nom des chekbox sont un numéro
Le nom du champ a caché est : DESCRIPTIONOUTIL suivi du numéro de la checkbox

Voici mon code javascript :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<SCRIPT LANGUAGE="JavaScript">
function griser() {
	 with(document.insertion) {
	 	if(10.value != "oui") {
	 		DESCRIPTIONOUTIL10.disabled=true;
	 	}
		else {
	 		DESCRIPTIONOUTIL10.disabled=false;
	 	}
	 }
}
</SCRIPT>

Voici mon code html formaté

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
<head>
</head>
<body>
<form name="insertion" ... >
<table>
<tr><td class='fond_bleu1'>Outil</td>
	<td align='center' class='fond_bleu1'><input type ='radio' name=10 value='oui' />oui<input type ='radio' name=10 value='non' checked='checked' /> non &nbsp;&nbsp;</td>
	<td align='center' class='fond_bleu1'>(Description <input type ='text' name='DESCRIPTIONOUTIL10' size='25' onChange='griser()'/>)</td>
</tr>
</table>
</form>
</body>
</html>

**E.Bzz** · 10/08/2007, 11h41

Bonjour,

Code :

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

1
2
3
function griser(objInput) {
 objInput.disabled=!document.getElementById('10_oui').checked;
}

avec

Code :

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

1
2
3
<input type='radio' name="10" id="10_oui" value='oui' />oui<input type ='radio' name="10" id="10_non" value='non' checked='checked' /> non
...
<input type ='text' name='DESCRIPTIONOUTIL10' size='25' onChange='griser(this)'/>

A+

**Seb981** · 10/08/2007, 11h55

Merci pour ton aide. Mon champ text se grise bien mais il le fait après avoir plusieurs fois coché oui et non et reste après tout le temps bloqué.
Saurais-tu comment remedier à ce probléme ?

Est-on obligé de prendre un champ id ou peut-on prendre le champ name pour la fonction ?

Comme mes champs varient, il faudrait que je fasse :

Code :

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

1
2
3
 
$id="10_oui";
griser(this,\"".$id."\");

**E.Bzz** · 10/08/2007, 12h00

Envoyé par Seb981

Mon champ text se grise bien mais il le fait après avoir plusieurs fois coché oui et non et reste après tout le temps bloqué.

Aucune raison. Mais ça dépend comment tu as adapté le code ...

Comme mes champs varient, il faudrait que je fasse :

Code :

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

1
2
3
 
$id="10_oui";
griser(this,\"".$id."\");

Code :

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

1
2
3
4
5
function griser(objControlee, idControleur) {
 objControlee.disabled=!document.getElementById(idControleur).checked;
}
...
griser(this,\"".$id."\");

A+

**Seb981** · 10/08/2007, 13h15

je te met mon code texto de ma page de test si tu peux jeter un oeil dessus, car j'arrive pas à le faire fonctionner :

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
 
<html>
<head>
</head>
<body>
<SCRIPT LANGUAGE="JavaScript">
function griser(objControlee, idControleur) {
 objControlee.disabled=!document.getElementById(idControleur).checked;
}
</SCRIPT>
<form name="insertion">
<input type ='radio' name="10" id="10_oui" <? $id="10_oui"; ?> value='oui' />oui
<input type ='radio' name="10" id="10_non" <? $id="10_non"; ?> value='non' checked='checked' /> non
<?php echo("<input type ='text'  name='DESCRIPTIONOUTIL10' size='25' onChange='griser(this,\"".$id."\")' />"); ?>
</form>
</body>
</html>

Ci-dessus mon code rectifier, il me fait toujours quelque chose de bizarre avec le grisement : je clique sur oui, je met du texte dans le champ, je clique sur non et j'ai le grisement du texte qui reste coincé.

**E.Bzz** · 10/08/2007, 14h00

Code :

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

onChange='griser(this,"10_oui")'

... en enlevant le PHP des 2 lignes précédentes ...

A+

**Seb981** · 10/08/2007, 14h29

Merci mais j'ai réessayé en enlevant le php et j'ai toujours mon erreur : cette fois-ci en mettant du texte quand c'est coché non et en cochant après sur oui le champ text se bloque et reste tout le temp bloqué.

Voici mon code pourtant :

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
 
<html>
<head>
</head>
<body>
<SCRIPT LANGUAGE="JavaScript">
function griser(objControlee, idControleur) {
 objControlee.disabled=!document.getElementById(idControleur).checked;
}
</SCRIPT>
<form name="insertion">
<input type ='radio' name="10" id="10_oui" value='oui' />oui
<input type ='radio' name="10" id="10_non" value='non' checked='checked' />non
<input type ='text'  name='DESCRIPTIONOUTIL10' size='25' onChange='griser(this,"10_oui")' />
</form>
</body>
</html>

j'ai Mozilla/5.0 et ie6.0 as-tu une idée d'ou peut provenir le probléme ?

**E.Bzz** · 10/08/2007, 14h45

C'est normal : tu ne l'appelles que sur l'input text.
Ajoute

Code :

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

1
2
3
<input type ='radio' name="10" id="10_oui" value='oui' onchange='griser(document.getElementById("DESCRIPTIONOUTIL10"),"10_oui");'/>oui
<input type ='radio' name="10" id="10_non" value='non' checked='checked' onchange='griser(document.getElementById("DESCRIPTIONOUTIL10"),"10_oui");' />non
<input type ='text'  id='DESCRIPTIONOUTIL10' name='DESCRIPTIONOUTIL10' size='25' onChange='griser(this,"10_oui")' />

A+

**Seb981** · 10/08/2007, 14h54

merci !

Est ce qu'il y a moyen d'éviter ces erreurs :

sous ie :
au début c'est à non, on peut écrire du texte.
on coche oui, cela se bloque.
on coche non c'est bloqué.
on coche oui cela se débloque

sous mozilla :
au début c'est à non, on peut écrire du texte.

merci beaucoup en tout cas pour ton aide.
@+ seb

**E.Bzz** · 10/08/2007, 15h16

Envoyé par Seb981

Est ce qu'il y a moyen d'éviter ces erreurs :

sous ie :
au début c'est à non, on peut écrire du texte.

Code :

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

<body onload='griser(document.getElementById("DESCRIPTIONOUTIL10"),"10_oui");'>

on coche oui, cela se bloque.
on coche non c'est bloqué.
on coche oui cela se débloque

Faut "patcher" :

Code :

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

1
2
<input type='radio' name="10" id="10_oui" value='oui' onclick='griser(document.getElementById("DESCRIPTIONOUTIL10"),"10_oui");'/><label for="10_oui">oui</label>
<input type ='radio' name="10" id="10_non" value='non' checked='checked' onclick='griser(document.getElementById("DESCRIPTIONOUTIL10"),"10_oui");' /><label for="10_non">non</label>

A+

**Seb981** · 10/08/2007, 15h37

Merci beaucoup je vais essayer tout de suite !

@+ Seb

**Seb981** · 10/08/2007, 15h49

Il y a t-il la possibilité de mettre autre part :

Code :

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

<body onload='griser(document.getElementById("DESCRIPTIONOUTIL10"),"10_oui");'>

car je ne sais pas à l'avance combien il va y avoir de checkbox.

**E.Bzz** · 10/08/2007, 15h55

Envoyé par Seb981

car je ne sais pas à l'avance combien il va y avoir de checkbox.

A l'avance, peut être pas.
Mais ta page étant générée en PHP, c'est une info que tu peu facilement récupérer au cours du traitement PHP pour adapter ta fonction "en live" (et toujours en PHP)

A+

**Seb981** · 10/08/2007, 16h28

J'ai réussi à travers une requête à faire :

Code :

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

1
2
3
4
5
6
 
<body
onload='griser(document.getElementById("DESCRIPTIONOUTIL10"),"10_oui");'
onload='griser(document.getElementById("DESCRIPTIONOUTIL11"),"11_oui");'
onload='griser(document.getElementById("DESCRIPTIONOUTIL12"),"12_oui");'
>

Cela marche pour la premiére chekbox mais pour les autres je reviens au probléme :

au début c'est à non, on peut écrire du texte.
on coche oui, cela se bloque.
on coche non c'est bloqué.
on coche oui cela se débloque

**E.Bzz** · 10/08/2007, 16h44

Code :

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

1
2
3
4
5
6
7
function initialise() { 
griser(document.getElementById("DESCRIPTIONOUTIL10"),"10_oui");
griser(document.getElementById("DESCRIPTIONOUTIL11"),"11_oui");
griser(document.getElementById("DESCRIPTIONOUTIL12"),"12_oui");
}
...
<body onload="initialise();">

A+

**Seb981** · 10/08/2007, 16h45

C'est pas du tout comme cela il faut faire dans le body il me semble.
Voici un recapitulatif du code ( il me semble que tout fonctionne )

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
 
<html>
<head>
</head>
<body onload='griser(document.getElementById("DESCRIPTIONOUTIL10"),"10_oui");griser(document.getElementById("DESCRIPTIONOUTIL11"),"11_oui");'>
<SCRIPT LANGUAGE="JavaScript">
function griser(objControlee, idControleur) {
 objControlee.disabled=!document.getElementById(idControleur).checked;
}
</SCRIPT>
<form name="insertion">
<input type='radio' name="10" id="10_oui" value='oui' onclick='griser(document.getElementById("DESCRIPTIONOUTIL10"),"10_oui");'/><label for="10_oui">oui</label>
<input type ='radio' name="10" id="10_non" value='non' checked='checked' onclick='griser(document.getElementById("DESCRIPTIONOUTIL10"),"10_oui");' /><label for="10_non">non</label>
<input type ='text'  id='DESCRIPTIONOUTIL10' name='DESCRIPTIONOUTIL10' size='25' onChange='griser(this,"10_oui")' />
<br /><br /><br /><br />
<input type='radio' name="11" id="11_oui" value='oui' onclick='griser(document.getElementById("DESCRIPTIONOUTIL11"),"11_oui");'/><label for="11_oui">oui</label>
<input type ='radio' name="11" id="11_non" value='non' checked='checked' onclick='griser(document.getElementById("DESCRIPTIONOUTIL11"),"11_oui");' /><label for="11_non">non</label>
<input type ='text'  id='DESCRIPTIONOUTIL11' name='DESCRIPTIONOUTIL11' size='25' onChange='griser(this,"11_oui")' />
 
</form>
</body>
</html>

@+ et encore merci.
Seb

**Seb981** · 10/08/2007, 16h47

Merci pour ton message, en effet c'est plus propre de faire une fonction !

@+ Seb

Griser un champ text suivant le cochage d'une checkbox

JavaScript

Discussions similaires

Partager

Partager