Liste dans formulaire dynamique

**izy-gaylord** · 09/02/2015, 10h15

Bonjour,

Dans un formulaire simple, il y a une section où il faut rajouter toutes les formations disponibles dans l'école. Donc je souhaite procèder comme ceci :
- L'utilisateur rempli les champs : exemple: niveau, filière, etc.. Clique sur ajouter et ça l'ajoute en dessous. Puis il peut en rajouter une autre et ça la rajoute également en dessous et ainsi de suite. Puis lorsqu'il submit le formulaire je puisse tout récupérer.

Donc je pensais récupérer les champs en javascript lorsqu'il clique sur Ajouter mais je ne sais pas créer le reste.

J'ai fait un schéma pour que cela soit plus claire pour vous.

Nom : Capture.PNG
Affichages : 201
Taille : 25,6 Ko

Nom : Capture.PNG
Affichages : 201
Taille : 25,6 Ko

Merci

**arthur57** · 09/02/2015, 10h57

Bonjour,

En effet c'est bien du côté de javascript.
J'ai trouvé ce bout de code qui fonctionne très bien.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
<div id="addInput"></div>
<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;" />

Cordialement.

**Bovino** · 09/02/2015, 11h11

J'ai trouvé ce bout de code qui fonctionne très bien.

Je serais très étonné : l'imbrication des quotes est mauvaise (regarde la coloration syntaxique).

Petit détail : javascript: ne sert strictement à rien dans un attribut attendant déjà du code JavaScript.

**izy-gaylord** · 10/02/2015, 10h10

En effet j'ai tester ton code et il ne fonctionne pas.

Et puis je ne suis pas sur cela convient à mon exemple, là si j'ai bien compris lorsque tu clique sur le bouton, cela rajoute un champ input ?

Si vous nécessitais d'autre informations ou si ce n'est pas clair, je pourrais réexpliquer sans soucis.

**hpl76** · 10/02/2015, 10h38

Bonjour,

On peut voir la chose de plusieurs façons :

1 - s'il y a une limite raisonnable, prévoir les n champs nécessaires et par le truchement des display afficher tel ou tel élément en fonction du bouton actionner.
On peut envisager qu'un seul champ en base pour réceptionner les infos avec un élément de séparation pertinent.

2 - créer une entrée en base à chaque ajout et n'afficher le bouton suivant qu'à chaque validation. On teste ainsi si l'id existe déjà et si une valeur a été saisie.

3 - permettre l'ajout au coup par coup et on voit la liste s'incrémenter avec la possibilité pour chaque élément de cette liste d'être supprimé.

hpl76.

**arthur57** · 10/02/2015, 12h32

En effet il y avais des problèmes de quotes, mais le principe était bien la..

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<html>
<head>
 
<script language='javascript'>
     function maFonction()
     {
          existant = document.getElementById("addInput").innerHTML;
          document.getElementById("addInput").innerHTML= existant + '<p><input type="text" name="var[]" value="" /></p>';
          return false;
     }
</script>
 
</head>
 
<body>
 
     <div id="addInput"></div>
     <input type="button" value="Ajouter un champ" onclick='maFonction();'>
 
 
</body>
</html>

Cordialement.

Liste dans formulaire dynamique

JavaScript

Vue hybride

Discussions similaires

Partager

Partager