Activer/désactiver des checkbox [Résolu]

[babylone7]

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&ccedil;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&ccedil;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

[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';

[Bovino]

Code :

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

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

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

[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

[andry.aime]

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

[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 ) est donc aussi une collection

Code :

alert(input.value);

une collection n'a pas de value !

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

[andry.aime]

@Bovino
J'ai pas compris pourquoi tu racontes des histoires d'input et inputs . /me s'est aussi demandé à quoi ça sert la variable inputName . Maintenant je comprend pourquoi la fonction que j'ai proposé n'est pas complète .

[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

[Bovino]

Envoyé par babylone7

Merci à vous 2 Bovina

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

[babylone7]

Envoyé par Bovino

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

loooool !! désolée Bovino

[babylone7]

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

[andry.aime]

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

[babylone7]

Envoyé par andry.aime

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

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

[babylone7]

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 !!!!

[andry.aime]

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.