[JS - PHP] Récupérer data champ ajouté par JS

vous récupérez les données des champs supplémentaires de la même façon que les autres

le code source, formulaire + le js sont nécessaire pour vous aidez d'avantage

test.js : http://pastebin.com/VGh7Yk3H
display.php : http://pastebin.com/ySy8ZAkG

Ensuite, je récupère les valeur des champs :
https://pastebin.com/7Ha61hR5

alors, le problème est plus complexe, c'est en fait, que vous créez un nouveau formulaire à chaque fois

or, un seul des formulaire sera à envoyé

il faut donc un seul et unique formulaire mais il faut pouvoir différencier chaque "OAS"

display.php

<?php
 
  function
  displayForm () {
 
  echo "<form name='oaenvironment_display_modify_form' action='index.php' method='post' class='formulaire'>\n";  
  echo "<table class='formulaire_items'>\n";
 
  /* OAS */
  echo "<tr><td colspan='2' class='formulaire_section_title'>"._("OAS")."</td></tr>\n";
    // Hostname
  echo "<tr><td class='formulaire_item_name'>"._("hostname")." :</td><td class='formulaire_item_value'><input type='text' name='OAS[1][oas_hostname]' value=\""."oas_hostname"."\"></td></tr>\n";
    // Domain
  echo "<tr><td class='formulaire_item_name'>"._("domain")." :</td><td class='formulaire_item_value'><input type='text' name='OAS[1][oas_domain]' value=\""."oas_domain"."\"></td></tr>\n";
    // IP
  echo "<tr><td class='formulaire_item_name'>"._("ip")." :</td><td class='formulaire_item_value'><input type='text' name='OAS[1][oas_ip]' value=\""."oas_ip"."\"></td></tr>\n";
    // Login
  echo "<tr><td class='formulaire_item_name'>"._("login")." :</td><td class='formulaire_item_value'><input type='text' name='OAS[1][oas_login]' value=\""."oas_login"."\"></td></tr>\n";
    // Password
  echo "<tr><td class='formulaire_item_name'>"._("password")." :</td><td class='formulaire_item_value'><input type='text' name='OAS[1][oas_password]' value=\""."oas_password"."\"></td></tr>\n";
    // Web port
  echo "<tr><td class='formulaire_item_name'>"._("web port")." :</td><td class='formulaire_item_value'><input type='text' name='OAS[1][http_port]' value=\""."http_port"."\"></td></tr>\n";
    // Sysadmin password
  echo "<tr><td class='formulaire_item_name'>"._("sysadmin password")." :</td><td class='formulaire_item_value'><input type='text' name='OAS[1][sysadmin_password]' value=\""."sysadmin_password"."\"></td></tr>\n";
;
 
  echo "</table>\n";
  echo '<span id="OAS_2"><a href="javascript:add_OAS_field(2)">Add OAS</a></span>';
  echo "<input type='submit' value=\""._("Modify this environment")."\" class='formulaire_submit'>\n";
  echo "</form><br/>\n";
 
  echo '<script type="text/javascript" src="./js/test.js" charset="utf-8"></script>';
}
?>

test.js

 function add_OAS_field (i) {
  var j = i + 1;
 
  document.getElementById('OAS_' + i).innerHTML =
    "<table class='formulaire_items'>\n" +
    "<tr><td colspan='2' class='formulaire_section_title'> OAS </td></tr>\n" +
      // Hostname
    "<tr><td class='formulaire_item_name'> Hostname : </td><td class='formulaire_item_value'>" +
    "<input type='text' name='OAS[" + i + "][oas_hostname]' value=\" oas_hostname \"></td></tr>\n" +
      // Domain
    "<tr><td class='formulaire_item_name'> Domain : </td><td class='formulaire_item_value'>" +
    "<input type='text' name='OAS[" + i + "][oas_domain]' value=\" oas_domain \"></td></tr>\n" +
      // IP
    "<tr><td class='formulaire_item_name'> IP : </td><td class='formulaire_item_value'>" +
    "<input type='text' name='OAS[" + i + "][oas_ip]' value=\" oas_ip \"></td></tr>\n" +
      // Login
    "<tr><td class='formulaire_item_name'> Login : </td><td class='formulaire_item_value'>" +
    "<input type='text' name='OAS[" + i + "][oas_login]' value=\" oas_login \"></td></tr>\n" +
      // Password
    "<tr><td class='formulaire_item_name'> Password : </td><td class='formulaire_item_value'>" +
    "<input type='text' name='OAS[" + i + "][oas_password]' value=\" oas_password \"></td></tr>\n" +
     // Web port
    "<tr><td class='formulaire_item_name'> Web port : </td><td class='formulaire_item_value'>" +
    "<input type='text' name='OAS[" + i + "][http_port]' value=\" http_port \"></td></tr>\n" +
     // Sysadmin password
    "<tr><td class='formulaire_item_name'> Sysadmin password : </td><td class='formulaire_item_value'>" +
    "<input type='text' name='OAS[" + i + "][sysadmin_password]' value=\" sysadmin_password \"></td></tr>\n" +
   
    "</table>\n" ;
 
  document.getElementById('OAS_' + i).innerHTML += (i<10) ?
    "<br/><span id=\"OAS_"+j+"\"><a href=\"javascript:add_OAS_field("+j+")\"> Add OAS </a></span>" : "" ;
}

voici un code qui vous permettra de tout récupérer

pour voir la différence, placer dans la page de récupération des champs :

print_r($_POST);

Merci pour cette réponse, j'ai en effet sorti les lignes <form>.
Le problème est que lorsque je soumets le formulaire, je ne récupère que les valeurs du premier champs, les autres ne sont pas récupérées.

Mon problème n'étant pas résolu, j'essaie de comprendre comme le JavaScript rajoute les champs.

Sur ma page, j'ai mon tableau.
<table>
...
</table>
Et dans le tableau, je fais appel à ma fonction javascript.
Du coup, comment cela fonctionne? Ca rajoute du code html à l'endroit où je l'appelle, ou à la fin ?
Si j'applique une class à mon tableau, et que le js me renvoie <tr><td> Coucou </td></tr>, est-ce que le style s'applique à cette ligne ?

Merci d'avance à ceux qui pourront m'éclairer ;)

J'ai trouvé comment rajouter des champs sans soucis d'affichage.
Cependant, lorsque j'utilise document.getElementById("id").innerHTML, j'aimerais supprimer les 3 dernières lignes de ce que je récupère.
Est-ce possible ?

fait en sorte que le script js crée le champ dans le même formulaire en ométant le "<form name='oaenvironment_display_modify_form' action='index.php' method='post' class='formulaire'>" puis pour facilité la tache du coté php, ajoute juste print_r($_POST); die(); au début du fichier pour avoir une idée sur les champs envoyés sur la page