Problème de formulaire PHPH avec fonction javascript

Bonjour,

J'ai un formulaire avec une fonction javascript qui fonctionne :

<FORM id="add_film" method="post" action="add_film_manually.php">
 <div align="center">
  <p>Acteur(s)</p>
   <table id="acteurs">
     <thead>
      <tr>
       <th>Prénom</th>
       <th>Nom</th>
       <th>Date de naissance</th>
       <th>URL photo</th>
       <th>Actions</th>
      </tr>
     </thead>
     <tbody>
      <tr>
       <td>
        <input type="text" name="acteur_prenom[]">
       </td>
       <td>
        <input type="text" name="acteur_nom[]">
       </td>
       <td>
        <input type="date" name="acteur_date_de_naissance[]">
       </td>
       <td>
        <input type="text" name="acteur_url_photo[]">
       </td>
      </tr>
     </tbody>
     <tfoot>
      <tr>
       <td colspan="4">
       <button type="button" id="acteur_ajouter_ligne">Ajouter une ligne</button>
       </td>
      </tr>
     </tfoot>
    </table>
 </div>
</FORM>

<script src="acteurs.js"></script>

La première ligne est faite par défaut, les autres en cliquant sur le bouton et font donc appel à une fonction javascript (acteurs.js) :

(function (){
 var champs = [
  "acteur_prenom",
  "acteur_nom",
  "acteur_date_de_naissance",
  "acteur_url_photo"
 ],
 
 acteur_ajouter_ligne = document.getElementById("acteur_ajouter_ligne"),
 table = document.getElementById("acteurs"),
 form = document.getElementById("add_film");
 
  acteur_ajouter_ligne.onclick = function (){
  var i, supprimer,
  tbody = table.tBodies[0],
  ligne = tbody.insertRow(-1);

  function champ (name, value) {
   var t = document.createElement("input");
   t.type = name =='acteur_date_de_naissance' ? 'date' :  "text";
   t.name = t.id = name +"[]";
   t.value = value || "";
        return t;
  }

  for (i = 0; i < champs.length; i++) {
   (ligne.insertCell(i)).appendChild(champ(champs[i]));
  }

  supprimer = document.createElement("button");
  supprimer.type = "button";
  supprimer.className = "del";
  supprimer.innerHTML = "×";
  supprimer.onclick = function (){
   var tr = this.parentNode.parentNode;
   index = tr.sectionRowIndex;
   tbody.deleteRow(index);
   valider.disabled = false;
   modifier.disabled = true;
  };
 
  i = ligne.insertCell(champs.length);
  i.className = "actions";
  i.appendChild(supprimer);

  var n, nt, inputs, index;
  for (var n = 0, nt = tbody.rows.length; n < nt; n++) {
   inputs = tbody.rows[n].getElementsByTagName("input");
   index = tbody.rows[n].sectionRowIndex;
   for (var nn = 0, ntn = inputs.length; nn < ntn; nn++) {
    inputs[nn].id = inputs[nn].name = inputs[nn].name.replace(/\[\d*\]$/, "["+index+"]");
   }
  }
 };
})();

Mon problème est le suivant :

je veux créer un nouveau formulaire en reprenant les valeurs insérées dans une base de données et que ces valeurs soient préremplies dans une ou plusieurs lignes.
Pour pouvoir modifier les valeurs en cas d'erreur par exemple.

J'ai pensé à faire comme suit :

$acteurs = $data_infos_film["acteurs"];
$exp_acteurs = explode(', ', $acteurs);
$nb_acteurs = count($exp_acteurs);

<FORM method=post action="update_film.php?id=<?php echo $id; ?>&page=<?php echo $page; ?>">
 <div align="center">
  <p>Acteur(s)</p>
   <table align="center" id="acteurs">
    <thead>
     <tr>
      <th>Prénom</th>
      <th>Nom</th>
      <th>Date de naissance</th>
      <th>URL photo</th>
      <th>Actions</th>
     </tr>
    </thead>
    <tbody>
     <tr>
      <td>
       <input type="text" name="acteur_prenom[0]">
      </td>
      <td>
       <input type="text" name="acteur_nom[0]">
      </td>
      <td>
       <input type="date" name="acteur_date_de_naissance[0]">
      </td>
      <td>
       <input type="text" name="acteur_url_photo[0]">
      </td>
     </tr>
     <?php
      $acteur = 2;
      $id = 1;
      while ($acteur <= $nb_acteurs) {
       //print "Acteur(" . $acteur . ") / " . $nb_acteurs;
       print "<tr>";
       print "<td><input type='text' name='acteur_prenom[$id]'></td>";
       print "<td><input type='text' name='acteur_nom[$id]'></td>";
       print "<td><input type='date' name='acteur_date_de_naissance[$id]'></td>";
       print "<td><input type='text' name='acteur_url_photo[$id]'></td>";
       print "<td class='actions'><button class='del' type='button'>×</button></td>";
       print "</tr>";
       $acteur++;
       $id++;
      }
     ?>
    </tbody>
    <tfoot>
     <tr>
      <td colspan="4">
      <button type="button" id="acteur_ajouter_ligne">Ajouter une ligne</button>
      </td>
     </tr>
    </tfoot>
   </table>
 </div>
</FORM>

<script src="acteurs.js"></script>

Cela me met bien le bon nombre de lignes et je n'ai plus qu'à y ajouter les valeurs récupérées dans la base de données.

MAIS, le bouton "X" pour supprimer une ligne ne fonctionne pas, il est écrit via PHP et ne fait pas référence à la fonction javascript.
Le bouton est donc inactif !


Comment puis-je générer les lignes en javascript faisant références à "acteurs.js" afin de pouvoir utiliser le bouton "x" ?


Par avance merci,

Sébastien