Je n'arrive pas à cacher un champ entièrement

Version imprimable

1 pièce(s) jointe(s)

Bonjour,
J'ai un contrôle à faire sur un champ qui se nomme 'etat' si 'etat'== décédée, alors j'affiche un autre champ qui se nomme 'sépulture'. Il y a un petit problème c'est que le champ se cache bien mais les petites flèches de la liste s'affichent.
Voici un aperçu des champs du formulaire :
Pièce jointe 173319
Code : (formulaire)
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 <div class="row"> <section class="col col-6"> <label class="select"> <select id="etat" name="etat"> <option value="">Etat</option> <option value="EVIV">Vivante</option> <option value="EDCD">Décédée</option> <option value="ENSP">Ne sait pas</option> </select> <i></i> </label> </section> <section class="col col-6"> <label class="select"> <select id="sepulture" name="sepulture"> <option value="">Statut sépulture si décédée</option> <option value="EVIV">Mort pour la France</option> <option value="EDCD">Sépulture de guerre</option> <option value="ENSP">Sépulture communne</option> <option value="ENSP">Sépulture classique</option> </select> <i></i> </label> </section> </div>
J'ai une 2ème question : A quoi sert la balise <i> dans ce code ? Je vois que quand je les enlève, je n'ai plus les petites flèches, mais sur internet j'ai trouvé que c'était juste une balise qui rend le texte italique, mais le texte n'est pas en italique, je ne comprend pas.

Merci

31/03/2015, 22h50
sabotage

Tu dois avoir du Javascript et du CSS derrière tout ça.
Il faut nous montrer le code en question.
31/03/2015, 23h20
headmax
Comme dit Sabotage, tu dois avoir du CSS sur ton element <i>.

Pour faire disparaitre ton image, il faut soit faire un display:none de ton element ce qui me parait le plus simple.

En JS
Code:

1 2 3 ... document.getElementsByTagName('i').style.display = "none"; ...
En jquery
Code:

1 2 3 ... $('i').css({'display':'none'}); ...
gl
01/04/2015, 08h25
Bovino

Citation:

En JS

Code:

document.getElementsByTagName('i').style.display = "none";

:nono:

Comme le "s" de "Elements" l'indique, getElementsByTagName() renvoie une collection, tu ne peux donc pas lui appliquer de style, il faut le faire individuellement sur chaque élément de la collection.

Merci pour vos réponses!
J'ai compris pourquoi ça ne marchait pas. Dans mon formulaire j'ai mis un id="sepulture" dans la partie select, et la balise <i> n'était pas à l'intérieur, alors la solution est de mettre un id qui va aussi renfermer la balise <i>.
Il me reste donc une seule question : à quoi sert la balise <i> ?

Voici le code JavaScript pour les contrôles :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(window).load(function () {
    $(document).ready(function () {
	$('#statut').hide();
	$('#sepulture').hide();
	$('#contexte').on('change', function() {
		if($(this).val() === 'WWII') {
			$('#statut').show();
		} else {
			$('#statut').hide();
		}
	});
	$('#etat').on('change', function() {
		if($(this).val() === 'EDCD') {
			$('#sepulture').show();
		} else {
			$('#sepulture').hide();
		}
	});
    });
});

Pour le code CSS, j'en ai plusieurs dont celui-ci :

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
/**/
/* normal state */
/**/
.sky-form .toggle i:before {
	background-color: #cc3d3d;	
}
.sky-form .button {
	background-color: #cc3d3d;
}
 
/**/
/* hover state */
/**/
.sky-form .input:hover input,
.sky-form .select:hover select,
.sky-form .textarea:hover textarea,
.sky-form .radio:hover i,
.sky-form .checkbox:hover i,
.sky-form .toggle:hover i,
.sky-form .ui-slider-handle:hover {
	border-color: #dc9596;
}
.sky-form .rating input + label:hover,
.sky-form .rating input + label:hover ~ label {
	color: #cc3d3d;
}
 
/**/
/* focus state */
/**/
.sky-form .input input:focus,
.sky-form .select select:focus,
.sky-form .textarea textarea:focus,
.sky-form .radio input:focus + i,
.sky-form .checkbox input:focus + i,
.sky-form .toggle input:focus + i {
	border-color: #cc3d3d;
}
 
/**/
/* checked state */
/**/
.sky-form .radio input + i:after {
	background-color: #cc3d3d;	
}
.sky-form .checkbox input + i:after {
	color: #cc3d3d;
}
.sky-form .radio input:checked + i,
.sky-form .checkbox input:checked + i,
.sky-form .toggle input:checked + i {
	border-color: #cc3d3d;	
}
.sky-form .rating input:checked ~ label {
	color: #cc3d3d;	
}

01/04/2015, 10h31
-Rpass-

Bonjour, la balise i à l'origine est juste une balise html qui permet de mettre du texte en italique, de la même façon que la balise <b> met le texte en gras

Et pour masquer l'ensemble, il suffit de faire

Code:

1
2
3
4
5
if($(this).val() === 'EDCD') {
	$('#sepulture').parent('label').show();
} else {
	$('#sepulture').parent('label').hide();
}

au lieu de

Code:

1
2
3
4
5
if($(this).val() === 'EDCD') {
	$('#sepulture').show();
} else {
	$('#sepulture').hide();
}

et idem pour les autres.

01/04/2015, 11h53
geeka

@ -Rpass-
Merci. C'est juste, mais je ne vois pas de texte en italique et il n'y a rien entre <i> ......... </i>

@Bovino
Merci bcp :D
01/04/2015, 11h56
Bovino

Citation:

mais je ne vois pas de texte en italique et il n'y a rien entre <i> ......... </i>

Ben en fait, s'il n'y a rien dans la balise, c'est pas si étonnant que ça que ça soit pas en italique... :fou:
Manifestement, si on en croit ta capture, la balise sert juste à y mettre les icônes de flèches.
01/04/2015, 14h57
geeka

Citation:

Ben en fait, s'il n'y a rien dans la balise, c'est pas si étonnant que ça que ça soit pas en italique...

Ah oui, j'y ai pas pensé :roll:

Citation:

Manifestement, si on en croit ta capture, la balise sert juste à y mettre les icônes de flèches.

Dans ce cas, c'est plus logique :mrgreen: merci. Une dernière question : est-ce qu'on peut remplacer <i> par n'importe quelle balise tant qu'elle existe en HTML ?
01/04/2015, 16h20
-Rpass-

Citation:

est-ce qu'on peut remplacer <i> par n'importe quelle balise tant qu'elle existe en HTML ?

En général tout est possible, mais dans ton code à toi, la balise i est surement utilisé (je n'ai pas regardé précisément) ultérieurement dans le css pour afficher les flèches. Donc tu peux remplacer la balise, mais tu risques d'avoir des changements d'affichage
01/04/2015, 18h36
headmax
Citation:

Envoyé par Bovino

:nono:

Comme le "s" de "Elements" l'indique, getElementsByTagName() renvoie une collection, tu ne peux donc pas lui appliquer de style, il faut le faire individuellement sur chaque élément de la collection.

:( Effectivement j'ai écris sans tester... Par contre j'ai volontairement utilisé byTagName car je sais pas s'il était dans un contexte plusieurs <i> (plusieurs select)

Et individuellement <i>:
Code:

1 2 3 var i = document.getElementsByTagName('i'); i[0].style.display = "none"; //si un <i> sinon passer par une boucle
02/04/2015, 09h14
geeka

Merci à tous, je pense que tout est résolu :D