[AJAX] Envoyer un élément champ de type [] html en Ajax

**madina** · 05/08/2011, 13h48

Bonjour,
je dispose dans mon formulaire des champ de type tableau que je recupére
voilà mon formulaire :

Code php :

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
<?php
include('fonctions.php');
// connexion a la BdD
connect();
?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
	<link rel="stylesheet" media="screen" type="text/css" title="Design" href="budget_css.css" />
	<title>Modifier un chapitre</title>
<script type="text/javascript">
 function getXhr(){
 var xhr = null; 
if(window.XMLHttpRequest) // Firefox et autres
  xhr = new XMLHttpRequest(); 
else if(window.ActiveXObject){ // Internet Explorer 
  try {
 xhr = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
 xhr = new ActiveXObject("Microsoft.XMLHTTP");
          }
}
else { // XMLHttpRequest non supporté par le navigateur 
   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
  xhr = false; 
} 
            return xhr;
			}
/**
* Méthode qui sera appelée sur le click du bouton
*/
function envoi_modif_chapitre(){
var xhr = getXhr();
// On défini ce qu'on va faire quand on aura la réponse
xhr.onreadystatechange = function(){
// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
if(xhr.readyState == 4 && xhr.status == 200){
reponsetxt = xhr.responseText;
// On se sert de innerHTML pour rajouter les options a la liste
 
alert(reponsetxt);
}
				}
// Ici on va voir comment faire du post
xhr.open("POST","valide_modif.php",true);
// ne pas oublier ça pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// Poster mes éléments tableaux						
xhr.send()
}
 
</head>
<body >
 
<div id="formulaire">  
<!-- formulaire -->
<form name="test" action="valide_modif_chapitres.php" method="post" >
<fieldset ><legend><b>Chapitres à modifier</b></legend>
 <table align="center" width="60%" >
<thead>
<tr>
<th>A modifier</th>
</tr>
</thead>
<tbody>
<?php
// requete : operations
$sql = "SELECT * FROM chapitres;";
$sql_result = mysql_query($sql);
while($row_op_mod = mysql_fetch_array($sql_result)) 
{
$idLigne = $row_op_mod['id_chapitre']; // id UNIQUE -> on s'en sert pour identifier la ligne !
?>
<tr>  
<td class="chapt">
<input type="text" name="chapitre[<?php echo $idLigne; ?>]" size="80" value="<?php echo $row_op_mod['designation_chapitre']; ?>" />
<td class="box">
<center><input type="checkbox" name="labox[<?php echo $idLigne; ?>]" value="ON" /></center>
</td>
</tr>
<?php
	} // fin while
?>
<tr align="center">
<td colspan="2">
<input type="submit" name="envoiform" value="Modifier les données" />
</td>
</tr>
</tbody>
</table>
 </fieldset>
</form>
</div>
 </body>
</html>

dans ma page php sous forme de tableaux array().

je veux passer par ajax pour faire la requête.
j'ai essayé par

Code :

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

1
2
chapitre= document.getElementById('chapitre').value;
labox = document.getElementById('labox').value;

mais ça marche pas.

dans ma page php
je les recupére comme ça :

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
if (isset($_POST['labox']))
{
// recuperation des checkbox (array !)
$array_box = $_POST['labox'];
// on parcours l'array
foreach($array_box as $key => $val) {
// Si LA CASE EST COCHEE -> on traite les donnees
if($val =='ON') 
{ 
// on recupere les donnees (de la ligne correspondante)
$ID_chapitre 			= $key; // $key = id_operation !
$designation_chapitre 	= $_POST['chapitre'][$key];
.....

Comment je dois les envoyer dans ma fonction javascript ces éléments ?

Merci de vos solutions.

Cordialement.

**mctarek** · 05/08/2011, 14h12

Envoyé par madina

Bonjour,
je dispose dans mon formulaire des champ de type tableau que je recupére
voilà mon formulaire :
....
Comment je dois les envoyer dans ma fonction javascript ces éléments ?
Merci de vos solutions.

Cordialement.

Je convertis l'array (php) au format json, puis je traîte directement l'objet reçu en javascript. mctarek

Lien : json_encode

**madina** · 05/08/2011, 14h21

Bonjour mctarek,

En fait avant d'avoir l'array() pHP, javascript doit d'abord envoyer un tableau de type [] html.

Mon soucis c'est comment javascript traite ce type d’élément pour l'envoyer via ajax ?

Cordialement

**Bovino** · 05/08/2011, 14h29

Code :

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

1
2
chapitre= document.getElementById('chapitre').value;
labox = document.getElementById('labox').value;

Tu n'as aucun élément dont l'id est chapitre ou labox... alors effectivement, c'est comme appeler ta femme par le prénom de la voisine, c'est rarement efficace

comment javascript traite ce type d’élément

Uniquement comme une chaine normale, il n'existe pas le même principe qu'avec PHP à ce niveau (ne serait-ce que parce la syntaxe d'ajout dans un tableau tab[] = valeur n'existe pas en JavaScript).
Il faut donc rechercher le nom exact.

**madina** · 05/08/2011, 15h26

Bonjour

En ajoutant l'id sur les balise input comme cela

Code php :

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
<?php
// requete : operations
$sql = "SELECT * FROM chapitres;";
$sql_result = mysql_query($sql);
while($row_op_mod = mysql_fetch_array($sql_result)) 
{
$idLigne = $row_op_mod['id_chapitre']; // id UNIQUE -> on s'en sert pour identifier la ligne !
?>
<tr>  
<td class="chapt">
<input type="text" name="chapitre[<?php echo $idLigne; ?>]" id="chapitre[<?php echo $idLigne; ?>]" size="80" value="<?php echo $row_op_mod['designation_chapitre']; ?>" />
<td class="box">
<center><input type="checkbox" name="labox[<?php echo $idLigne; ?>]" id="labox[<?php echo $idLigne; ?>]" value="ON" /></center>
</td>
</tr>
<?php
	} // fin while
?>

et en faisant :

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
function envoi_modif_chapitre(){
var xhr = getXhr();
// On défini ce qu'on va faire quand on aura la réponse
xhr.onreadystatechange = function(){
// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
if(xhr.readyState == 4 && xhr.status == 200){
reponsetxt = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
alert(reponsetxt);
}
}
// Ici on va voir comment faire du post
xhr.open("POST","valide_modif_chapitres.php",true);
// ne pas oublier ça pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// ne pas oublier de poster les arguments
// ici, l'id de l'auteur
chapitre= document.getElementById('chapitre').value;
labox = document.getElementById('labox').value;
xhr.send("chapitre="+chapitre+"&labox="+labox);
			}

là, j'obtiens plus aucun message

je crois c'est à la transmission des éléments [] qui pose tjrs probléme.

Cordialement

**Bovino** · 05/08/2011, 15h35

D'abord, ce serait sympa de poster le code HTML généré et pas le PHP (voir : Important : Les règles incontournables d'utilisation de ce forum).

Ensuite, tu n'as toujours pas d'id chapitre ou labox

[AJAX] Envoyer un élément champ de type [] html en Ajax

AJAX

Vue hybride

Discussions similaires

Partager

Partager