Modifier le contenu d'une page en fonction d'un élément "select"

Question

J'ai actuellement une page qui permet à un utilisateur de saisir différents types d'entrées de base de données via un select ("questions" pour un sondage), ie Multiple Choice, Text, La liste déroulante, etc. Chaque atleast contient textarea et 2 input type="text" s. À l'heure actuelle, cela se fait en ayant 4 divs dans le HTML, dont 3 sont cachés via CSS ("display: none"). Ensuite, une action JS est atteinte sur la modification select, qui utilise une instruction switch pour masquer et afficher correctement toutes les divs. Form.onsubmit supprime tous les divs sauf celui actuellement sélectionné, car ils utilisent tous les mêmes name s pour leurs input s.
Évidemment, c'est incroyablement inefficace et moche. Je pense que la façon correcte serait de créer les éléments en utilisant JS, quelque chose que je crains, et quand l'utilisateur change le select, supprime le div enfant du formulaire et ajoute le div désiré. Cependant, je ne sais pas comment faire cela.
Je serais très reconnaissant si quelqu'un pouvait me montrer comment aller sur ma suggestion, ou montrer comment faire mieux.

Merci.

Answer 1

En fait, votre méthode ne sonne pas trop mal du tout. Une des deux choses que je remettrais en question serait le raisonnement de les nommer tous de la même façon - s'ils représentent vraiment les mêmes données, pourquoi ne pas utiliser les mêmes éléments de formulaire pour les quatre sections?

L'autre chose que je voudrais améliorer est la nécessité de supprimer quelque chose du DOM lorsque le formulaire soumet. Cela ajoute non seulement de la complexité à votre processus de soumission, mais cela évite également des problèmes si l'utilisateur appuie sur le bouton de retour pour réessayer. Je ne voudrais pas créer/détruire des éléments chaque fois que la valeur est changée - non seulement cela est un peu plus inefficace, c'est difficile à maintenir, plus sensible aux bugs, et va balayer toutes les informations que l'utilisateur a saisies.

Je pense qu'il ya deux principales options qui pourraient améliorer pour vous:

1) Gardez les mêmes champs

Si les 4 types n'ont vraiment 3 champs communs chacun, pourquoi ne pas vous avez ceux dans une section qui ne devient jamais cachée, et avez seulement l'information unique à chaque type dans une section spéciale qui peut être montrée ou cachée quand la valeur de l'élément SELECT est changée.

2) Désactiver les champs qui sont cachés

Les champs qui sont désactivés sont tout simplement pas envoyé au serveur. Par conséquent, vous pouvez conserver les mêmes noms sur plusieurs éléments, sans avoir à les supprimer avant la soumission, tant que vous vous assurez qu'un seul n'est pas désactivé. J'utilise une méthode toggleDisabled qui va prendre un élément et parcourir tous les enfants et tous les descendants de manière récursive et désactiver ou activer les éléments input/select/textarea. Ensuite, je peux simplement passer dans un seul élément et activer/désactiver tous les éléments de formulaire. Cela fonctionnerait parfaitement pour ce que vous essayez de faire - vous cacheriez votre DIV, alors vous le désactiveriez. Vous pourrez ensuite montrer et activer le sélectionné.