Liste dans formulaire dynamique

Version imprimable

09/02/2015, 10h15
izy-gaylord

1 pièce(s) jointe(s)

Liste dans formulaire dynamique

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.

Pièce jointe 168477

Merci :)

Bonjour,

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

1 2 3 <div id="addInput"></div> <input type="button" value="Ajouter un champ" onclick="javascript:document.getElementById('addInput').innerHTML='<input type="text" name="var[]" value="" />'; return false;" />
Cordialement.

09/02/2015, 11h11
Bovino

Citation:

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.
10/02/2015, 10h10
izy-gaylord

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.
10/02/2015, 10h38
hpl76

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.

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

Code:

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.

10/02/2015, 13h22
SpaceFrog

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

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:

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 ?