Griser un champ text suivant le cochage d'une checkbox

Version imprimable

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:

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:

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   </td> <td align='center' class='fond_bleu1'>(Description <input type ='text' name='DESCRIPTIONOUTIL10' size='25' onChange='griser()'/>)</td> </tr> </table> </form> </body> </html>

Bonjour,

Code:

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

avec

Code:

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+

10/08/2007, 11h55
Seb981
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:

1 2 3 $id="10_oui"; griser(this,\"".$id."\");
10/08/2007, 12h00
E.Bzz
Citation:

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 ...
Citation:
Comme mes champs varient, il faudrait que je fasse :

Code:

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

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

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:

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

10/08/2007, 14h00
E.Bzz

Code:

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

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

A+

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:

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 ?

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

Code:

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+

10/08/2007, 14h54
Seb981

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

Citation:

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:

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

Citation:

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

Faut "patcher" :
Code:

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+

10/08/2007, 15h37
Seb981

Merci beaucoup je vais essayer tout de suite !

@+ Seb
10/08/2007, 15h49
Seb981

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

Code:

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

car je ne sais pas à l'avance combien il va y avoir de checkbox.
10/08/2007, 15h55
E.Bzz

Citation:

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+

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

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 :

Citation:

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

Code:

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+

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:

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

10/08/2007, 16h47
Seb981

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

@+ Seb