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

Fermé

Callie33 Messages postés 139 Date d'inscription jeudi 14 avril 2011 Statut Membre Dernière intervention 4 novembre 2014 - 1 déc. 2011 à 14:44
dambrinabil Messages postés 3 Date d'inscription lundi 19 décembre 2011 Statut Membre Dernière intervention 19 décembre 2011 - 19 déc. 2011 à 20:00

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.

A voir également:

[JS - PHP] Récupérer data champ ajouté par JS
App data - Guide
Recuperer video youtube - Guide
Comment récupérer un compte facebook piraté - Guide
Recuperer message whatsapp - Guide
Alert php ✓ - Forum PHP

8 réponses

Réponse 1 / 8

maka54 Messages postés 699 Date d'inscription mercredi 8 avril 2009 Statut Membre Dernière intervention 4 décembre 2016 80
1 déc. 2011 à 15:01

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

Réponse 2 / 8

Callie33 Messages postés 139 Date d'inscription jeudi 14 avril 2011 Statut Membre Dernière intervention 4 novembre 2014 8
1 déc. 2011 à 15:14

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

Réponse 3 / 8

maka54 Messages postés 699 Date d'inscription mercredi 8 avril 2009 Statut Membre Dernière intervention 4 décembre 2016 80
1 déc. 2011 à 15:30

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"

Réponse 4 / 8

maka54 Messages postés 699 Date d'inscription mercredi 8 avril 2009 Statut Membre Dernière intervention 4 décembre 2016 80
1 déc. 2011 à 15:33

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);

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 8

Callie33 Messages postés 139 Date d'inscription jeudi 14 avril 2011 Statut Membre Dernière intervention 4 novembre 2014 8
2 déc. 2011 à 09:43

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.

maka54 Messages postés 699 Date d'inscription mercredi 8 avril 2009 Statut Membre Dernière intervention 4 décembre 2016 80
Modifié par maka54 le 2/12/2011 à 10:01

test le script que je t'ai envoyé

il faudra par contre modifier ton fichier de récupération

foreach($_POST[OAS] as $key => $oas){ 
 print_r($oas); 
}

Callie33 Messages postés 139 Date d'inscription jeudi 14 avril 2011 Statut Membre Dernière intervention 4 novembre 2014 8
2 déc. 2011 à 10:19

C'est ce que j'ai fait justement.
Là j'ai modifié le .js pour qu'il donne une valeur d'attributs différent, mais le print_r($_POST) ne m'affiche que les champs initiaux

http://pastebin.com/ntn601ww
http://pastebin.com/kpm8iyKY

Merci de ton aide!

maka54 Messages postés 699 Date d'inscription mercredi 8 avril 2009 Statut Membre Dernière intervention 4 décembre 2016 80
2 déc. 2011 à 10:33

je viens de tester ton nouveau code, et je récupère tout (champ initiaux + champs ajoutés)

Callie33 Messages postés 139 Date d'inscription jeudi 14 avril 2011 Statut Membre Dernière intervention 4 novembre 2014 8
2 déc. 2011 à 10:38

Tu récupère avec les _2, _3 ?
Bizarre, moi ça marche pas:s

maka54 Messages postés 699 Date d'inscription mercredi 8 avril 2009 Statut Membre Dernière intervention 4 décembre 2016 80
2 déc. 2011 à 10:41

oui je récupère tout

Réponse 6 / 8

Callie33 Messages postés 139 Date d'inscription jeudi 14 avril 2011 Statut Membre Dernière intervention 4 novembre 2014 8
19 déc. 2011 à 11:25

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 ;)

Callie33 Messages postés 139 Date d'inscription jeudi 14 avril 2011 Statut Membre Dernière intervention 4 novembre 2014 8
19 déc. 2011 à 15:34

Une autre question :
lorsque dans le script JavaScript on utilise document.getElementById(), qu'il récupère l'ID de <table id="id"></table>, il écrit entre les balises ou il les remplace ?

Réponse 7 / 8

Callie33 Messages postés 139 Date d'inscription jeudi 14 avril 2011 Statut Membre Dernière intervention 4 novembre 2014 8
19 déc. 2011 à 16:33

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 ?

Réponse 8 / 8

dambrinabil Messages postés 3 Date d'inscription lundi 19 décembre 2011 Statut Membre Dernière intervention 19 décembre 2011
19 déc. 2011 à 20:00

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

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?

Javascript Arrondi à 2 chiffres après la virgule

code couleur associé a une image

Nom de champs du tableau croisé dynamique non valide

Que signifie la pop up "nouveau tag ajouté" sur Huawei P8 Lite ?

Discussions similaires

Newsletters