recuperer les objects DOM dans mon formulaire

**billyrose** · 25/06/2009, 15h05

Bonjour,

j'ai une table donc les lignes sont crees dynamiquement et chaque ligne a 4 cellules.
les noms de ces cellules sont concatenes avec la rowIndex de la ligne pour differencier les objects qui sont dans les differentes lignes.

mon code JS de creation des lignes

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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<script>
 
   function getXhr(){
                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox and others
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest not supported by your browser
				   alert(" Your browser does not support XMLHTTPRequest objects..."); 
				   xhr = false; 
				} 
                  return xhr
			}
 
			/**
			*  method called when the user clicks on the button
			*/
			function go(){
				var xhr = getXhr()
				// We defined what we gonna do with the response
				xhr.onreadystatechange = function(){
					// We do somthing once the server's response is OK
					if(xhr.readyState == 4 && xhr.status == 200){
						var body = document.getElementsByTagName("body")[0];
 
					// Retrieve <table> ID and create a <tbody> element
 
						var tbl = document.getElementById("table");
						var tblBody = document.createElement("tbody");
						var row = document.createElement("tr");
 
						var cell_1 = document.createElement("td");
						var cell_2 = document.createElement("td");
						var cell_3 = document.createElement("td");
						var cell_4 = document.createElement("td");
 
					// Create the first cell which is a text zone	
						var cell1=document.createElement("input");
						cell1.type="text";
						cell1.name="fname";
						cell1.size="20";
						cell1.maxlength="50";
						cell_1.appendChild(cell1);
 
					// Create the second cell which is a text area	
						var cell2=document.createElement("textarea");
						cell2.name="fdescription";
						cell2.rows="2";
						cell2.cols="30";
						cell_2.appendChild(cell2);
 
					// Create the second cell which is a combo box
						var cell3 = document.createElement("div");
						cell3.id="rs";
						cell3.innerHTML=xhr.responseText;
						cell_3.appendChild(cell3);
 
 
					// Create the fourth cell which is a button
						var cell4=document.createElement("input");
						cell4.type="button";
						cell4.value="Delete"
						cell4.onclick=delRow;
						cell_4.appendChild(cell4);
 
					// add cells to the row
						row.appendChild(cell_1);
						row.appendChild(cell_2);
						row.appendChild(cell_3);
						row.appendChild(cell_4);
 
					// add the row to the end of the table body
						tblBody.appendChild(row);
 
					// put the <tbody> in the <table>
						tbl.appendChild(tblBody);
 
					//	Rename cells with the row index			
						var ind=row.rowIndex;
						var liste_fname = row.getElementsByTagName("input");
						for(i=0; i < liste_fname.length; i++)
						{
						   if(liste_fname[i].name == "fname") 
						   {
							  liste_fname[i].name = liste_fname[i].name + "_" + ind; //give fname_1, fname_2, fname_3, ...
 
						   }
						}
 
						var fd = row.getElementsByTagName("textarea");
						fd[0].name = fd[0].name + "_" + ind;
 
						var cd = row.getElementsByTagName("div");
						cd[0].id = cd[0].id + "_" + ind;
 
						var selectname = row.getElementsByTagName("select");
						selectname[0].name = selectname[0].name + "_" + ind;
 
					// appends <table> into <body>
						body.appendChild(tbl);
 
					// sets the border attribute of tbl to 1;
						tbl.setAttribute("border", "1");
 
						}		
				}
 
				xhr.open("GET","fstatus.php",true);
				xhr.send(null);
			}
function delRow(){
	var i= this.parentNode.parentNode.rowIndex;
	document.getElementById('table').deleteRow(i);
}
   </script>

le formulaire et un petit code PHP pour imprimer le $_POST

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
<body >
 
<?php
if (isset($_POST['Enter'])){
        print_r($_POST);
}
 
?>
 
<h1> Create an Item </h1>
<form method="post" action="func.php">
	<table align="center" border = "2" cellspacing ="0" cellpadding="3" id="table"> 
		<tr><td><b>Functionality Name:</b></td> <td><b>Description:</b></td> <td><b>Status:</b></td> <td><input type="button" Name= "Ajouter" Value="Ajouter" onclick="go()"></td></tr>
 
	</table>	
<input type="submit" name="submit" value="Enter">
</form> 
</body>

ce que je souhaite faire c'est recuperer les $_POST['fname_ind'] par example ou fname_ind est la zone de texte qui est dans la premiere cellule de la ligne ind=row.rowIndex.
car si je ne me trompe pas, les objects DOM sont bien dans mon formulaire.

mais quand je clique sur mon bouton submit, c'est comme si $_POST etait vide. mm $_POST['Enter'] ne s'affiche pas.

