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 : 199
Taille : 25,6 Ko

Nom : Capture.PNG
Affichages : 199
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.

**SpaceFrog** · 10/02/2015, 13h22

ajouter des éléments dynamiquement avec innerHTML ...

**izy-gaylord** · 10/02/2015, 14h35

En utilisant un peu de vos réponse à tous, j'ai réussi à faire ce que je souhaité.

Je crée donc une div avec le contenu de mes champs à chaque fois qu'il ajoute une formation. À présent il faut que je puisse passer ses paramètre en post pour pouvoir les traiter et les insérer en base de données lorsqu'il submit le formulaire. Faut-il que je crée mon tableau php dans ma fonction javascript?

Voici ma fonction :

Code :

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
function AjoutFormation(){
	getNiveau = document.getElementById('form_niveau');
	getCateg = document.getElementById('form_categ_formation');
	getFiliere = document.getElementById('form_filiere');
	getIntitule = document.getElementById('formation_intitule');
	getDesc = document.getElementById('formation_description');
	getDuree = document.getElementById('formation_duree');
	getfrais = document.getElementById('formation_frais');
	getAdmission = document.getElementById('formation_admission');
	getInitial = document.getElementById('parcours_1');
	getAltern = document.getElementById('parcours_2');
	getDist = document.getElementById('parcours_3');
 
	niveau = ''; if(getNiveau.value != 0) niveau = getNiveau.options[getNiveau.selectedIndex].text; 
	formation = ''; if(getCateg.value != 0) formation =getCateg.options[getCateg.selectedIndex].text;
 
	filiere = ''; if( getFiliere != null && getFiliere.value != 0){
		filiere = getFiliere.options[getFiliere.selectedIndex].text; 
	}
 
	initial = getInitial.checked; if(initial == false){initial = '';}else{initial = ' - Initial'; }
	alternance = getAltern.checked; if(alternance == false){alternance = '';}else{alternance = ' - Alternance'; }
	distance = getDist.checked; if(distance == false){distance = '';}else{distance = ' - Distance'; }
 
	intitule = getIntitule.value; ;
	description = getDesc.value;;
	duree = getDuree.value; ;
	frais = getfrais.value; ;
	admission = getAdmission.value; ;
 
	if(niveau != '' && filiere != '' && formation != '' && (initial != false || alternance != false || distance != false) && intitule != '' && description != ''){
		var innerDiv = document.createElement('div');
		innerDiv.className = 'formation-block';
		innerDiv.id = Math.floor(Math.random() * (999 - 1 + 1)) + 1;
		innerDiv.innerHTML = '<p class="title-formation" value="">■ '+niveau+'</p><p class="filiere">→ '+formation+' - '+filiere+initial+alternance+distance+'</p><p id="'+innerDiv.id+'-7" class="intitule-formation">'+intitule+'</p><p id="'+innerDiv.id+'-8" class="description-formation">'+description+'<p><ul><li><strong>Durée</strong>: <span id="'+innerDiv.id+'-9">'+duree+'</span></li><li><strong>Frais</strong>: <span id="'+innerDiv.id+'-10">'+frais+'</span></li><li><strong>Admission</strong>: <span id="'+innerDiv.id+'-11">'+admission+'</span></li></ul><a id="delet-formation" class="button" onclick="document.getElementById('+innerDiv.id+').remove()">Supprimer</a> <a id="modif-formation" class="button" onclick="ModifFormation('+innerDiv.id+')">Modifier</a><div class="displaynone"><input id="'+innerDiv.id+'-1" type="hidden" value="'+getNiveau.selectedIndex+'"/><input id="'+innerDiv.id+'-2" type="hidden" value="'+getCateg.selectedIndex+'"/><input id="'+innerDiv.id+'-3" type="hidden" value="'+getFiliere.selectedIndex+'"/><input id="'+innerDiv.id+'-4" type="hidden" value="'+getInitial.checked+'"/><input id="'+innerDiv.id+'-5" type="hidden" value="'+getAltern.checked+'"/><input id="'+innerDiv.id+'-6" type="hidden" value="'+getDist.checked+'"/></div>';
 
		document.getElementById('ajout-formation').appendChild(innerDiv);
 
		getNiveau.selectedIndex = 0;
		getCateg.selectedIndex = 0;
		getFiliere.selectedIndex = 0;
		getInitial.checked= false;
		getAltern.checked= false;
		getDist.checked= false;
		getIntitule.value = ''
		getDesc.value = ''
		getDuree.value = ''
		getfrais.value = ''
		getAdmission.value = ''
	}
	else{
		alert('Veuillez remplir tout les champs obligatoires.');
	}
}

EDIT: Mon soucis c'est la gestion PHP je ne sais pas comment récupérer mes infos html.

EDIT 2: Dois-je crée des input hidden pour chaque données que je souhaite récupérer ?

Liste dans formulaire dynamique

JavaScript

Discussions similaires

Partager

Partager