[DOM] Récuperer un élément du DOM

Version imprimable

Bonjour,

Donc je boucle sur tous les <div class="row_form"> donc toutes les lignes du formulaire
à l'interieur de ces lignes il y a 3 div :
- le premier contient 1 label et 1 champ input
- le deuxième contient un div où j'affiche un message d'erreur
- le troisième sert d'espace

Et à l'interieur du premier div, j'ai besoin du champ input pour lui ajouter des Event.

Donc les 2 champs dont j'ai besoin c'est le div d'erreur qui est le deuxième fils du <div class="row_form"> et surtout l'input qui est le petit-fils du <div class="row_form">

Voici le code HTML

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
 
   1.
      <div class="row_form">
   2.
 
   3.
                                              <div class="champform">
   4.
 
   5.
                                                      <label for="nomsociete">Nom(*) :</label>
   6.
 
   7.
                                                      <input id="nomsociete" type="text" />
   8.
 
   9.
                                              </div>
  10.
 
  11.
                                              <div class="error_input"></div>
  12.
 
  13.
                                              <div class="spacer"></div>
  14.
 
  15.
                                      </div>

Voici le code Javascript

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
 
   1.
      window.addEvent('domready', function() {
   2.
 
   3.
              var list = $$('.row_form');
   4.
 
   5.
              list.each(function(element){
   6.
                      var child_list = element.childNodes;
   7.
                      var little_child_list = child_list[0].childNodes;
   8.
                      var error_element = child_list[1];
   9.
                      var input_element = element.childNodes[0].childNodes[1];
  10.
 
  11.
                      var fx = new Fx.Styles(error_element, {
  12.
                                      duration : 1500,
  13.
                                      wait : false,
  14.
                                      transition: Fx.Transitions.Quad.easeOut
  15.
                              });
  16.
 
  17.
                      var fx2 = new Fx.Styles(input_element, {
  18.
                                      transition: Fx.Transitions.Quad.easeOut
  19.
                              });
  20.
 
  21.
                      input_element.addEvent('focus', function(){
  22.
                              fx.start({
  23.
                                      'background-color' : ['#ddeeff']
  24.
                              });
  25.
                      });
  26.
 
  27.
                      input_element.addEvent('blur', function(){
  28.
 
  29.
                              fx2.start({
  30.
                                              'background-color' : ['#fff']
  31.
                                      });
  32.
 
  33.
                              if(input_element.value == ''){
  34.
 
  35.
                                      input_element.setHTML('Ce champ est obligatoire !!!');
  36.
                                      fx.start({
  37.
                                                      'background-color': ['#ff0000', '#fff'],
  38.
                                                      'display': ['block', 'none']
  39.
                                              });
  40.
                              }
  41.
                              else{
  42.
                                      fx2.start({
  43.
                                              'background-color' : ['#fff']
  44.
                                      });
  45.
                              }
  46.
                      });
  47.
 
  48.
              });
  49.
 
  50.
 
  51.
      });

Merci d'avance pour votre aide précieuse :mrgreen:

tu dois d'abord nettoyer les noeuds vides dans ton div principal;

petit utilitaire, qui prend ce div en paramètre ("d")

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var q, bal, p;
 
function clean(d){
	bal=d.getElementsByTagName('*');
	for(j=0;j<bal.length;j++){
		if(!q){
			q=true
		}
		else{
			q=false;
			j++;
		}
 
		p=bal[j].parentNode.childNodes;
		for(i=0;i<p.length;i++){
			if(p[i].data && !p[i].data.replace(/\s/g,'')){
				p[i].parentNode.removeChild(p[i])
			};
		}
	}
}

24/02/2008, 11h45
SpaceFrog

nodecleaner :yaisse2:

quand on vous dit d'éviter les firstChild ...
24/02/2008, 11h51
javatwister

eh oui...; travailler avec les enfants, c'est sympa mais ça peut rendre noeudnoeud;

(ah la vache, elle est légère celle-là)
24/02/2008, 12h30
le_chomeur

Vu l'arborescence et les classes associées j'aurais plutôt parcouru ma div mère , puis utiliser deux méthode l'une utilisant un getElementsByClassName ( methode perso ;) ) pour la div d'erreur et un getElementsByTagName pour l'input ... enfin moi c'que j'en dis :roll:
24/02/2008, 14h51
Don-Leplang

Merci beaucoup pour vos pistes, je vais tâcher de tester ça à mon stage lundi et je vous tiendrai au courant. J'ai pas l'habitude des langages web, je suis plus habitué au Java, C#,... :mrgreen:

Bon j'ai essayé toutes vos idées, mais maintenant j'ai une erreur dans mon NodCleaner 8O:(
L'erreur est bal[j] has no properties, alors le truc que je ne comprend pas c'est que je fais des alert de bal[j] et qu'il y a bien des elements dedans :(

Voici mon javascript :

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
window.addEvent('domready', function() {
 
	var list = $$('.row_form');
 
 
		var q, bal, p;
function clean(element){
			bal=element.getElementsByTagName('*');
			alert(bal[0]);
			alert(bal[1]);
			alert(bal[2]);
			alert(bal[3]);
			alert(bal[4]);
			alert(bal[5]);
			for(j=0;j<bal.length;j++){
				if(!q){
					q=true
				}
				else{
					q=false;
					j++;
				}
 
				p=bal[j].parentNode.childNodes;
				for(i=0;i<p.length;i++){
					if(p[i].data && !p[i].data.replace(/\s/g,'')){
						p[i].parentNode.removeChild(p[i])
					};
				}
			}
		}
 
	list.each(function(element){
 
 
		clean(element);
 
		var child_list = element.childNodes;
		var error_element = child_list[1];
		var inputs = element.getElementsByTagName('input');
 
		var input_element = inputs[0];
		alert(input_element);
 
		var fx = new Fx.Styles(error_element, {
			 	duration : 1500,
			 	wait : false,
			 	transition: Fx.Transitions.Quad.easeOut
			});
 
		var fx2 = new Fx.Styles(input_element, {
				transition: Fx.Transitions.Quad.easeOut
			});
 
		input_element.addEvent('focus', function(){
			fx.start({
				'background-color' : ['#ddeeff']
			});
		});
 
		input_element.addEvent('blur', function(){
 
			fx2.start({
					'background-color' : ['#fff']
				});
 
			if(input_element.value == ''){
 
				input_element.setHTML('Ce champ est obligatoire !!!');
				fx.start({
						'background-color': ['#ff0000', '#fff'],
						'display': ['block', 'none']
					});
			}
			else{
				fx2.start({
					'background-color' : ['#fff']
				});
			}
		});
 
	});
 
 
});

Merci d'avance pour votre aide :mrgreen:

25/02/2008, 10h51
javatwister

peut-être dû à l'appel de clean() dans ton script?

au fait que bal n'est pas déclarée globale?