Renvoyer plusieurs fois un formulaire en ayant ajouté des champs dynamiquement

**manu_71** · 26/01/2013, 10h51

Bonjour,

J'ai construit un formulaire en HTML dans lequel j'ai un bouton qui charge un champ supplménetaire dans ce formulaire (en AJAX donc). Au 1er appel, je charge bien le champ supplémentaire. Je le renseigne (champ type texte) et je clic de nouveau sur le bouton. Le comportement que j'ai prévu est d'ajouter encore un nouveau champ tout en rappelant le 1er qui a été ajouté (ainsi que sa valeur). En cliquant une seconde fois sur le bouton, je dois donc envoyer mon formulaire AVEC le nouveau champ que j'ai créé dynamiquement... Mais voilà, il n'y est pas (vérifier avec la console de Firebug, j'ai bien mes autres champs mais pas le nouveau)...
C'est un problème classique de vouloir accéder à un élément chargé dynamiquement et qui n'était donc pas présent au chargement de la page initial... Mais j'ai encore un peu de mal avec la logique de tout ça et je ne vois pas comment faire...

Voici ce que j'ai fait jusqu'à maintenant :

La partie JQuery :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
      $("#form-renseignements").on("click", "#addInfo", function() {
        $.ajax({
          type: "POST",
          url: "ajax_add-info.php",
          data: $("#form-renseignements").serialize(),
          success: function(msg){
            $("#ajaxListInfo").replaceWith(msg);
          }
        });
        return false;
      })

La partie HTML :

Code html :

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

1
2
3
4
5
6
7
8
9
10
  <form id="form-renseignements" method="post" enctype="multipart/form-data" action="valid-fiche.php" name="form-renseignements">
  nom : <input type="texte" id="champ-nom" name="nom" value="" /><br />
  <!-- Je vous enlève les autres champs de base sans rapport avec le problème -->
  Ajouter un champ info : <input type="submit" value="OK" id="addInfo" name="addInfo">
  <div id="ajaxListInfo">
    <!-- Ici le HTML reçu de ajax_add-info.php via AJAX -->
  </div>
  <!-- Le bouton ci-dessous valide normalement le formulaire (donc pas par AJAX), une fois tous les champs info ajoutés -->
  <input type="submit" value="VALIDER" id="valid-fiche" name="valid-fiche">
  </form>

ajax_add-info.php ne retourne aucun bug et j'ai vérifié qu'il retourne bien ce que j'attends, ce qui est le cas. Donc, lorsque je clic la 1ère fois sur le bouton Ok, j'ai le div ajaxListInfo qui se remplace par :

Code html :

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

1
2
3
  <div id="ajaxListInfo">
    <input type="text" id="champ-info1" name="champ[1]" value="" /><br />
  </div>

ce que j'attends, c'est remplir le champ (ou pas, peu importe mais la valeure doit être envoyée) et quand je clic sur le bouton OK pour ajouter un nouveau champ, mon script PHP reconstruit toute cette partie de formulaire (je reconstruit tout car il y a un traitement autre en fonction du nombre de champs ajoutés, etc... mais ce n'est que de l'affichage). Seulement quand je clic sur le bouton OK la 2ème fois, le comportement est identique à la première fois car le nouveau champ n'est pas envoyé...

**SpaceFrog** · 26/01/2013, 12h04

Code :

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

$("#ajaxListInfo").replaceWith($(msg));

**manu_71** · 26/01/2013, 12h13

Merci pour cette réponse. Par contre je ne comprends pas bien cette correction (je suis preneur d'une explication plus détaillée). En tout cas je l'ai appliqué et elle ne change rien à mon problème. Le fonctionnement reste identique.

**SpaceFrog** · 26/01/2013, 12h53

la reponse reçue est juste du texte ... il faut faire le replace avec un element DOM

Deux questions me viennent ...

pourquoi

Code :

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

name="champ[1]"

..
coté php tu essayes de recupérer quoi ? quel indexe de post ?

ensuite en faisaint un return false comment veur tu que le formulaire soit envoyé ?

**manu_71** · 26/01/2013, 13h17

Envoyé par SpaceFrog

pourquoi

Code :

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

name="champ[1]"

..
coté php tu essayes de recupérer quoi ? quel indexe de post ?

Côté PHP, afin d'identifier le nombre de champ à traiter, je récupère $_POST['champ'] en tant que array() :

Code php :

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

1
2
3
4
5
6
7
8
9
10
<?php
if (is_array($_POST['champ']))
{
  reset ($_POST['champ']);
  while (list($key,$value) = each($_POST['champ']))
  {
     // En avant le traitement
  }
}
?>

Envoyé par SpaceFrog

ensuite en faisaint un return false comment veur tu que le formulaire soit envoyé ?

Le return false est pour que le formulaire ne s'envoie pas sur la page HTML sans passer par mon AJAX mais bien en AJAX quand je clic sur mon bouton OK (id="addInfo"). D'ailleurs ce point fonctionne parfaitement comme attendu... Si je l'enlève, en cliquant sur mon bouton "OK" la partie AJAX ne me sert plus à rien puisque mon formulaire va être POST à la page de destination (comme si j'avais cliquer sur mon autre bouton "VALIDER" en bas de formulaire.

**SpaceFrog** · 26/01/2013, 14h15

Code :

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

name="champ[]"

=>

Code :

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

$_POST['champ']

**manu_71** · 26/01/2013, 16h50

Envoyé par SpaceFrog

Code :

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

name="champ[]"

=>

Code :

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

$_POST['champ']

Je ne comprends pas trop où tu veux m'emmener et le rapport avec mon problème
Est-ce que cette histoire de name="champ[]" a un intérêt pour mon problème ? Parce que ça, à priori, ça fonctionne très bien et je n'ai pas vraiment besoin d'aide à ce sujet (enfin je ne pense pas). Après je n'utilise jamais avec AJAX mais dans ce cas, je ne comprends pas bien le problème...
Ce qui ne fonctionne pas, c'est le POST en AJAX des champs dynamiques... donc pour simplifier, comment est-ce que je peux intégrer dans le DOM les champs que j'ajoute (ou en tout cas comment puis-je y accéder) ?
Ma console montre très bien que serialize() récupère les données de mon formulaire et qu'elles sont envoyées en POST par $.ajax()... sauf les données chargées dynamiquement par AJAX...

**SpaceFrog** · 26/01/2013, 21h04

le rapport ???????
c'est juste la solution a ton problème ...

TU devrais juste tester en faisant un var_dump de ton post cote php pour comprendre qu si tu mets name="champs[1] tu ne recupère pas un array $_POST['champs'] en php ...

**manu_71** · 26/01/2013, 22h08

Envoyé par SpaceFrog

le rapport ???????
c'est juste la solution a ton problème ...

TU devrais juste tester en faisant un var_dump de ton post cote php pour comprendre qu si tu mets name="champs[1] tu ne recupère pas un array $_POST['champs'] en php ...

Euh t'énerves pas hein !

Je conçois tout à fait que tu sois plus expérimenté que moi

et qu'il y a un truc que je pige pas. C'est d'ailleurs pour ça que je suis là. Maintenant si ça te hérisse le poil de répondre, je ne t'y oblige pas.

Ensuite (mais ça va pas te plaire), je persiste et signe pour dire que le problème n'est pas là (en tout cas pas dans un 1er temps). Je ne peux pas même pas tester ce que me retourne le champ en question avec un var_dump dans mon code PHP (enfin je peux mais ça donne rien sur ce champ de formulaire) puisque la console me dit que les données en question ne sont pas envoyés en POST. Mon formulaire est envoyé en POST SAUF les champs dynamiques (donc ce champ en question). Le var_dump en question le confirme très bien

Toutefois, juste pour être sûr qu'il n'y a pas autre chose que je n'aurais pas compris, j'ai mis champ[] au lieu de champ[1] (je précise quand même que l'index de l'array en question est important et doit être contrôlé) mais ça ne fonctionne pas mieux vu que comme je le dis depuis le début, les champs chargés en AJAX ne sont pas envoyés...

J'en viens à me demander si tu as lu mon sujet ? Peut-être était-il trop long ?

PS :
D'autre part, je le redis, tu es sans doute bien pus fort que moi mais je continue d'affirmer qu'il n'y a aucun problème à mon code PHP actuel. Afin de m'en convaincre, je viens de réaliser le test rapide suivant 100% fonctionnel :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<html>
 <body>
  <form id="test" name="test" method="post" action="test.php">
   <input type="text" id="texte-1" name="texte[1]" value="" />
   <input type="submit" id="bouton" name="bouton" value="OK" />
  </form>
  <?php
  echo ($_POST['texte'][1]);
  ?>
 </body>
</html>

EDIT : Bien entendu le code ci-dessus fonctionne avec var_dump(). Par exemple en entrant "truc" dans le champ texte, le script retourne :

array(2) { ["texte"]=> array(1) { [1]=> string(4) "truc" } ["bouton"]=> string(2) "OK" }

**SpaceFrog** · 26/01/2013, 23h28

Ce code me renvoie bien tous les inputs ajoutés que ce soit avec le post en ajax (alert) ou en submit classique (var_dump)

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
<?php
header('charset=UTF-8');
if (isset($_POST['ajout'])){
    echo '<input type="text" name="champ[]" value="" />';
    exit();
    die();
}
else {
?>
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery.js'></script>
<script type='text/javascript' >
    $(function(){
    $("#ajout").click( function(e) {
        alert($("#formtest").serialize())
        e.preventDefault();
        $.ajax({
          type: "post",
          dataType: "html",
          url: "test.php",
          data: $("#formtest").serialize()+"&ajout=ajout",
          success: function(msg){
            $("#texte-1").after("<br/>"+msg);
          }
        });
       })
    })
</script>
</head>
 <body>
  <form id="formtest" name="formtest" method="post" action="test.php">
   <input type="text" id="texte-1" name="texte[1]" value="" />
   <input type="submit" id="ajout" name="ajout" value="Ajout" />
   <input type="submit" id="bouton" name="bouton" value="OK" />
  </form>
 <?php
 if (isset($_POST['bouton'])){
     echo nl2br(var_dump($_POST));
 }
 ?>
 </body>
</html>
<?php } ?>

**danielhagnoul** · 26/01/2013, 23h41

Bonsoir

Côté jQuery, je vous suggère de tester le code suivant :

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
 $( "input[type='submit']", "#form-renseignements" ).on( "click", function( event ){
 
	if ( this.value == "VALIDER" ){
 
		$( "#form-renseignements" ).submit();
 
	} else {
		var str = $( "#form-renseignements" ).serialize(),
			jqXHR = $.post( "ajax_add-info.php", str );
 
		jqXHR.done( function( data, textStatus, jqXHR ){
			// succès de la transaction, on doit traiter le contenu de data
 
			// debug
			// console.log( data, textStatus, jqXHR );
 
			$( "#ajaxListInfo" ).html( data );
 
			/*
			 * replaceWith( data ) ? on n'a pas besoin de conserver 
			 * l'ancien contenu.
			 * 
			 * html( data ) si data contient la totalité
			 * ou append( data ) si data contient un nouvel élément
			 */
 
		});
 
		jqXHR.fail( function( jqXHR, textStatus, errorThrown ){
			// échec de la transaction, gérer la catastrophe
 
			// debug
			// console.log( jqXHR, textStatus, errorThrown );
 
		});
 
		jqXHR.always( function( jqXHR, textStatus ){
			// la transaction est terminée
 
			// debug
			// console.log( jqXHR, textStatus );
 
		});
 
		// pour debug sans transaction AJAX
		/*
		console.log( $( "#form-renseignements" ).serialize() );
 
		$( "#ajaxListInfo" ).append( '<input type="text" id="champ-info1" name="champ[1]" value="" /><br />' );
		*/
	}
 
	return false;
});

**manu_71** · 26/01/2013, 23h52

Je suis ravi de voir que nous sommes donc maintenant parfaitement d'accord pour dire que le problème ne vient pas du contrôle de l'id dans l'array champ[].
Il suffit de s'en convaincre en ajoutant peu de ligne à ton code :

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
 
<?php
header('charset=UTF-8');
if (isset($_POST['ajout'])){
    if (is_array($_POST['champ']))
    {
      $i = count($_POST['champ']) + 1;
    }
    else $i = 1;
    echo '<input type="text" name="champ[' . $i . ']" value="" />';
    exit();
    die();
}
else {
?>
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery.js'></script>
<script type='text/javascript' >
    $(function(){
    $("#ajout").click( function(e) {
        alert($("#formtest").serialize())
        e.preventDefault();
        $.ajax({
          type: "post",
          dataType: "html",
          url: "test.php",
          data: $("#formtest").serialize()+"&ajout=ajout",
          success: function(msg){
            $("#texte-1").after("<br/>"+msg);
          }
        });
       })
    })
</script>
</head>
 <body>
  <form id="formtest" name="formtest" method="post" action="test.php">
   <input type="text" id="texte-1" name="texte[1]" value="" />
   <input type="submit" id="ajout" name="ajout" value="Ajout" />
   <input type="submit" id="bouton" name="bouton" value="OK" />
  </form>
 <?php
 if (isset($_POST['bouton'])){
     echo nl2br(var_dump($_POST));
 }
 ?>
 </body>
</html>
<?php } ?>

Ouf, on avance !

Mais alors le mystère reste entier... et je ne vois toujours pas d'où vient le problème...

EDIT : Je viens de poster avant de découvrir la deuxième réponse. Je vais donc en prendre connaissance de ce pas.

**SpaceFrog** · 27/01/2013, 09h44

tu ajoutes plusieurs fois le bouton avec le même id ???
un id Doit être unique sur la page !

Le code donné au dessus fonctionne et tous les inputs ajoutés dynamiquement
name="champs[]' sans préciser l'indice sont bien envoyés dans les deux cas.
Je reste persuadé que tes duplication d'id et d'indexes de names y sont pour quelque chsoe ...

**manu_71** · 27/01/2013, 11h33

Envoyé par SpaceFrog

tu ajoutes plusieurs fois le bouton avec le même id ???
un id Doit être unique sur la page !

?? Pas du tout ! Où as-tu vu ça ? Là j'ai repris ton code pour l'adapter et je n'ai donc (comme toi) pas mis d'id dans le champ dynamique. Mais dans mon code, l'id est également géré dynamiquement et il n'y a aucun doublon d'id.

EDIT : Je viens de voir que j'avais parlé d'id dans ma réponse précédente. Je voulais dire index et non id. J'ai utilisé le terme id car ce sont bien des identifiants qui sont mes index de array... (des identifiants de bases de données mais peu importe en fait...)

Envoyé par SpaceFrog

Le code donné au dessus fonctionne et tous les inputs ajoutés dynamiquement
name="champs[]' sans préciser l'indice sont bien envoyés dans les deux cas.
Je reste persuadé que tes duplication d'id et d'indexes de names y sont pour quelque chsoe ...

Je n'ai aucune duplication d'id ni de name. Je peux très bien le vérifier en consultant ma source. L'index (ou indice) est spécifié mais est bien toujours différent d'un champ à l'autre et les id également. Et de toute façon, hier, malgré mon manque de conviction, j'ai quand même testé avec ta méthode (sans spécifier l'index et en gardant toujours des id bien différents du type "champ-xx") et ça ne change rien. Ma console m'indique bien que mon appel AJAX envoie les données de mon formulaire en POST SAUF les nouveaux champs ajoutés dynamiquement.
Je vais étudier dans la journée la réponse de danielhagnoul pour chercher une solution de ce côté ci.

EDIT : Surtout qu'à l'ajout du 1er champ, il n'y a forcément aucun index ou id en double vu que les champs s'ajoutent un par un... donc après l'ajout du 1er champ, il est forcément unique même si j'avais une erreur dans mon code PHP (ce qui n'est pas le cas j'ai vérifié). Et donc à l'ajout du 2ème, le 1er devrait se renvoyer correctement. Et bien non : aucune trace dans les données envoyées en POST (contrôlé par la console).

**manu_71** · 27/01/2013, 19h57

EDIT : Autant pour moi (j'avais initialement posté un message comme quoi le sélecteur ne fonctionnait pas mais c'était un problème d'intégration).

Merci beaucoup danielhagnoul, ce code fonctionne bien.

**manu_71** · 27/01/2013, 20h39

J'ai trouvé d'où venait le problème dans mon code. j'avais omis d'indiquer un petit élément que je pensais complètement anodin mais qui ne l'est pas du tout...
Entre le clic sur le bouton OK et l'appel AJAX, je remplaçais ma zone par un petit gif de chargement (au cas où le traitement PHP prendrait un peu de temps à répondre).
Le code :

Code :

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

1
2
 
$("#ajaxListInfo").html("<div id=\"ajaxListInfo\" style=\"text-align: center;\"><img src=\"./img/icones/load-16.gif\" class=\"voirPlusElmt\" /></div>");

Et c'est ça qui pose problème... Je m'en suis rendu compte en rajoutant ceci dans le code qui fonctionnait et pof ! Ca fonctionnait plus... J'ai donc ré-essayer mon code sans cette ligne qui finalement fonctionne bien...

Du coup je décoche le "résolu" si toutefois quelqu'un est intéressé pour m'expliquer...

J'ai perdu pas mal de temps sur mon projet et je crois que dans un premier temps je vais déplacer le petit gif ailleurs... Mais par contre je ne comprends pas pourquoi ça ne fonctionne pas en l'ajoutant...

**danielhagnoul** · 27/01/2013, 22h27

Bonsoir

Vous effaciez simplement tout le contenu de la division !

Comme je le dis dans les commentaires de mon code, il faut bien distinguer le remplacement du contenu par un html() et l'ajout au contenu par un append() ou autre méthode du même genre.

$( "#ajaxListInfo ").prepend( '<div id="ajaxListInfo" style="text-align: center;"><img src="./img/icones/load-16.gif" class="voirPlusElmt" /></div>' );

**manu_71** · 27/01/2013, 22h46

Envoyé par danielhagnoul

Comme je le dis dans les commentaires de mon code, il faut bien distinguer le remplacement du contenu par un html() et l'ajout au contenu par un append() ou autre méthode du même genre.

Je pense qu'il y a un truc à ce niveau que je ne saisi pas bien... Par exemple déjà la nuance entre .replaceWith() et .html()...
En fait jusqu'à mainteant j'utilisais toujours .replaceWith().
Au départ dans mon code je faisais .replaceWith() pour afficher le gif, puis l'appel AJAX et au succès de l'AJAX encore .replaceWith() pour afficher mes champs à la place du gif...
J'ai beau lire la doc, je vois bien une petite nuance dans les termes mais pas dans les faits...

dans le cas qui me concerne c'est bien du remplacement de contenu. Au départ j'ai une div vide. Puis je mets une div avec un gif, puis une div avec un champ, puis une div avec un gif, puis une div avec 2 champs (ou un seul, suivant traitement PHP...), etc...

**danielhagnoul** · 27/01/2013, 23h36

La méthode replaceWith() -- var ancienContenu = $( selector ).replaceWith( "nouveau contenu" ); -- est nécessaire lorsque l'on veut réutiliser "ancienContenu" sinon on utilise simplement $( selector ).html( "nouveau contenu" );.

Si vous effacez tout le contenu de la division d'ID "ajaxListInfo" pour le remplacer par un GIF avec un replaceWith() ou avec un html(), le résultat de la sérialisation du formulaire ne comportera jamais le contenu de cette division. C'est uniquement après le succès de la transaction AJAX que l'on peut effacer le contenu de cette division.