[php] Ajouter un champs dans un formulaire

Ajouter un champs dans un formulaire [php] - PHP - Programmation

Marsh Posté le 11-09-2008 à 15:42:20    

Bonjour,
 
J'aurai voulu savoir comment faire pour que l'utilisateur de mon site puisse rajouter un champs dans un formulaire si cela est nécessaire.
En effet, je lui propose par défaut 3 champs à remplir (il s'agit des champs ingrédients pour un site de cuisine). Mais comment faire pour qu'il puisse rajouter un champs s'il a besoin d'un champs supplémentaire?
J'ai rapidement trouvé des scripts en javascript qui permettent de le faire, mais rien concernant le php et mysql.
Je suis en phase d'apprentissage et je n'ai pas envie de faire du copier/coller sans comprendre ce que je fais et je ne connais rien au javascript.
 
Merci d'avance!


Message édité par T0ots le 11-09-2008 à 15:46:37
Reply

Marsh Posté le 11-09-2008 à 15:42:20   

Reply

Marsh Posté le 11-09-2008 à 15:54:44    

Il va falloir que tu passe ta variable en tableau
 

Code :
  1. <label>champ1</label><input name="var[]" value="" />
  2. <label>champ2</label><input name="var[]" value="" />
  3. <label>champ3</label><input name="var[]" value="" />


Ainsi un tu récupérera un tableau en $_GET ou $_POST (selon la méthode du formulaire).
 
Pour les ajouter dynamiquement, il n'y a que le javascript...
Par exemple (vite fait et non testé) :  

Code :
  1. <label>champ1</label><input name="var[]" value="" />
  2. <div id="addInput"></div>
  3. <input type="button" name="Ajouter un champ" onclick="document.getElementById('addInput').innerHTML='<label>champ2</label><input name=\"var[]\" value=\"\" />';" />


 
Va faire un tour sur w3school section javascript tu trouvera ton bonheur et tu pourras apprendre par la même occasion :)

Message cité 1 fois
Reply

Marsh Posté le 11-09-2008 à 15:55:24    

bonjour,
 
si tu veux faire ça coté serveur,
il faut que le formulaire soit retourné au php,
    ( au click de l'utilisateur sur "ajouter un champ" )
    qui "recréera" le formulaire en y ajoutant ce
    nouveau champ.
 
@+
 


---------------
[mon site] [m'écrire]
Reply

Marsh Posté le 11-09-2008 à 15:59:16    

ça fait 10 ans qu'on a la technologie pour le faire coté utilisateur, ta solution est correcte bul3, mais bon... sans être pro web 2.0, on peux quand même utiliser du simple javascript...

Reply

Marsh Posté le 11-09-2008 à 16:07:09    

Merci pour vos réponses.
Je vais tester la méthode php et si je ne m'en sors pas, je tenterai le javascript. Mais apprendre le javascript alors que je suis déjà en pleine nébuleuse phpienne... bref on verra ça plus tard :)

Reply

Marsh Posté le 12-09-2008 à 15:38:05    

J'ai demandé exactement la même chose hier, ici:
http://forum.hardware.fr/hfr/Progr [...] 7877_1.htm
 
et j'ai obtenu des réponses très différentes ! J'avais aussi eu l'idée du document.write mais on m'a dit que c'était pas du tout une bonne idée, qu'il valait mieux prévoir en dur tous les champs (un nombre suffisamment grand pour toi donc) et des les afficher ou pas en jouant avec la visibilité du div qui les contient.
 
Ma fonction javascript de test faisait un document.write('toto'); mais le problème c'est que j'obtenais une nouvelle page toute blanche avec écrite juste toto dedans. Alors que moi je voulait qu'elle écrive un div dans la page existante !


Message édité par cimourdain le 12-09-2008 à 15:41:10
Reply

Marsh Posté le 12-09-2008 à 19:18:40    

Nasga a écrit :

Il va falloir que tu passe ta variable en tableau
 

Code :
  1. <label>champ1</label><input name="var[]" value="" />
  2. <label>champ2</label><input name="var[]" value="" />
  3. <label>champ3</label><input name="var[]" value="" />


Ainsi un tu récupérera un tableau en $_GET ou $_POST (selon la méthode du formulaire).
 
Pour les ajouter dynamiquement, il n'y a que le javascript...
Par exemple (vite fait et non testé) :  

Code :
  1. <label>champ1</label><input name="var[]" value="" />
  2. <div id="addInput"></div>
  3. <input type="button" name="Ajouter un champ" onclick="document.getElementById('addInput').innerHTML='<label>champ2</label><input name=\"var[]\" value=\"\" />';" />


 
Va faire un tour sur w3school section javascript tu trouvera ton bonheur et tu pourras apprendre par la même occasion :)


 
 
la version correcte selon moi (le label en moins):

Code :
  1. <html>
  2. <head>
  3. </head>
  4. <body>
  6. <div id="addInput"></div>
  8. <input type="button" value="Ajouter un champ" onclick="javascript:document.getElementById(&apos;addInput&apos;).innerHTML=&apos;&lt;input type=&quot;text&quot; name=&quot;var[]&quot; value=&quot;&quot; /&gt;&apos;; return false;" />
  10. </body>
  11. </html>


 
 
Par contre quand je clique sur le bouton ça m'ajoute bien un champ <input> mais si j'appuie plusieurs fois ensuite ça ne rajoute pas d'autres champs.
 
Comment faire pour que ça rajoute un champ à chaque clic ?


Message édité par cimourdain le 12-09-2008 à 19:21:09
Reply

Marsh Posté le 12-09-2008 à 20:03:49    

normal : t'écrases la valeur de ta div à chaque fois!
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Page</title>
  6.  
  7. <script type="text/javascript">
  8. function add() {
  9.     var input = addInput.innerHTML
  10.     addInput.innerHTML = input + '<input type="text" name="name[]" /><br />\n';
  11. }
  12. </script>
  13. </head>
  14. <body>
  15.  
  16. <div id="addInput"></div>
  17.  
  18. <input type="button" value="Ajouter un champ" onClick="add();" />
  19.  
  20. </body>
  21. </html>

Reply

Marsh Posté le 12-09-2008 à 20:35:00    

merci bien !

Reply

Marsh Posté le 13-09-2008 à 18:16:57    

Chouchou, pas besoin de rajouter des elements de formulaires, met un textarea pour les ingrédients ^^ :)