Merci d'avance pour votre aide

**RomainVALERI** · 25/06/2009, 15h14

$_POST est bien vide

la cause ? ^^

Code javascript :

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

xhr.open("GET","fstatus.php",true);

>>> tes données sont dans $_GET

edit après le post de kernelfailure : oops ^^ je veux dire : "devraient être dans" $_GET, mais effectivement l'URL ne contient pas tes params...

(si tu décides de passer en post et de modifier ton js : n'oublie pas de déplacer les données de l'url vers le param de la fonction send)

**billyrose** · 25/06/2009, 15h58

(si tu décides de passer en post et de modifier ton js : n'oublie pas de déplacer les données de l'url vers le param de la fonction send)

stp, pourrais tu m'expliquer ce que tu veux dire par la?

la cause ? ^^
Code javascript :

xhr.open("GET","fstatus.php",true);

>>> tes données sont dans $_GET

non pas vraiment parceque fstatus.php cést un code php de creation d'un select. voila fstatus.php

Code :

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

1
2
3
4
5
6
7
		<?php echo '<select name="fstatus">';
                                echo '<option value=1>Draft</option>';
                                echo '<option value=2>Available</option>';
                                echo '<option value=3>Private</option>';
                                echo '<option value=4>Pilot</option>';
                                echo '<option value=5>On Request</option>';
                echo '</select>'; ?>

Mais sinon j'ai teste comme cela

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
<?php
if (isset($_GET['Enter'])){
        print_r($_GET);
}
 
?>
 
<h1> Create an Item </h1>
<form method="GET" action="func.php">
	<table align="center" border = "2" cellspacing ="0" cellpadding="3" id="table"> 
		<tr><td><b>Functionality Name:</b></td> <td><b>Description:</b></td> <td><b>Status:</b></td> <td><input type="button" Name= "Ajouter" Value="Ajouter" onclick="go()"></td></tr>
 
	</table>	
<input type="submit" name="submit" value="Enter">
</form> 
</body>
</html>

toujours rien dans $_GET.

merci.

**billyrose** · 25/06/2009, 16h10

quand je fais

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
<?php
if (isset($_GET['Enter'])){
        print_r($_GET);
}
 
?>
 
<h1> Create an Item </h1>
<form method="GET" action="b.html">
	<table align="center" border = "2" cellspacing ="0" cellpadding="3" id="table"> 
		<tr><td><b>Functionality Name:</b></td> <td><b>Description:</b></td> <td><b>Status:</b></td> <td><input type="button" Name= "Ajouter" Value="Ajouter" onclick="go()"></td></tr>
 
	</table>	
<input type="submit" name="submit" value="Enter">
</form> 
</body>
</html>

l'URL de b.html affiche bien Enter comnme ceci: http://localhost/PHP-TESTS/b.html?submit=Enter Rien pour les objets DOM

**billyrose** · 25/06/2009, 17h14

j'ai corriger une erreur.

Code :

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

1
2
3
4
5
6
<?php
if (isset($_GET['submit'])){
        print_r($_GET);
}
 
?>

dans l'URL de b.html j'ai toutes mes donnees entrees par le user.

..../b.html?fname_1=srtsdrt&fdescription_1=dtryduty&fstatus_1=1&fname_2=dydtyudt&fdescription_2=fuijhjh&fstatus_2=1&fname_3=tuytyfy&fdescription_3=jhgkjhgjjhkkjh&fstatus_3=1&submit=Enter

**kernelfailure** · 27/06/2009, 11h40

Je te conseille de te pencher sur les mécanismes de communications HTTP (POST & GET, c'est suffisant).
Je constate que les fondamentales t'échappent :

Par exemple, à part 'null', ton request est censé envoyé quoi ?

Code :

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

1
2
3
 
xhr.open("GET","fstatus.php",true);
xhr.send(null);

Ici, ton URL est mal formé pour un GET et/ou les paramètres sont absents pour un POST.

**billyrose** · 29/06/2009, 14h21

Envoyé par kernelfailure

Je te conseille de te pencher sur les mécanismes de communications HTTP (POST & GET, c'est suffisant).
Je constate que les fondamentales t'échappent :

Par exemple, à part 'null', ton request est censé envoyé quoi ?

Code :

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

1
2
3
 
xhr.open("GET","fstatus.php",true);
xhr.send(null);

Ici, ton URL est mal formé pour un GET et/ou les paramètres sont absents pour un POST.

desolee pour le probleme de comprehension. Mais je pense que tu as mal compris mon thread. tu as raison POST etait suffisant.
Mais sinon j'ai deja resolu ce probleme.
Merci

recuperer les objects DOM dans mon formulaire

JavaScript

Discussions similaires

Partager

Partager