[PHP/JS] Lignes ajoutées dynamiquement ne s'ajoute pas dans $_POST

**Volodim23** · 19/01/2023, 11h19

Bonjour à tous,

je bloque depuis hier sur un petit soucis, j'ai un script JS qui ajoute des lignes dynamiquement dans mon tableau pour pouvoir ajouter des articles à ma commande.

L'index s'incrémente pour alimenter mon tableau qui sera passé dans ma variable $_POST.

Les lignes s'affichent correctement et l'index est incrémenté au moment du clique donc jusqu'ici tout va bien...

Le problème arrive quand j’envoie mon formulaire, seul l'index 0 (donc la ligne qui n'est pas créée par le script) est envoyé dans la variable !

Voici le code de ma page d'ajout de commande :

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
<?php 
session_start();
include_once('header.php');
include_once('../vars.php');
include_once('../class/commandes.php');
 
 
$html = "";
$modals = "";
 
$formulaire="<form method='POST' action='../controls/addcommandes.php' >";
 
$formulaire.="<tr>
<td>
<select id='sitecomm' name='site'>";
 
foreach ($langAgence as $agencecomm) {
    $formulaire.= "<option value='" . $agencecomm . "'>" . $agencecomm . "</option>";
  }
$formulaire.="</select></td>";
 
$formulaire.="<td>
<input type='date' name='date' required></td>";
 
$formulaire.="<td>
<input type='text' name='articles[0][quantite]' required></td>";
 
$formulaire.="<td>
<select id='periph' name='articles[0][nom]'>";
 
foreach ($langPeripherique  as $peripherique) {
    $formulaire.= "<option value='" . $peripherique . "'>" . $peripherique . "</option>";
  }
$formulaire.="</select></td>";
 
$formulaire.="";
 
$formulaire.="<td>
<div class='input-group'>
  <textarea class='form-control' name='note' aria-label='With textarea'></textarea>
</div>
</td>
</tr>
";
 
?>
 
 
<div class="container-fluid">   
 
          <table class="table table-striped table-hover table-bordered table align-middle text-center shadow p-3 ">
            <thead class="thead">
                <tr>
                    <th>SITE</th>
                    <th>DATE DE LA DEMANDE</th>
                    <th>QUANTITÉ</th>
                    <th>PÉRIPHERIQUE</th>
                    <th>NOTE</th>
                </tr>
 
 
            <thead>
            <tbody>
              <?php echo $formulaire ?>
                <?php echo $html ?>
 
 
            </tbody>
 
        </table>
 
 
 
<button type='button' class='btn btn-secondary' id='add-line'>+</button>
 
  <div id='buttons-form-group' class='btn-group float-end' role='group'>
 
          <a href="accueil.php"> <button type="button" class="btn btn-danger square btn-xl">Annuler</button> </a>
 
          <button type='submit' class='btn btn-primary'> Ajouter </button>
 
  </div>
 
 
 
<script>
 
  var currentIndex = 1; // définir la variable currentIndex
  // Ajouter un écouteur d'événement click sur le bouton "add-line"
  document.getElementById('add-line').addEventListener('click', function() {
    // Créer une nouvelle ligne avec les champs de formulaire nécessaires
    var newRow = document.createElement("tr");
    newRow.innerHTML = `<td></td>
    <td></td>
    <td><input type='text' name='articles[${currentIndex}][quantite]' ></td>
    <td><select name='articles[${currentIndex++}][nom]'>
        <?php foreach ($langPeripherique  as $peripherique) {
            echo "<option value='" . $peripherique . "'>" . $peripherique . "</option>";
        } ?>
    </select></td>
    <td>
    </td>`;
    // Ajouter la nouvelle ligne à la fin de la balise tbody
    document.querySelector('tbody').appendChild(newRow);
  });
 
</script>
 
</form> 
 
 
 
<?php 
include_once('footer.php');
?>

Voici le var_dump($_POST) :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
C:\wamp64\www\projet\controls\addcommandes.php:4:
array (size=4)
  'site' => string 'GENERAL' (length=7)
  'date' => string '2023-01-18' (length=10)
  'articles' => 
    array (size=1)
      0 => 
        array (size=2)
          'quantite' => string '25' (length=2)
          'nom' => string 'ORDINATEURS' (length=11)
  'note' => string '' (length=0)

Ici j'avais deux lignes dans le formulaire : une avec l'index 0 pour 25 ordinateurs et une ajoutée avec l'index 1 contenant 4 téléphones qui ne figure pas dans la variable $_POST.

