Je voudrais créer un formulaire qui change de manière dynamique.
J'ai un formulaire pour créer un projet (avec des champs tels que: PROJECT_NAME, Project_Description ...) et le projet peut avoir n'importe quel montant (plus grand ou égal à 0) des catégories.
Ce que je veux, c'est d'afficher un bouton qui donnerait à l'utilisateur l'option d'ajouter un autre champ de catégorie. De plus, j'aimerais également que l'option des champs de catégorie soit "supprimé" par l'utilisateur (s'il change d'avis ou faisait une erreur). Quelle serait la meilleure façon de le faire. Je voudrais une solution de type Ajax.
Ma solution jusqu'à présent est de laisser une DIV vide sous la dernière catégorie et d'OnCliquez sur le bouton pour charger un autre champ dans cette DIV avec un autre DIV qui sera utilisé pour la prochaine DIV. Pas d'heureux avec cette solution depuis que je dois maintenant compter combien de champs j'ai et donnez à chaque DIV c'est propre ID qui complique encore plus la matière.
Y a-t-il une solution plus simple à cela?
3 Réponses :
J'ai commencé à écrire un générateur de formulaire est basé sur une définition de JSON au moment de votre retour. Cela fonctionne mais pourrait utiliser certaines améliorations. Il est écrit à l'aide de prototypes.js mais ce ne serait pas un effort énorme pour le porter à JQuery.
Vous êtes invité à voler Le code . (juste voir la source)
Le bloc JSON contient la définition du formulaire. Si essentiellement en utilisant JS pour manipuler la définition de la forme, vous contrôlez une ce qui est sous la forme de manière dynamique.
Je sais que c'est un vieux fil, mais je pensais juste que je signale ces pauses si vous enlevez tous les blocs
Si vous essayez d'ajouter des champs de manière dynamique avec un bouton, vous pouvez le faire facilement en faisant quelque chose comme ce qui suit:
HTML: strong> p> $(".add").click(function() {
$("form > p:first-child").clone(true).insertBefore("form > p:last-child");
return false;
});
$(".remove").click(function() {
$(this).parent().remove();
});
Incroyable! si simple ... mais comment allait-je gérer cela si par exemple je voulais envoyer le résultat édité de la manière dont je voudrais numéroter chacun des champs séparés afin qu'il puisse être lu facilement par une fonction extérieure (entrant dans les informations dans une base de données par exemple)
Pas vraiment ce que je voulais depuis pour supprimer une catégorie, toutes les catégories ajoutées après avoir été supprimées.
@nayish, je leur donnerais tous des noms identiques, mais je leur donnerais un nom qui fait référence à un tableau 0 par exemple, au lieu de Catégorie1, catégorie2, etc., je nommerais chaque élément HTML "Catégorie []". (Cela fonctionne dans PHP.) De cette façon, tout est écrit à une matrice et vous pouvez simplement itérair à travers cela. Cela devrait bien fonctionner avec la solution initiale.
C'est une belle solution, mais je reçois un résultat étrange lorsque je le met en œuvre sur mon site. Au lieu d'une balise P supplémentaire (avec les champs), je reçois deux ajoutés à l'époque. Avez-vous une idée de la raison pour laquelle cela se passe?
C'est génial
Cette solution ne fonctionne que si l'utilisateur ne supprime pas tous les éléments, il copie le bouton Ajouter si elles le font.
C'est vraiment cool, mais si je supprime tous les éléments, et essayez de re-ajouter, il suffit de faire dupliquer les champs Ajouter, car rien d'autre n'existe. Peut être un chèque pour si les éléments> 1 dans la partie Supprimer peuvent résoudre ce problème.
J'ai fait quelque chose de similaire. Pour supprimer des champs, je n'ai pas vraiment supprimé les champs. Je viens de les cacher avec un Ils ne sont pas supprimés avant la soumission du formulaire. C'est comme une conception "deux passes". Mais si vous n'avez pas vraiment besoin d'un vrai Ajax, cela fonctionne bien. Sinon, vous avez besoin de votre fonction JS Supprimer pour appeler le serveur et dire de supprimer le champ avec son ID. Un peu plus complexe au code. affichage: Aucune et avait une entrée cachée "Supprimer" que je vous déclenche à true. Ensuite, la page recevant le résultat sait que le champ doit être supprimé dans la base de données.
Cacher des choses avec CSS a de graves conséquences potentielles. Les ajoutant de manière dynamique avec JS est une meilleure façon d'aller.
Un mot: CSRF
@ Therealchx101 Pouvez-vous élaborer? Juste curieux. Vous ne pouvez pas trouver pourquoi ce serait une vulnérabilité de CSRF.