Activer/désactiver des checkbox

Version imprimable

Bonjour à tous !

Voici mon souci : il s'agit de traduire un texte d'une langue source vers une ou plusieurs langue cibles.
La langue source doit être unique, c'est donc une list :
Code:

1 2 3 4 5 6 7 8 9 <select name="source" onChange="activerCibles(this.form, 'cibles[]', this.value)"> <option value="francais"<?php if($source =='francais') echo 'selected="selected"';?>> Français</option> <option value="italien"<?php if($source == 'italien') echo 'selected="selected"';?>> Italien</option> <option value="anglais"<?php if($source == 'anglais') echo 'selected="selected"';?>> Anglais</option> <option value="allemand"<?php if($source == 'allemand') echo 'selected="selected"';?>> Allemand</option> <option value="portugais"<?php if($source == 'portugais') echo 'selected="selected"';?>> Portugais</option> <option value="espagnol"<?php if($source == 'espagnol') echo 'selected="selected"';?>> Espagnol</option> </select>
Le test sur la variable php $source est là pour qu'après soumission du formulaire, la valeur sélectionnée elle

Les langues cibles peuvent être multiples, ce sont donc des checkbox :
Code:

1 2 3 4 5 6 7 <label><input type="checkbox" name="cibles[]" value="francais" <?php if(preg_match('/francais/', $liste_cibles)==true) echo 'checked="checked"';?> onClick="Compter(this.form.nb_mots.value,this.form)"/>Français</label> <label><input type="checkbox" name="cibles[]" value="anglais" <?php if(preg_match('/anglais/', $liste_cibles)==true) echo 'checked="checked"';?> onClick="Compter(this.form.nb_mots.value,this.form)"/>Anglais</label> <label><input type="checkbox" name="cibles[]" value="italien" <?php if(preg_match('/italien/', $liste_cibles)==true) echo 'checked="checked"';?> onClick="Compter(this.form.nb_mots.value,this.form)"/>Italien</label> <label><input type="checkbox" name="cibles[]" value="portugais" <?php if(preg_match('/portugais/', $liste_cibles)==true) echo 'checked="checked"';?> onClick="Compter(this.form.nb_mots.value,this.form)"/>Portugais</label> <label><input type="checkbox" name="cibles[]" value="espagnol" <?php if(preg_match('/espagnol/', $liste_cibles)==true) echo 'checked="checked"';?> onClick="Compter(this.form.nb_mots.value,this.form)"/>Espagnol</label> <label><input type="checkbox" name="cibles[]" value="allemand" <?php if(preg_match('/allemand/', $liste_cibles)==true) echo 'checked="checked"';?> onClick="Compter(this.form.nb_mots.value,this.form)"/>Allemand</label>
La fonction "Compter(this.form.nb_mots.value,this.form)" est une fonction Javascript qui permet de compter le nombre de jours nécessaires à la traduction.

Cependant il y a plusieurs contraintes :
- la langue source et la langue cible ne peuvent être identiques. Pour l'instant je fais ce contrôle en php à la validation du formulaire. Mais étant données les contraintes suivantes, je souhaiterais le faire en Javascript.
- j'ai des combinaisons de langues sources/cibles définies :
FR vers (it, angl, esp, all, port)
(it, angl, esp, all, port) vers FR

Je souhaiterais donc :

au tout premier affichage du formulaire, la langue source "francais" est sélectionnée je souhaite donc que dans les langues sources :

le francais soit grisé et non sélectionnable
les autres langues (it, angl, esp, all, port) sont dipsonibles et cliquables

quand on sélectionne le français en langue source :

le francais est grisé et non sélectionnable
les autres langues (it, angl, esp, all, port) sont dipsonibles et cliquables

quand on sélectionne une des langues (it, angl, esp, all, port) en langue source

le francais est dipsonibles et cliquables
les autres langues (it, angl, esp, all, port) sont grisés et non sélectionnables

J'avais fait un test avec la fonction "activerCibles(this.form, 'cibles[]', this.value)" que vous voyez sur le onChange de ma liste, mais sans succès.

