Insérer tableau : 1 ligne ok, pas les autres

fabduroule@live.fr
Javascript

Bonjour,

Voila je rencontre un petit problème avec mon code. Comme expliqué dans le titre : j'insère un tableau, la 1ère ligne passe mais pas les autres.
Je débute en javascript et je ne pense pas retourner toutes les valeurs de mes lignes.
1.php est le formulaire (tableau);
script.js fait passer mes variables dynamiques vers 2.php
2.php insère les données.

1.php


<!doctype html>
<html lang="en">
  <head>
      <meta charset="utf-8">
      <title>Poster en ajax</title>
      <link rel="stylesheet" href="ajax.css">
      <script src="jquery.min.js"></script>
      <script src="script.js"></script>

      <SCRIPT language="javascript">

    function addRow(tableID) {

      var table = document.getElementById(tableID);

      var rowCount = table.rows.length;
      var row = table.insertRow(rowCount);

      var cell1 = row.insertCell(0);
      var element1 = document.createElement("input");
      element1.type = "checkbox";
      element1.name="chkbox[]";
      cell1.appendChild(element1);

      var cell2 = row.insertCell(1);
      cell2.innerHTML = "<input type='text' placeholder='Votre nom' class='nom' />";
      cell2.innerHTML = "<select type='text' class='message' class='form-control'><?php $list = $bdd->query('SELECT * FROM fournisseur');while ($data = $list->fetch()) { ?><option value='<?php echo $data['fournisseur_nom']; ?>'> <?php echo $data['fournisseur_nom']; ?></option><?php } $list->closeCursor(); ?></select>";

      var cell3 = row.insertCell(2);
      cell3.innerHTML = "<textarea placeholder='Votre message' class='message'></textarea>";
      }

    function deleteRow(tableID) {
        try {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;

        for(var i=0; i<rowCount; i++) {
            var row = table.rows[i];
            var chkbox = row.cells[0].childNodes[0];
            if(null != chkbox && true == chkbox.checked) {
                table.deleteRow(i);
                rowCount--;
                i--;
            }
        }
        }catch(e) {
            alert(e);
        }
    }

</SCRIPT>
  </head>

  <body>
      <h2>Ajax</h2>
      <div class="msg"></div>

  <input type="button" class="btn btn-success" value="Ajouter un autre produit" onClick="addRow('dataTable')" />

  <input type="button" class="btn btn-danger" value="Supprimer le produit" onClick="deleteRow('dataTable')" />

    <table class="table table-bordered table-striped table-condensed" width="1000" border="1">
    <thead>
    <tr>
    <th width="40"></th>
    <th width="40">nom</th>
    <th width="40">message</th>
    </tr>
    </thead>
    <tbody id="dataTable">

    </tbody>
    </table>

    <input class="submit" type="submit" value="Envoyer...">
    </body>
</html>

<?php require_once('../Include/footer.php') ; ?>

script.js

$(document).ready(function(){
    $('.submit').click(function(){
    $(".msg").slideDown().load("2.php", {
     nom: $('.nom').val(),
    message: $('.message').val()});
  });
});

et enfin 2.php

<?php $bdd = new PDO('mysql:host=localhost;dbname=ajax', 'root', '');
if(!empty($_POST['nom']) && !empty($_POST['message'])) {

  {
      $nom = $_POST["nom"];
      $message = $_POST["message"];

    $req = $bdd->prepare("INSERT INTO js(nom, message) VALUES(?,?)");
        $req->execute(array($nom,$message));
    echo "<span class='success'>Vos données ont été envoyées</span>";
  }
}
 ?>

merci d'avance

1 réponse

Lartak

Il y a un gros problème dans ton code JavaScript.
C'est quoi tout ce code PHP dans le JavaScript ?
Et surtout une requête PHP et par la suite tu affiches du code HTML dans le code JavaScript comme si tu étais sur une page HTML.
Ensuite, dans ta fonction deleteRow, tu fais une boucle for dans laquelle tu fait une incrémentation de la variable instanciée i, mais par la suite juste avant le retour de la boucle, tu décrémentes cette variable que tu as instanciée dans la fonction for.
De plus que dans cette même fonction et dans cette même boucle, tu décrémentes la variable rowCount qui sert de limite pour la boucle.