Je vous serais très reconnaissant si quelqu'un pouvait m'éclairer

**mathieu** · 19/01/2023, 11h53

regardez le code html avec l'inspecteur de code de votre navigateur, vous verrez que les champs créés en javascript ne sont pas à l'intérieur de la balise "form".

**Volodim23** · 19/01/2023, 14h13

Envoyé par mathieu

regardez le code html avec l'inspecteur de code de votre navigateur, vous verrez que les champs créés en javascript ne sont pas à l'intérieur de la balise "form".

Je ne comprends pas, quand je regarde dans le DOM, les éléments sont bien ajoutés dans le tableau donc par conséquent dans la balise form puisque celle-ci englobe le tableau dans mon code..

**domi65** · 19/01/2023, 14h17

Envoyé par Volodim23

Je ne comprends pas, quand je regarde dans le DOM, les éléments sont bien ajoutés dans le tableau donc par conséquent dans la balise form puisque celle-ci englobe le tableau dans mon code..

Oui, certes, mais leur name (l'attribut) ? Qu'en est-il ?

**mathieu** · 19/01/2023, 14h37

Envoyé par Volodim23

quand je regarde dans le DOM

vous parlez du code source ? dans la source les balises form sont bien autour du tableau.
mais le code html n'est pas valide donc le navigateur corrige cela et vous pouvez voir le code html corrigé avec les outils de développement du navigateur.

**Volodim23** · 19/01/2023, 14h46

Quand je regarde les éléments dans le DOM ( F12 ou CTRL+MAJ+i sous Chrome ) je vois bien les lignes avec leur nom et l'incrémentation :
Nom : DOM.png
Affichages : 76
Taille : 55,8 Ko

Nom : DOM.png
Affichages : 76
Taille : 55,8 Ko

Vous parlez bien de cela ?

**mathieu** · 19/01/2023, 14h53

Envoyé par Volodim23

Vous parlez bien de cela ?

non, c'est ce que domi65 vous avait conseillé de vérifier.
pour ma par je parlais de la balise "form" et sur l'image on voit que cette balise est immédiatement fermée. quand vous ouvrez cette balise à l'intérieur de "table" ce n'est peut-être pas valide donc essayez de l'ouvrir avant pour mettre la table entièrement à l'intérieur.

**domi65** · 19/01/2023, 12h24

Bonjour.
Il y a toutes les chances que ce soit un problème de JS et non de PHP
Lorsque l'utilisateur ajoute un article à commander, le DOM est modifié. L'inspecteur (touche F12) en prend compte est te montre les modifications du HTML. Vérifie dans cet outil que le name de ton select corresponde bien à ce que tu attends.
(peut être ++currentIndex plutôt que currentIndex++ ?)

D'autre part, tu peux faire plus simple.
Il est inutile de numéroter les articles commandes. Il suffit d'ajouter [] au name pour obtenir un tableau.
Ton HTML doit être quelque chose comme ceci :

Code html :

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

1
2
3
Article <select name="commande[]">[options]</select> Quantité <input name="qte[]"><br>
Article <select name="commande[]">[options]</select> Quantité <input name="qte[]"><br>
Article <select name="commande[]">[options]</select> Quantité <input name="qte[]"><br>

Naturellement tu remplaces [options] par tes options.

$_POST sera alors composé de deux tableaux, $commande et $quantite
Il te suffit de boucler sur le tableau $commande : pour traiter ta demande.

Code :

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

 foreach($commande as $cle => $article){[...]}

(la cle te permet d'obtenir la quantité : c'est $quantite[$cle].)

Code :

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

1
2
3
4
 foreach($commande as $cle => $article){
   $qte = $quantite[$cle];
   [...]
}

**Volodim23** · 19/01/2023, 14h22

Envoyé par domi65

Bonjour.
Il y a toutes les chances que ce soit un problème de JS et non de PHP
...

J'utilise plusieurs index car dans mon contrôleur je traite les informations différemment.
Oui effectivement, quand j'ajoute un article à commander les modifications sont bien pris en compte et l'index s'incrémente bien, J'ai

Code html :

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

<input type="text" name="articles[0][quantite]" required="">

pour la première ligne et

Code html :

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

<input type="text" name="articles[1][quantite]">

pour la deuxième..

[PHP/JS] Lignes ajoutées dynamiquement ne s'ajoute pas dans $_POST

Langage PHP

Vue hybride

Discussions similaires

Partager

Partager