[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

**madina** · 05/08/2011, 16h51

Bonjour,

Tu parles de quel code html généré ?

En fait j'ai mis l'attribut d'id sur les deux champ à savoir chapitre et labox.

Cordialement

**Bovino** · 05/08/2011, 16h57

Envoyé par madina

Tu parles de quel code html généré ?

Celui affiché par ton navigateur (CTRL + U)

Envoyé par madina

En fait j'ai mis l'attribut d'id sur les deux champ à savoir chapitre et labox.

Si j'en crois mes yeux, tu as mis

Code php :

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

id="chapitre[<?php echo $idLigne; ?>]"

or en JavaScript

Code :

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

"chapitre" == "chapitre[idLigne]"

renverra toujours false...

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** · 06/08/2011, 13h17

Bonjour,

avec :

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
<?php
// requete : chapitres
$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[]" size="80" value="<?php echo $row_op_mod['designation_chapitre']; ?>" />
<td class="box">
<center><input type="checkbox" name="labox[<?php echo $idLigne; ?>]" id="labox[]" value="ON" /></center>
</td>
</tr>
<?php
} // fin while
?>

et coté javascript :

Code :

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

1
2
3
chapitre= document.getElementById('chapitre').value;
labox = document.getElementById('labox').value;
xhr.send("chapitre="+chapitre+"&labox="+labox);

ça m'affiche plus aucun message en réponse.
Et le le (CTRL+U) affiche une page blanche.

Cordialement.

**Bovino** · 06/08/2011, 15h20

Code :

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

id="chapitre[]"

Est-ce que tu es capable de comprendre qu'avec cette notation, l'id de ton élément est "chapitre[]", pas "chapitre" !
Donc nécessairement

Code :

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

chapitre= document.getElementById('chapitre').value;

n'existe pas !!!

**madina** · 06/08/2011, 16h01

Bonjour,

Oui tout à fait c'etait évident, .

Bon avec

Code :

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

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

ça envoie bien les tableaux.

mais dans mon fichier php , j'ai cet erreur :

Code :

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

Warning: Invalid argument supplied for foreach()

Compréhensible car je récupérais directement le tableau envoyé ci-dessus sous forme d'array comme ça :

Code :

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

1
2
3
4
5
$array_box = $_POST['labox'];
// on parcours l'array
foreach($array_box as $key => $val) {
....
}

Existe-t-il un moyen de transformer le tableau de javascript envoyé en tableau array PHP pour pouvoir lui appliquer un foreach ?

Cordialement.

**Bovino** · 06/08/2011, 16h26

Envoyé par madina

Existe-t-il un moyen de transformer le tableau de javascript envoyé en tableau array PHP pour pouvoir lui appliquer un foreach ?

Non car il n'y a aucun tableau créé en JavaScript !
D'autre part, comme un id doit être unique dans la page, ta création d’identifiants est incorrecte.
Il faut que tu fasses une boucle pour récupérer la valeur de chaque input et l'ajouter aux paramètres à envoyer.

**madina** · 06/08/2011, 16h38

Bonjour,

la valeur de chaque input : tu veux dire la valeur de chaque élément du tableau.

Et la boucle , je le fais à la création d'identifiants où à l'envoi du tableau ?

**madina** · 06/08/2011, 18h43

Bonjour,

Bovino.

Pour recupérer la valeur de chaque input, j'ai crée un tableau d'indices qui appelé indice de la même maniére que les input.

Et dans javascrip je boucle sur le nombre d'indices pour recupérer la valeur de chaque input.

voilà le html :

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
$i=0;
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[]" size="80" value="<?php echo $row_op_mod['designation_chapitre']; ?>" />
<td class="box">
<center><input type="checkbox" name="labox[<?php echo $idLigne; ?>]" id="labox[]" value="ON" /></center>
</td>
<td >
 
<input type="hidden" name="indice[<?php echo $i; ?>]" id="indice[<?php echo $i; ?>]" value="<?php echo $idLigne; ?>" />
 
// champ qui contient le nombre d'indices
<input type="hidden" name="i" id="i" value="<?php echo $i; ?>" />
</td>
<?php
$i=$i+1;     // J'incrémente la clé du tableau d'indices
  ?>
</tr>
 
<?php
        } // fin while
?>

en javascript :

Code :

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

1
2
3
4
5
6
7
8
indice= document.getElementById('i').value;
for(j=0;j<=indice;j++)
{
ligne=document.getElementById('indice['+j+']').value;
chapitre[ligne]= document.getElementById('chapitre['+ligne+']').value;
labox[ligne] = document.getElementById('labox['+ligne+']').value;
}
xhr.send("chapitre="+chapitre[]+"&labox="+labox[]);

mais ça m'affiche pas l'alerte de réponse

Merci d'une solution

Cordialement.

**Bovino** · 06/08/2011, 18h55

Envoyé par Bovino

un id doit être unique dans la page, ta création d’identifiants est incorrecte.

Invité · 06/08/2011, 23h02

Bonsoir tout le monde, ... AVANT D'ALLER PLUS LOIN :
1/ Pour comprendre -> le 1er post de Madina : Modifier des enregistrements affichés dans un tableau HTML
2/ Quelqu'un a-t-il remarqué ces lignes dans le code fourni par Medina ?

Code :

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

1
2
3
4
5
6
7
//=> javascript :
	function envoi_modif_chapitre(){
//=> formulaire :
	<form name="test" action="valide_modif_chapitres.php" method="post" >
//-> Aucune relation ! le js ne risquait pas de se déclencher ...
//=> remplacer par :
	<form name="test" method="post" action="" onsubmit="envoi_modif_chapitre();">

Bonsoir Madina,
2 conseils :
1/ comme l'a dit Bovino -> poster UNIQUEMENT le code HTML généré, et pas le PHP
2/ Pour bien COMPRENDRE LE PRINCIPE, on va SIMPLIFIER le formulaire (3 éléments par array sont suffisants pour tester)
Donc -> crée un fichier test.php dans lequel tu mets :

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
<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">
		// .... ICI le script JAVASCRIPT/AJAX....
		// -> on aura ici en index des array : 11, 22, 33.
 
	</script>
</head>
</body>
<!-- formulaire test -->
<form method="post" action="" onsubmit="envoi_modif_chapitre();">
<table>
	<tr>
		<td class="chapt"><input type="text" name="chapitre[11]" id="idchapitre[11]" size="80" value="blabla1" /></td>
		<td class="box"><input type="checkbox" name="labox[11]" id="idlabox[11]" value="ON" /></td>
	</tr>
	<tr>
		<td class="chapt"><input type="text" name="chapitre[22]" id="idchapitre[22]" size="80" value="blabla2" /></td>
		<td class="box"><input type="checkbox" name="labox[22]" id="idlabox[22]" value="ON" /></td>
	</tr>
	<tr>
		<td class="chapt"><input type="text" name="chapitre[33]" id="idchapitre[33]" size="80" value="blabla3" /></td>
		<td class="box"><input type="checkbox" name="labox[33]" id="idlabox[33]" value="ON" /></td>
	</tr>
</table>
</form>

Pour éviter les confusions, j'ai mis :
... name="chapitre[33]" id="idchapitre[xx]" ...
... name="labox[33]" id="idlabox[xx]"...
A partir de là, on peut "travailler" sur le script JAVASCRIPT/AJAX.

-> TEST : on aura ici en index des array : 11, 22, 33.
-> pour info, les index sont en fait les ID des enregistrements dans la table SQL : ils ne sont donc variables, pas forcément consécutifs, ni par ordre croissant ...

-> une fois qu'on aura compris le principe, on passera au fichier réel.
Tu peux lire : Conversion d'un tableau PHP de dimension N en tableau JavaScript (mais ca ne correspond pas exactement -> à cause des index)

Invité · 07/08/2011, 10h06

STOP ! AVANT D'ALLER PLUS LOIN : (je me répète !)
Il m'est venu un doute sur l'utilité d'envoyer TOUTE la <table> à AJAX ...

Madina, peux-tu expliquer précisément QUEL résultat tu cherches à obtenir ?

Car s'il s'agit de modifier des lignes de <table> une par une "en live" (sans rechargement), une autre méthode est possible et moins complexe !

- 1 <form> par ligne,
- au lieu de la chexkbox, un bouton submit "modifier"
- et on envoie la ligne à js/ajax via onsubmit="change_ligne(id_enregistrement);"

=> Tant qu'à faire, allons même plus loin : Modification "inline" de données avec AJAX (voir la démo)

**madina** · 07/08/2011, 20h06

Bonjour,

jreaux62 j’étais pas là hier.

Bon en fait je veux simplement pouvoir modifier les lignes d'une table sans rechargement de la page. L'essentiel est que les modifications faites sur chaque ligne soient enregistrées au niveau de la table.

Et dans ce cas, un simple message AJAX(pour rester dans la même page) pour lui dire que les modifications se sont bien passées suffirait.

L'idée c'est de lui faciliter la tâche de pouvoir modifier plusieurs lignes d'une table en même temps.

Les checkbox c'est pour simplement pouvoir identifier les différentes lignes qui sont modifiées et lui dire "tu as modifié nombre de lignes".

Pour le code fourni, c'est le même but c'est juste les tables qui différent.

Cordialement

Invité · 08/08/2011, 07h34

Bonjour Madina,
dans ce cas, inutiles de se compliquer la vie.
Les solutions les plus simples sont toujours les meilleures, et sont celles de mon message précédent.

1/ La solution la plus simple et la plus classique est celle-ci :
- 1 formulaire par ligne,
- input pour chaque donnée sur chaque ligne (identifiée grâce à l'ID_ligne)
- un bouton "modifier" sur cette ligne
- en cliquant sur le bouton : envoi des données de cette ligne à AJAX pour traitement

ou (petite amélioration)
- dès qu'un champ est modifié sur une ligne, on affiche automatiquement (-> test javascript) un bouton "modifier" sur cette ligne

2/ Un peu plus complexe, mais pas beaucoup plus compliqué : as-tu regardé ceci ? Modification "inline" de données avec AJAX (voir la démo)

**madina** · 09/08/2011, 15h39

Bonjour,

jreaux62, J'ai adopté pour l'instant la solution classique d'un formulaire par ligne:

Je parviens à modifier la ligne avec un bouton "modifier" à coté.
Cependant je voudrais améliorer en affichant le bouton que si un champ de la ligne est modifiée.
Mais je bloque sur l’événement qui se déclenche si le champ est modifié et comment ré-afficher le bouton caché ?

je vous donne ici le code du formulaire :

j'identifie le champ input et le bouton "modifier" par leur nom collé à l'identifiant de la ligne.

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
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Modifier un chapitre</title>
<script type="text/javascript">
function envoi_modif_chapitre(id_ligne){
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;
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
chapitre= document.getElementById('chapitre'+id_ligne).value;
xhr.send("chapitre="+chapitre+"&id_ligne="+id_ligne);
}
 
 
function affiche_buton_modif(id_ligne)
{
document.getElementById('modif_chapt' +id_ligne).style.visibility ="visible"; 	
}
</script>
</head>
 
<body>
 <form name="test" action="valide_modif_chapitres.php" method="post" >
<fieldset ><legend><b>Chapitres à modifier</b></legend>
 <table align="center" >
<thead>
<tr>
<th>chapitre</th>
<th>A modifier</th>
</tr>
</thead>
<tbody>
<?php
// requete : chapitres
$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 !
 
?>
 
<form name="mod_lign_chap" >
<tr>  
<td>
<input type="text" name="chapitre<?php echo $idLigne; ?>" id="chapitre<?php echo $idLigne; ?>" size="80" value="<?php echo $row_op_mod['designation_chapitre']; ?>" onchange="affiche_buton_modif(<?php echo $idLigne; ?>);" />
<td>
<center><input type="button" style="display:none" name="modif_chapt<?php echo $idLigne; ?>"  id="modif_chapt<?php echo $idLigne; ?>" onclick="envoi_modif_chapitre(<?php echo $idLigne; ?>);"/></center>
</td>
</tr>
</form>
 
<?php
} // fin while
?>
</tbody>
</table>
</fieldset>
</form>
</body>
</html>

Est-ce que le "formulaire par ligne" est syntaxiquement correcte selon mon code html ci dessus?

Comment savoir si un champ d'une ligne est modifié pour afficher le bouton "modifier" ?

Merci de solutions.

Cordialement

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

AJAX

Discussions similaires

Partager

Partager