Création d'un formulaire html dynamique

Je voudrais créer un formulaire qui change de façon dynamique.

J'ai un formulaire pour la création d'un projet (avec des domaines tels que: project_name, project_description...) et le projet peut avoir n'importe quelle quantité (plus grand ou égal à 0) de catégories.

Ce que je veux c'est afficher un bouton qui permettrait de donner à l'utilisateur la possibilité d'ajouter une autre catégorie de champ. En outre, je tiens également l'option pour la catégorie champs "deleteable" par l'utilisateur (si il change d'avis ou fait une erreur). Quelle serait la meilleure façon de le faire. Je voudrais une requête Ajax de type de solution.

Ma solution pour l'instant est à laisser un div vide en dessous de la dernière catégorie et onclick du bouton pour charger un autre champ dans la div avec encore un autre div qui sera utilisé pour la prochaine div. Ne pas heureux avec cette solution, puisque j'ai maintenant de compter le nombre de champs que j'ai et de donner à chaque div sa propre id, ce qui complique l'affaire, même plus.

Est-il une solution plus simple?

OriginalL'auteur Nayish | 2011-03-01

  1. 12

    Si vous essayez d'ajouter des champs dynamiquement avec un bouton, vous pouvez facilement le faire en faisant quelque chose comme ce qui suit:

    HTML:

    <form>
    <p>
        <label>Name:</label> <input type="text">
        <label>Age:</label> <input type="text">
        <span class="remove">Remove</span>
    </p>
    <p>
        <span class="add">Add fields</span>
    </p>
</form>

    JS:

    $(".add").click(function() {
    $("form > p:first-child").clone(true).insertBefore("form > p:last-child");
    return false;
});

$(".remove").click(function() {
    $(this).parent().remove();
});

    Démo: http://jsfiddle.net/UeSsu/1/

    Incroyable! si simple... mais comment pourrais-je gérer cela si par exemple j'ai voulu envoyer le fichier résultat comment aurais-je le numéro de chacun des champs distincts, de sorte qu'il peut être lu facilement par un à l'extérieur de la fonction (saisie de l'information dans une base de données par exemple)
    Essayez quelque chose comme ceci: jsfiddle.net/UeSsu/2
    Pas vraiment ce que je voulais depuis pour supprimer une catégorie toutes les catégories ajouté, après il doit être supprimé.
    Je voudrais leur donner tous les noms sont identiques, mais je voudrais leur donner un nom qui fait référence à un tableau de 0 par exemple, au lieu de category1, catégorie2, etc, j'avais un nom à chaque élément HTML de la catégorie" []". (Cela fonctionne en PHP.) De cette façon, tout ce qui est écrit sur un tableau, et vous pouvez simplement parcourir. Cela devrait bien fonctionner avec la solution initiale.
    C'est une belle solution, mais j'ai un résultat étrange quand je l'appliquer sur mon site. À la place d'une autre balise p (avec les champs), j'ai ajouté deux à la fois. Une idée de pourquoi ce qui se passe?

    OriginalL'auteur dmackerman

  2. 0

    J'ai commencé à écrire un générateur de formulaire est basé sur une définition en JSON d'un moment de retour. Il fonctionne, mais pourrait utiliser quelques améliorations. Elle est écrite en utilisant Prototype.js mais il ne serait pas un énorme effort pour le porter à jQuery.

    Vous êtes les bienvenus pour voler le code. (suffit de voir la source)

    Comment puis-je l'utiliser?
    Le JSON bloc peut contenir la définition de la forme. Donc, essentiellement, par l'utilisation de JS pour manipuler le formulaire de définition vous permet de contrôler un ce qui est dans la forme de façon dynamique.
    Pas ce que je suis à la recherche d'
    le lien est cassé.
    Je sais que c'est un vieux thread, mais j'avais juste pensé que je ferais remarquer ce des pauses si vous supprimez tous les blocs

    OriginalL'auteur Diodeus - James MacFarlane

  3. 0

    J'ai fait quelque chose de similaire. Pour supprimer des champs, je n'ai pas vraiment supprimé les champs. J'ai juste caché avec un display:none et avait caché input "supprimer" que je déclencheur pour vrai. Ensuite, la page de recevoir le résultat sait quel champ est à supprimer dans la base de données.

    Ils ne sont pas supprimés avant que le formulaire est soumis. C'est comme deux "pass" de la conception. Mais si vous n'avez pas vraiment besoin d'un vrai ajax, il fonctionne très bien. Sinon, vous avez besoin de votre JS supprimer la fonction à appeler le serveur et dire pour supprimer le champ avec son id. Un peu plus complexe à coder.

    Cacher des choses avec CSS a de graves conséquences potentielles. Ajouter dynamiquement avec le js est une meilleure façon d'aller.
    Un seul mot: CSRF

    OriginalL'auteur Vitorio