[DOM] Problème de récuperation de DOM

**Oric** · 07/12/2005, 11h06

Bonjour,

Je suis coincé depuis plusieurs jours avec un formulaire pour lequel je génère des INPUT text à la volée et que je récupère en PHP.
Dans mon HTML d'origine, j'ai placé un INPUT nommé step[] et mes INPUT générés ont le même nom.

Mon formulaire est bien récupéré SAUF mes INPUT générés...

L'inspecteur DOM de Firefox les retrouve bien pourtant donc je ne comprend pas...

Merci d'avance

**SpaceFrog** · 07/12/2005, 11h08

re génère le bouton submit du formulaire après la génération des inputs ...
ou redéfinis dynamiquement le type du bouton submit ...

Code :

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

document.getElementById('monBoutonSubmit').type='submit'

**Oric** · 07/12/2005, 11h40

Marche pas...
Voilà mon code... parce que vraiment je patoge.
Il doit forcement y avoir quelque chose qui m'échappe
Merci encore

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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="../../css/tool.css" rel="stylesheet">
</head>
 
<body>
<script language="javascript1.4">
	//nombre d etape dans la quete
	var stepn = 1;
 
	//ajoute une etape a la suite de la derniere
	function add_step(){
		var quest = document.getElementById("questt")
		var qr = quest.rows.length-2
 
		stepn = stepn + 1
 
		var r1 = quest.insertRow(qr)
		r1.insertCell(0)
		r1.cells[0].height = 5
 
		var r2 = quest.insertRow(qr+1)
		r2.style.backgroundColor = '#818486'
		var istep = '<td class="news_title">&nbsp;Step '+stepn+' <input class="form_field" name="step[]" id="step[]" type="text" size="70" maxlength="255" value="bonjour'+stepn+'"> Link <input class="form_field" id="link[]" name="link[]" type="text" size="60" maxlength="500"></td>'
		r2.innerHTML += istep
 
		var qr = quest.rows.length
 
		document.getElementById('subb').type='submit'
	}
 
	//enleve la derniere etape
	function remove_step(){
		if(stepn > 1){
			var quest = document.getElementById("questt")
			var qr = quest.rows.length-4
			quest.deleteRow(qr)
			quest.deleteRow(qr)
 
			stepn = stepn - 1
		}
		document.getElementById('subb').type='submit'
	}
 
	//verification que le nom de la quete existe bien avant validation
	function valid_quest(quest){
		if(quest.questn.value == '')
			alert("You need to fill the quest name")
		else{
			quest.submit()
		}
	}
</script>
 
 
<table border="0" cellpadding="0" cellspacing="0" id="questt" align="center" width="800">
	<tr><td class="ss_title" align="center">Quest admin</td></tr>
	<tr><td class="split_line"></td></tr>
	<form action="quest_list.php" name="questf" id="questf" method="post">
	<input type="hidden" name="action" id="action" value="reg_quest">
	<tr class="entry_flat">
		<td class="news_title"> Quest name 
			<input name="questn" type="text" value="Quest AAA" class="form_field"  id="questn" size="130" maxlength="255">
		</td>
	</tr>
	<tr><td class="split_line"></td></tr>
	<tr>
		<td class="ss_title" height="20">
			<input class="form_field" type="button" value="add" onClick="add_step()">
			<input class="form_field" type="button" value="remove" onClick="remove_step()">
		</td>
	</tr>
	<tr><td class="split_line"></td></tr>
	<tr class="entry_flat">
		<td class="news_title" height="20">
			&nbsp;Step 1 <input name="step[]" type="text" class="form_field" id="step[]" value="Salut" size="70" maxlength="255">
			&nbsp;Link <input name="link[]" type="text" class="form_field" id="link[]" value="Salut" size="60" maxlength="500">
		</td>
	</tr>
	<tr><td class="split_line"></td></tr>
	<tr>
		<td class="ss_title" height="20" align="right">
			<input class="form_field" id="subb" type="button" value="Valid" onClick="valid_quest(this.form)">
		</td>
	</tr>
	</form>
</table>
</body>
</html>

**SpaceFrog** · 07/12/2005, 11h56

première remarque l'imbrication du form dans les lignes du tableau c'est pas terrible il vaudrait mieux que l'intégralité du tableau soit contenue dans la form

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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
 
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="../../css/tool.css" rel="stylesheet">
</head>
 
<body>
<script language="javascript1.4">
   //nombre d etape dans la quete
   var stepn = 1;
 
   //ajoute une etape a la suite de la derniere
   function add_step(){
      var quest = document.getElementById("questt")
      var qr = quest.rows.length-2
 
      stepn = stepn + 1
 
      var r1 = quest.insertRow(qr)
      r1.insertCell(0)
      r1.cells[0].height = 5
 
      var r2 = quest.insertRow(qr+1)
      r2.style.backgroundColor = '#818486'
      var istep = '<td class="news_title">&nbsp;Step '+stepn+' <input class="form_field" name="step[]" id="step[]" type="text" size="70" maxlength="255" value="bonjour'+stepn+'"> Link <input class="form_field" id="link[]" name="link[]" type="text" size="60" maxlength="500"></td>'
      r2.innerHTML += istep
 
      var qr = quest.rows.length
 
      document.getElementById('subb').type='submit'
   }
 
   //enleve la derniere etape
   function remove_step(){
      if(stepn > 1){
         var quest = document.getElementById("questt")
         var qr = quest.rows.length-4
         quest.deleteRow(qr)
         quest.deleteRow(qr)
 
         stepn = stepn - 1
      }
      document.getElementById('subb').type='submit'
   }
 
   //verification que le nom de la quete existe bien avant validation
   function valid_quest(quest){
      if(quest.questn.value == '')
         alert("You need to fill the quest name")
      else{
         quest.submit()
      }
   }
</script>
 
 
<form action="quest_list.php" name="questf" id="questf" method="post" onsubmit="valid_quest(this.form)">
<table border="0" cellpadding="0" cellspacing="0" id="questt" align="center" width="800">
   <tr><td class="ss_title" align="center">Quest admin</td></tr>
   <tr><td class="split_line"></td></tr>
 
   <input type="hidden" name="action" id="action" value="reg_quest">
   <tr class="entry_flat">
      <td class="news_title"> Quest name
         <input name="questn" type="text" value="Quest AAA" class="form_field"  id="questn" size="130" maxlength="255">
      </td>
   </tr>
   <tr><td class="split_line"></td></tr>
   <tr>
      <td class="ss_title" height="20">
         <input class="form_field" type="button" value="add" onClick="add_step()">
         <input class="form_field" type="button" value="remove" onClick="remove_step()">
      </td>
   </tr>
   <tr><td class="split_line"></td></tr>
   <tr class="entry_flat">
      <td class="news_title" height="20">
         &nbsp;Step 1 <input name="step[]" type="text" class="form_field" id="step[]" value="Salut" size="70" maxlength="255">
         &nbsp;Link <input name="link[]" type="text" class="form_field" id="link[]" value="Salut" size="60" maxlength="500">
      </td>
   </tr>
   <tr><td class="split_line"></td></tr>
   <tr>
      <td class="ss_title" height="20" align="right">
         <input class="form_field" id="subb" name="sub" type="submit" value="Valid" >
      </td>
   </tr>
 
</table>
</form>
</body>
</html>

parcontre j'ai pas suivi ton idée d'ajoute de lignes ??? elle est ou la création dynamique de champs ?

**SpaceFrog** · 07/12/2005, 12h11

le problème est que tu rjoute des inout avec le même id !!!
un id doit être unique sur la page

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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="../../css/tool.css" rel="stylesheet">
<script type="text/javascript">
   //nombre d etape dans la quete
   var stepn = 1;
 
   //ajoute une etape a la suite de la derniere
   function add_step(){
      var quest = document.getElementById("questt")
      var qr = quest.rows.length-2
 
 
      stepn = stepn + 1
 
      var r1 = quest.insertRow(qr)
      r1.insertCell(0)
      r1.cells[0].height = 5
 
      var r2 = quest.insertRow(qr+1)
      r2.style.backgroundColor = '#818486'
      var istep = '<td class="news_title">&nbsp;Step '+stepn+' <input class="form_field" name="step[]" id="step'+stepn+'[]" type="text" size="70" maxlength="255" value="bonjour'+stepn+'"> Link <input class="form_field" id="link[]" name="link[]" type="text" size="60" maxlength="500"></td>'
      alert(istep)
      //r2.innerHTML += istep
 
      qr = quest.rows.length
 
      document.getElementById('subb').type='submit'
   }
 
   //enleve la derniere etape
   function remove_step(){
      if(stepn > 1){
         var quest = document.getElementById("questt")
         var qr = quest.rows.length-4
         quest.deleteRow(qr)
         quest.deleteRow(qr)
 
         stepn = stepn - 1
      }
      document.getElementById('subb').type='submit'
   }
 
   //verification que le nom de la quete existe bien avant validation
   function valid_quest(quest){
      if(quest.questn.value == ''){
         alert("You need to fill the quest name")
         return false;
         }
      else{
         return true;
      }
   }
</script>
 
</head>
 
<body>
 
<form action="javascript:alert('coucou')"  name="questf" id="questf" method="post" onsubmit="return valid_quest(this.form)">
<table border="0" cellpadding="0" cellspacing="0" id="questt" align="center" width="800">
   <tr><td class="ss_title" align="center">Quest admin</td></tr>
   <tr><td class="split_line"></td></tr>
 
   <input type="hidden" name="action" id="action" value="reg_quest">
   <tr class="entry_flat">
      <td class="news_title"> Quest name
         <input name="questn" type="text" value="Quest AAA" class="form_field"  id="questn" size="130" maxlength="255">
      </td>
   </tr>
   <tr><td class="split_line"></td></tr>
   <tr>
      <td class="ss_title" height="20">
         <input class="form_field" type="button" value="add" onclick="add_step()">
         <input class="form_field" type="button" value="remove" onclick="remove_step()">
      </td>
   </tr>
   <tr><td class="split_line"></td></tr>
   <tr class="entry_flat">
      <td class="news_title" height="20">
         &nbsp;Step 1 <input name="step[]" type="text" class="form_field" id="step[]" value="Salut" size="70" maxlength="255">
         &nbsp;Link <input name="link[]" type="text" class="form_field" id="link[]" value="Salut" size="60" maxlength="500">
      </td>
   </tr>
   <tr><td class="split_line"></td></tr>
   <tr>
      <td class="ss_title" height="20" align="right">
         <input class="form_field" id="subb" name="subb" type="submit" value="Valid" >
      </td>
   </tr>
 
</table> </form>
</body>
</html>

**Oric** · 07/12/2005, 12h13

première remarque l'imbrication du form dans les lignes du tableau c'est pas terrible il vaudrait mieux que l'intégralité du tableau soit contenue dans la form

C'était ça ! un GRAND merci !
C'était sous mon nez depuis le début ...

parcontre j'ai pas suivi ton idée d'ajoute de lignes ??? elle est ou la création dynamique de champs ?

Ici non ?

Code :

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

1
2
3
4
var r2 = quest.insertRow(qr+1)
		r2.style.backgroundColor = '#818486'
		var istep = '<td class="news_title">&nbsp;Step '+stepn+' <input class="form_field" name="step[]" id="step[]" type="text" size="70" maxlength="255" value="bonjour'+stepn+'"> Link <input class="form_field" id="link[]" name="link[]"  value="bonjour'+stepn+'" type="text" size="60" maxlength="500"></td>'
		r2.innerHTML += istep

Dans le principe c est pas tres compliqué. Je veux juste que l'utilisateur puisse créer des entité avec un intitulé + X composants et récupérer tout ça en une fois.

**SpaceFrog** · 07/12/2005, 12h17

oui j'ai vu entre temps ...
par contre je ne recommande pas des id identiques multiples sur la page...
et puis il serait préférable de passer par des createElement plutot que de coller du code par inner HTML pour l'ajout dynamique d'éléments...

mais enfin si ton code tourne et que tu en est satisfait ... c'est l'essentiel

**Oric** · 07/12/2005, 12h29

par contre je ne recommande pas des id identiques multiples sur la page...

Mes "step[]" par ex. ? Pour quel raison ?

il serait préférable de passer par des createElement plutot que de coller du code par inner HTML pour l'ajout dynamique d'éléments...

En gros, pourquoi ?
J'ai déjà lu ça plusieurs fois sur différents forum

**SpaceFrog** · 07/12/2005, 12h34

un id doit être unique sur une page !
sinon que va te retourner getElementById ... ??
ça ne focntionne pas comme getElementsByName qui te retourne une collection !

ensuite utiliser un createElement informe le browser que tu crée un élément il sera ainsi mieux pris en compte que d'ajouter violemment du code html en espèrant que le browser va l'interpreter ...

**Oric** · 07/12/2005, 13h53

Merci !

[DOM] Problème de récuperation de DOM

JavaScript

Vue hybride

Discussions similaires

Partager

Partager