Reply

Marsh Posté le 13-09-2008 à 18:16:57   

Reply

Marsh Posté le 13-09-2008 à 18:22:51    

:heink:

Reply

Marsh Posté le 24-05-2013 à 08:14:14    

Bonjour à tous!
 
Mon premier post heureux de venir ici!
 
Ce sujet m'a beaucoup aidé dans la réalisation de mon projet. le script de luc@as fonctionne très bien.
Mais il à juste une petite limite et je déterre ce sujet pour voir si quelqu'un peut y apporter une amélioration.
 
Lorsque un ajoute un champ: on le remplit!
puis si on ajoute un second champ alors tous le contenu écrit dans le premier champs disparaît!
 
l'utilisateur est donc obliger de savoir à l'avance le nombre de champs qu'il souhaite remplir pour les ajouter dés le départ, pas très pratique..
 
Vous avez des idées pour y remédier?


---------------
Maël
Reply

Marsh Posté le 25-05-2013 à 16:25:24    

Sers toi du dom, innerHTML n'est pas adapté pour faire ça.
 
exemple :
 

Code :
  1. function addInput(nodeId)
  2. {
  3.     var par = document. . ('p');
  4.     var input = document. . ('input');
  5.     input.setAttribute('type', 'text');
  6.     input.setAttribute('name', 'name[]');
  7.     par. . (input);
  8.     document.getElementById(nodeId). . (par);
  9. }


 
Et donc :

Code :
  1. <div id="addInput"></div>
  3. <input type="button" value="Ajouter un champ" onClick="addInput('addInput');" />


 
Hum, le code bug entre balises...
Et sans balises aussi wtf  :heink:
 
 

Code :
  1. function addInput(nodeId)
  2. {
  3.     var par = document.create Element('p');
  4.     var input = document.create Element('input');
  5.     input.setAttribute('type', 'text');
  6.     input.setAttribute('name', 'name[]');
  7.     par.append Child(input);
  8.     document.getElementById(nodeId).append Child(par);
  9. }


 
Faut virer les espaces dans create Element et append Child


Message édité par bistouille le 25-05-2013 à 16:42:30
Reply

Marsh Posté le 16-07-2014 à 12:13:43    

Salut !
 
Concernant ton code, j'ai une petit question, je voudrais à la place lui donner le nom d'une variable i par exemple comme ceci :  
 
Petit soucis, ça ne marche pas vraiment, un conseil serait le bienvenue !
 
Merci D'avance
 
 
var i=1;
function add() {
    var input = addInput.innerHTML
    addInput.innerHTML = input + '<input type="text" name="'.i.'" /><br />\n';
i++;
}

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed