[JS - PHP] Récupérer data champ ajouté par JS
Bonjour,
Voici mon problème :
J'ai créé une fonction php, qui retourne un formulaire HTML.
Afin de pouvoir ajouter des champs supplémentaires, j'ai codé un scipt en javascript.
Jusque là, tout marche bien, quand je clique sur "Ajouter", un champ s'ajoute.
Ce que je ne sais pas par contre, c'est comment récupérer les données entrées dans ces champs supplémentaire ? Comment différencier s'il n'y a eu aucun champ d'ajouté ou plusieurs ?
J'espère avoir été claire!
Merci à ceux qui m'aideront.
Voici mon problème :
J'ai créé une fonction php, qui retourne un formulaire HTML.
Afin de pouvoir ajouter des champs supplémentaires, j'ai codé un scipt en javascript.
Jusque là, tout marche bien, quand je clique sur "Ajouter", un champ s'ajoute.
Ce que je ne sais pas par contre, c'est comment récupérer les données entrées dans ces champs supplémentaire ? Comment différencier s'il n'y a eu aucun champ d'ajouté ou plusieurs ?
J'espère avoir été claire!
Merci à ceux qui m'aideront.
8 réponses
-
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
