Discussion :

[manu_71]

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]

Code :

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

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

[manu_71]

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]

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]

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
  }
}
?>

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]

Code :

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

name="champ[]"

=>

Code :

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

$_POST['champ']