Voici le détail de cette fonction :
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 function activerCibles(form,inputName,source) { switch (source) { case 'francais': form.cibles['francais'].disabled='true'; form.cibles['italien'].disabled='false'; form.cibles['anglais'].disabled='false'; form.cibles['espagnol'].disabled='false'; form.cibles['allemand'].disabled='false'; form.cibles['portugais'].disabled='false'; break; case 'italien': case 'anglais': case 'espagnol': case 'allemand': case 'portugais': form.cibles['francais'].disabled='false'; form.cibles['italien'].disabled='true'; form.cibles['anglais'].disabled='true'; form.cibles['espagnol'].disabled='true'; form.cibles['allemand'].disabled='true'; form.cibles['portugais'].disabled='true'; break; } var inputs = form.elements[inputName]; for (var i = 0; i < inputs.length; i++) { var input = inputs; alert(input.value); if (input.value == source) { input.disabled = true; input.checked = true; } else { input.disabled = false; } } }
Pourriez-vous m'aider ?

Merci beaucoup

28/01/2011, 10h13
babylone7

Pour préciser, lorsque je sélectionne une valeur dans la liste de langues sources, j'obtiens l'erreur suivante :

" 'cibles.francais' a la valeur Null ou n'est pas un objet "

Cette erreur est déclenchée par la ligne suivante du switch/case de la fonction activerCibles() :

Code:

form.cibles['francais'].disabled='false';
28/01/2011, 11h33
Bovino

Code:

form.cibles['francais'].disabled='false';

la propriété disabled est un booléen, mais tu lui passes une chaine :aie:

Code:

false != 'false'

Ceci dit, form fait partie du langage, l'utiliser comme nom de variable, de champ ou autre est plus que déconseillé !
28/01/2011, 11h45
babylone7
Merci Bovino.

J'ai corrigé le nom du formulaire et les booléens de cette manière (je ne mets qu'une ligne) :
Code:

1 2 3 4 5 6 7 8 9 10 function activerCibles(formulaire,inputName,source) { [...] formulaire.cibles['francais'].disabled=false; [...] }
mais cela ne change rien, j'ai toujours le même message d'erreur : 'cibles.francais' a la valeur Null ou n'est pas un objet :aie:

Bonjour,

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
function activerCibles(formulaire,source) {
	var disabl = false;
	if(source=='francais'){
		disabl = true;
	}
	for(var i=0; i<formulaire.elements['cibles[]'].length;i++){
		if(formulaire.elements['cibles[]'][i].value=='francais'){
			formulaire.elements['cibles[]'][i].disabled=disabl;
		}else{
			formulaire.elements['cibles[]'][i].disabled= (!disabl);
		}
	}
}

A+.

28/01/2011, 12h57
Bovino

Code:

var inputs = form.elements[inputName];

Donc inputs est une collection d'objets HTML.

Code:

var input = inputs;

input (nom pas terrible non plus :whistle:) est donc aussi une collection :aie:

Code:

alert(input.value);

une collection n'a pas de value ! :mrgreen:

En fait, tu as juste oublié de préciser le rang de l'input :

Code:

var input = inputs[i];

Et au passage, déclarer une variable dans une boucle n'est pas très propre, il est préférable de la déclarer en début de fonction

Code:

var input;

puis juste de faire des affectations dans la boucle

Code:

input = inputs[i];

Mais bon, la solution d'andry est pas mal ;)
28/01/2011, 13h40
andry.aime

@Bovino
J'ai pas compris pourquoi tu racontes des histoires d'input et inputs :D. /me s'est aussi demandé à quoi ça sert la variable inputName :lol:. Maintenant je comprend pourquoi la fonction que j'ai proposé n'est pas complète :ptdr:.
28/01/2011, 15h59
babylone7
Merci à vous 2 Bovina et andry ça marche bien maintenant !

j'ai ajouté une ligne, pour être sûr que quand la checkbox est désactivée elle n'est pas non plus cochée :
Code:

1 2 3 4 5 if(formulaire.elements['cibles[]'][i].value=='francais'){ formulaire.elements['cibles[]'][i].disabled = disabl; formulaire.elements['cibles[]'][i].checked = (!disabl); }
Il faut maintenant que je vois comment faire pour qu'au chargement de la page (français déjà sélectionné), cela fonctionne.

Code:

<body onload="activerCibles('document.forms[0]', 'francais');">

Car à ce moment là, il ne connait pas le tableau de cibles formulaire.elements['cibles[]']

En plus, quand je poste mon formulaire je change de page php qui contient le body :roll:
28/01/2011, 16h42
Bovino

Citation:

Envoyé par babylone7

Merci à vous 2 Bovina

Ma femme n'a rien à voir avec la solution à ton problème :mouarf:
28/01/2011, 16h42
babylone7

Citation:

Envoyé par Bovino

Ma femme n'a rien à voir avec la solution à ton problème :mouarf:

loooool !! désolée Bovino :oops::mrgreen::mrgreen::mouarf:

Pour l'affichage au chargement de la page, j'ai réussi :

Code:

<body onload="init();">

avec
Code:

1 2 3 4 5 6 7 8 9 10 11 function init() { var disabl = true; for(var i=0; i<document.forms[0].elements['cibles[]'].length;i++){ if(document.forms[0].elements['cibles[]'][i].value=='francais'){ document.forms[0].elements['cibles[]'][i].disabled = disabl; document.forms[0].elements['cibles[]'][i].checked = (!disabl); }else{ document.forms[0].elements['cibles[]'][i].disabled = (!disabl); } } }
Par contre je poste mon formulaire vers une autre page php qui comporte des traitements (vérification de la conformité des champs, nullité etc) et qui réaffiche le formulaire tel que pré-rempli (avec les checkbox cochées etc).

Et là, si par exemple je sélectionne source = allemand et que je coche cible = francais, à la soumission du formulaire, j'ai bien francais qui est toujours coché mais les autre langues ne sont plus grisées :?
si je rappelle la fonction init() ça va tout me vider non ?..

28/01/2011, 19h24
andry.aime

Tu peux le gérer facilement coté serveur (php) ;).
Fait une recherche sur la :faq: php, il y a un bout de code que tu peux facilement adapter :D.

:zzz:
28/01/2011, 20h21
babylone7

Citation:

Envoyé par andry.aime

Tu peux le gérer facilement coté serveur (php) ;).
Fait une recherche sur la :faq: php, il y a un bout de code que tu peux facilement adapter :D.

:zzz:

Gérer toute la problématique des checkbox ou juste l'appel de la fonction init() ?
Vais aller voir ça merci andry

Je crois que j'ai réussi !!!

Sur tes conseils, j'ai vu dans la FAQ PHP comment appeler du php dans le javascript :

Code:

<body onload="onLoadActiverCibles(document.forms[0],'<?php echo $source;?>','<?php echo $alerte; ?>');">

le paramètre $alerte est une variable affectée quand le formulaire est soumis, c'est ce qui me permet de réafficher les champs remplis avant la soumission.

Et du coup, quand le formulaire est posté, je ne réinitialise pas les cibles comme au 1ere chargement, je gère juste le paramètre disabled et je laisse le traitement php gérer le paramètre checked :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 function onLoadActiverCibles(formulaire,source,alerte) { var disabl = false; if(source=='francais'){ disabl = true; } for(var i=0; i<formulaire.elements['cibles[]'].length;i++){ if(formulaire.elements['cibles[]'][i].value=='francais'){ formulaire.elements['cibles[]'][i].disabled = disabl; }else{ formulaire.elements['cibles[]'][i].disabled = (!disabl); } } Compter(document.forms[0].nb_jours.value,document.forms[0]); }
Et ça marche bien :)

En fin j'espère du moins ! On n'est jamais à l'abri de découvrir qu'on a mal tester son truc !

Merci beaucoup Andry !!!! :ccool:

01/02/2011, 09h02
andry.aime

Citation:

Envoyé par babylone7

En fin j'espère du moins ! On n'est jamais à l'abri de découvrir qu'on a mal tester son truc !

T'en faits pas, les meilleurs testeurs sont les utilisateurs finaux.
:dehors: