Discussion :

[BLJ.CHAUVIN]

Bonjour à tous,

Je cherche depuis hier soir à créer un évènement qui arrive si un checkbox est coché. Grosso modo : j'ai un formulaire avec une liste déroulante qui doit transmettre des valeurs en méthode $_POST. Je souhaite que quand l'utilisateur clique sur le checkbox lié à cette liste déroulante celle-ci devienne grisée et ne transmette qu'une valeur NULL.

Mais j'ai un peu de mal à obtenir un résultat acceptable

Voici mon code HTML:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<div>
	<label class="description">D&eacute;partement</label>
	<select class="elem_select_1" id="departement" name="departement"> 
		<option selected value="1">choix 1</option>
		<option value="2">choix 2</option>
		<option value="3">choix 3</option>
		<option value="4">choix 4</option>
		<option value="5">choix 5</option>
	</select>&nbsp;
	<input type="checkbox" for="departement" name="nullDep" value="true" click="sansDepartement()" />&nbsp;NULL
</div>

Et mon Javascript:

Code :

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

1
2
3
4
5
function sansDepartement(){
	if(document.getElementById(nullDep).checked==true){
		document.getElementById(departement).value=null;
	}
}

Est-ce que vous voyez ce qui ne va pas dans mon code?

[Bovino]

Code :

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

if(document.getElementById(nullDep).checked==true)

Tout d'abord, getElementById attend en paramètre une chaine de caractère, donc tel que tu l'écris, JavaScript considère que nullDep est une variable et comme il y a peu de chances que cette variable existe, ça renvoie une erreur

D'autre part, pour autant que les mots ont un sens, getElementById signifie "récupère l'élément par son id", mais dans ton code, l'input n'a pas d'id mais un name.

Aussi, for n'est pas un attribut valide pour une balise input...

[SpaceFrog]

onclick .. pas click

[BLJ.CHAUVIN]

Tout d'abord merci pour vos réponses.

getElementById signifie "récupère l'élément par son id", mais dans ton code, l'input n'a pas d'id mais un name.

Je n'avais même pas vu qu'il manquait, en effet ça peut jouer

onclick .. pas click

Ok message reçu...

Code :

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

if(document.getElementById(nullDep).checked==true)

Tout d'abord, getElementById attend en paramètre une chaine de caractère, donc tel que tu l'écris, JavaScript considère que nullDep est une variable et comme il y a peu de chances que cette variable existe, ça renvoie une erreur

Là par contre je n'ai pas exactement compris ce que tu veux dire, et encore moins quoi faire pour remédier à ce problème.

[andry.aime]

Bonsoir,

Ben tu ajoutes un id="nullDep" sur ton checkbox et mettre sa valeur entre quote dans le javascript : if(document.getElementById("nullDep").checked)
A+.

[BLJ.CHAUVIN]

Bon j'en suis là pour l'instant:

Dans le body:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<div>
	<label class="description">D&eacute;partement</label>
	<select class="elem_select_1" id="departement" name="departement"> 
		<option selected value="1">choix 1</option>
		<option value="2">choix 2</option>
		<option value="3">choix 3</option>
		<option value="4">choix 4</option>
		<option value="5">choix 5</option>
	</select>&nbsp;
	<input type="checkbox" id="nullDep" name="nullDep" value="" onclick="sansDepartement()" />&nbsp;NULL
</div>

Dans le head:

Code :

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

1
2
3
4
5
function sansDepartement(){
	if(document.getElementById("nullDep").checked){
		document.getElementById("departement").value=null;
	}
}

Quand je coche le checkbox, la liste déroulante perd bien le option par défaut mais ne renvoie pas pour autant la valeur NULL. Donc l'évènement lié au check est bien reconnu, mais le traitement ensuite ne fonctionne pas.

[Bovino]

Le value d'un select correspond au value de l'option sélectionnée et par défaut de la première option. Donc quand tu affectes

Code :

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

document.getElementById("departement").value=null;

aucune option n'a comme value null (et pour cause) donc le value sera automatiquement ajusté à "1" (celui de la première option)

[Watilin]

Moi ça me paraît cohérent, et surtout plus simple, de transmettre les valeurs du formulaire telles quelles et des les traiter côté serveur comme on fait d'habitude. En plus, ça permet de faire fonctionner correctement le formulaire même si JS est désactivé : c'est de l'amélioration progressive.

Si la case est cochée, ça apparaît dans les paramètres POST, et le serveur en déduit qu'il ne faut pas traiter les départements. Un simple if suffit…

On va au plus simple et on gagne sur tous les plans