Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1702 connectés 

  FORUM HardWare.fr
  Programmation
  PHP

  [php] Ajouter un champs dans un formulaire

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[php] Ajouter un champs dans un formulaire

n°1785636
T0ots
Posté le 11-09-2008 à 15:42:20  profilanswer
 

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
mood
Publicité
Posté le 11-09-2008 à 15:42:20  profilanswer
 

n°1785654
Nasga
Posté le 11-09-2008 à 15:54:44  profilanswer
 

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

n°1785656
bul3
Posté le 11-09-2008 à 15:55:24  profilanswer
 

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]
n°1785662
Nasga
Posté le 11-09-2008 à 15:59:16  profilanswer
 

ç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...

n°1785675
T0ots
Posté le 11-09-2008 à 16:07:09  profilanswer
 

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

n°1786121
cimourdain
Posté le 12-09-2008 à 15:38:05  profilanswer
 

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
n°1786183
cimourdain
Posté le 12-09-2008 à 19:18:40  profilanswer
 

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>
  5. <div id="addInput"></div>
  6. <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;" />
  7. </body>
  8. </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
n°1786217
Profil sup​primé
Posté le 12-09-2008 à 20:03:49  answer
 

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>

n°1786236
cimourdain
Posté le 12-09-2008 à 20:35:00  profilanswer
 

merci bien !

n°1786407
milootoolo​o
Posté le 13-09-2008 à 18:16:57  profilanswer
 

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

mood
Publicité
Posté le 13-09-2008 à 18:16:57  profilanswer
 

n°1786408
Profil sup​primé
Posté le 13-09-2008 à 18:22:51  answer
 

:heink:

n°2191595
maheho
Posté le 24-05-2013 à 08:14:14  profilanswer
 

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
n°2191721
bistouille
Posté le 25-05-2013 à 16:25:24  profilanswer
 

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>
  2. <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
n°2233446
sedwesk
Posté le 16-07-2014 à 12:13:43  profilanswer
 

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++;
}


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  PHP

  [php] Ajouter un champs dans un formulaire

 

Sujets relatifs
fsockopen avec soumission de formulaireInterdire le rechargement (F5) d'une page/formulaire
[Résolu] Style Css Formulaire IE6[PHP] Formulaire ...
[VBA / ACCESS] ajouter à une liste multi-valuéeajouter le menu pause/lecture sur une vidéo
Refresh le graphique d'un sous formulaire Access[Javascrpit] Afficher/Cacher un formulaire
___[ASP] [formulaire] comment ajouter/supprimer des champs
Plus de sujets relatifs à : [php] Ajouter un champs dans un formulaire


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR