cacher des élements

**yann0807** · 29/09/2009, 12h21

Bonjour tout le monde,
A mon tour d'avoir un problème que je ne comprends pas trop.
Mon projet consiste en ça: j'ai un formulaire géant avec en particulier la possibilité de choisir dans une liste déroulante un nombre de cellules (concernant le nombre de cellules pour un tableau allant de 1 à 6) et le choix effectué va mettre à jour une image mais également un tableau.
En gros si je choisis 3, une nouvelle image avec un tableau à 3 cellules sera chargée et le tableau à la base avec 6 cellules fera disparaitre tout ce qu'il y a à l'interieur de mes cellules de 3 à 6. J'espère que vous me comprenez. Bref tout cela marche impec. Vient le problème; via cette fonction je fais donc apparaître une image avec une petite croix bleu et je fais disparaitre les input radio. L'utilisateur peut alors visualiser sa commande (en gros c'est un submit qui reprend toutes les données et recrée un formulaire rempli et non modifiable). Le seul problème c'est que ma fonction javascript veut bien, me cacher mes input pour le premier formulaire mais pas le second.
Voici mon code:

Code :

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

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
 
function changeContenu(id){
	//Découpage de la variable
	var element = id.split('_');
	var newId = element[0]+'_'+element[1]+'_'+element[2];
	//Récupération des ID des cellules
	var idCharniereDroite = newId+'_9';
	var idCharniereGauche = newId+'_10';
	var idCharniereArrDroite = newId+'_11';
	var idCharniereArrGauche = newId+'_12';
	//Création d'ID pour les images
	var idImage1 = idCharniereDroite+'_1';
	var idImage2 = idCharniereGauche+'_2';
	var idImage3 = idCharniereArrDroite+'_3';
	var idImage4 = idCharniereArrGauche+'_4';
	//Récupération des elements INPUT
	var element1 = document.getElementById(idCharniereDroite);
	var element2 = document.getElementById(idCharniereGauche);
	var element3 = document.getElementById(idCharniereArrDroite);
	var element4 = document.getElementById(idCharniereArrGauche);	
	//On cache les input
	$(element1).hide();
	$(element2).hide();
	$(element3).hide();
	$(element4).hide();
	//Change le style
	var image_1 = document.createElement('img');
	image_1.setAttribute("id", idImage1); 
	image_1.setAttribute("src", "images/desactiver.gif"); 
	image_1.setAttribute("width", "9px"); 	
	image_1.setAttribute("height", "9px"); 
	var image_2 = document.createElement('img');
	image_2.setAttribute("id", idImage2); 
	image_2.setAttribute("width", "9px"); 
	image_2.setAttribute("height", "9px"); 	
	image_2.setAttribute("src", "images/desactiver.gif"); 
	var image_3 = document.createElement('img');
	image_3.setAttribute("id", idImage3); 
	image_3.setAttribute("width", "9px"); 
	image_3.setAttribute("height", "9px"); 
	image_3.setAttribute("src", "images/desactiver.gif"); 
	var image_4 = document.createElement('img');
	image_4.setAttribute("id", idImage4); 
	image_4.setAttribute("width", "9px"); 
	image_4.setAttribute("height", "9px"); 
	image_4.setAttribute("src", "images/desactiver.gif"); 
	var parent_1 = document.getElementById(idCharniereDroite).parentNode;
	var parent_2 = document.getElementById(idCharniereGauche).parentNode;
	var parent_3 = document.getElementById(idCharniereArrDroite).parentNode;
	var parent_4 = document.getElementById(idCharniereArrGauche).parentNode;
	//On cache les input
	$(idCharniereDroite).hide();
	$(idCharniereGauche).hide();
	$(idCharniereArrDroite).hide();
	$(idCharniereArrGauche).hide();
	//Enleve pour eviter de tout mettre en double
	var image_a = document.getElementById(idImage1);
	var image_b = document.getElementById(idImage2);
	var image_c = document.getElementById(idImage3);
	var image_d = document.getElementById(idImage4);
	if(image_a != null){	
	parent_1.removeChild(image_a);
	}
	if(image_b != null){
	parent_2.removeChild(image_b);
	}
	if(image_c != null){	
	parent_3.removeChild(image_c);
	}
	if(image_d != null){
	parent_4.removeChild(image_d);	
	}
	parent_1.appendChild(image_1);
	parent_2.appendChild(image_2);
	parent_3.appendChild(image_3);
	parent_4.appendChild(image_4);
}

Cette fonction marche donc impec pour le premier formulaire de saisie.
Voici a présent la fonction qui ne fonctionne pas sur le second formulaire:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
function updateClass(id){
	var parent_1 = document.getElementById(id).parentNode;
	var element = document.getElementById(id);
	//On affiche l'image
	var image = document.createElement('img');
	image.setAttribute("src", "images/desactiver.gif"); 
	parent_1.appendChild(image);	
	//On cache l'input
	element.style.display = 'none';
       //$(element).hide();
}

PS: j'utilise aussi jQuery

Merci d'avance

J'édite: Quand je regarde avec firebug ça me met style="" . En gros, il ne me prend pas le style display = none. C'est bizarre que ça marche pour le formulaire de base mais pas le formulaire pré-rempli.

**andry.aime** · 29/09/2009, 12h42

var element1 = document.getElementById(idCharniereDroite);
.....
$(element1).hide();

Tu peux écrire simplement

Code :

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

$("#"+idCharniereDroite).hide();

Pour ton problème:

Code :

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

$("#"+id).css("display","none"});

**yann0807** · 29/09/2009, 12h52

En fait tu sais la première fonction marche nickel donc pas besoin en fait c'est la deuxième fonction mais j'ai tout essayé de rajoute rles # les enlever de passer par du javascript pur. On dirait que mes input ne veulent pas prendre ce style. Par contre si je met un visibility hidden ça fonctionne mais il est toujours présent.
Pourquoi ne veulent-ils pas de mon display none??

**andry.aime** · 29/09/2009, 13h31

Vérifie que l'id en paramètre existe et qu'il est unique.
Sinon fait nous voir ton formulaire et comment tu fait appel à la fonction.

**yann0807** · 29/09/2009, 14h12

Alors pour ça y'a aucun souci j'ai fait un test j'ai mis un style display:none directement dans le formulaire en dur quoi et ça marche pas non plus!!!
Il me met style display inline j'ai donc vérifié dans mon fichier css mais rien n'indique ça ahhh vraiment je comprend pas!!

cacher des élements

JavaScript

Vue hybride

Discussions similaires

Partager

Partager