Quelles bonnes pratiques pour un formulaire dynamique ?

**Nothus** · 13/07/2015, 13h42

Bonjour,

Ma question est plus innocente qu'elle n'en a l'air... Si la question du dynamisme par JS ne me pose pas de problème, je m'interroge sur la meilleure façon de procéder.

Contexte : un formulaire qui envoie à un script PHP (API maison) différentes valeurs, qui sont analysées pour produire une requête spécifique sur la BDD (c'est-à-dire comment est construit la clause WHERE...).

J'ai donc besoin d'un formulaire qui m'affiche des conditions telles qu'elles pourraient se présenter pour la BDD :
- quelle colonne est visée (liste déroulante des possibles)
- quelle valeur est cherchée (champ texte)
- la valeur ET ou OU vis-à-vis de la condition antérieure (liste déroulante)
- les boutons d'ajout ou de modification ou de suppression d'une "ligne" (donc d'une condition).

Là où ça se corse, c'est qu'un formulaire est adapté à un contexte "linéaire" : il n'existe pas de moyen de regrouper vraiment efficacement plusieurs "input" dans un même contexte "local" (exemple : un schéma global, qui se duplique).

J'ai vu çà et là des tableaux JS que l'on déplie pour générer le formulaire (une ligne du tableau = 1 condition). Problème : c'est assez moche côté code. Trop pour mes yeux, qui pleurent déjà du sang fréquemment avec JS...

Quelle méthode utilisez-vous de votre côté, notamment pour "regrouper" des champs entre eux dans ce type de situation?

Côté génération des champs, préférez-vous passer par innerHTML ou par appendChild ? (perso, je pense appendChild plus efficace, car il retourne une position dans le DOM...).

Merci et bon après-midi !

**NoSmoking** · 13/07/2015, 17h01

Bonjour,
pas sûr d'avoir compris la finalité de tes interrogations, quoiqu'il en soit

Quelle méthode utilisez-vous de votre côté, notamment pour "regrouper" des champs entre eux dans ce type de situation?

Il me semble qu'il existe un élément pour cela The fieldset element

sinon d'une manière plus générale Les formulaires et PHP5

**Nothus** · 13/07/2015, 19h36

Bonjour,

Merci de ta réponse. Je ne pensais pas en terme visuel - effectivement, les éléments ne manquent pas - mais dans la génération même du formulaire.

En somme :

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
<formulaire_global> 
 
<regroupement A> 
<input 1 />
<input 2 />
<input 3 />
</regroupement> 
 
<regroupement B> 
<input 1 />
<input 2 />
<input 3 />
</regroupement> 
 
</formulaire_global>

... afin que l'ensemble soit cohérent au niveau Javascript (récupération des données bloc par bloc, et ajout ou suppression simple : pas en testant input par input pour savoir à quelle regroupement / condition il appartient).

Cela dit pourquoi pas un fieldset finalement...

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
<form> 
 
<fieldset condition="1"> 
<input type="" /> 
<input type="" /> 
<input type="" /> 
</fieldset> 
 
<fieldset condition="2"> 
<input type="" /> 
<input type="" /> 
<input type="" /> 
</fieldset> 
 
</form>

... et récupérer bloc de condition par bloc de condition avec un document.getElementsByTagName("form")[0].getElementsByTagName("fieldset").

Si tu vois mieux mon problème et que tu as une meilleure solution, n'hésites pas. Sinon, merci

**Nothus** · 15/07/2015, 13h02

Voici la portion de code que j'ai développé, mais ça me semble tout de même assez moche...

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
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html> 
<html lang="fr"> 
<head> 
	<meta charset="utf-8"> 
	<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>Gestionnaire de la base de connaissances - Outil de recherches</title> 
	<script type="text/javascript"> 
		Condition_ajouter = function() { 
			var groupe = document.createElement("fieldset"); 
			groupe.setAttribute("condition",Conditions.length); 
			var champ = document.createElement("input"); 
			champ.setAttribute("type","button"); 
			champ.setAttribute("value","supprimer cette condition"); 
			champ.setAttribute("onClick","Condition_supprimer(this);"); 
			groupe.appendChild(champ); 
			for(var c in Condition_type) { 
				switch(typeof Condition_type[c]) { 
					case 'object': 
						var champ = document.createElement("select"); 
						champ.setAttribute("name",c); 
						for(var cc in Condition_type[c]) { 
							var champ_enfant = document.createElement("option"); 
							champ_enfant.innerHTML = Condition_type[c][cc]; 
							champ_enfant.setAttribute("value",cc); 
							champ.appendChild(champ_enfant); 
						} 
						groupe.appendChild(champ); 
						break; 
					case 'string': 
						var champ = document.createElement("input"); 
						champ.setAttribute("type","text"); 
						champ.setAttribute("name",c); 
						groupe.appendChild(champ); 
						break; 
				} 
			} 
			Conditions.push(Formulaire.appendChild(groupe)); 
		}; 
		Condition_supprimer = function(element) { 
			var fieldset = element.parentElement; 
			fieldset.parentElement.removeChild(fieldset); 
		}; 
		var Condition_type = { 
			"operateur": {"ET":"&-et","OU":"|-ou"}, 
			"colonnes": {"id":"identifiant","idext":"identifiant extérieur"}, 
			"valeur": "", 
		} 
		var Formulaire = null; 
		var Conditions = []; 
		window.addEventListener("load",function() { 
			Formulaire = document.getElementsByTagName("form")[0]; 
			Condition_ajouter() 
		}); 
	</script> 
</head>
<body> 
 
<div id="page"> 
	<input type="button" onClick="Condition_ajouter();" value="ajouter une condition" /> 
	<form> 
	</form> 
</div> 
 
</body>
</html>

Quelles bonnes pratiques pour un formulaire dynamique ?

JavaScript

Vue hybride

Discussions similaires

Partager

Partager