[JAVA] Ajouter dynamiquement des champs de formulaire dans Django

introduction

Je suis un étudiant de troisième année à l'université, étudiant seul la programmation.

Auparavant, lorsque je créais une application Web en PHP, j'utilisais [ajouter dynamiquement des champs de saisie de formulaire] Qiita. Je suis en train de migrer mon application Web vers Django, mais je n'ai pas résolu le problème du titre, je vais donc le laisser ici.

Seulement cela a été écrit dans la documentation ...

empty_form BaseFormSet provides an additional attribute empty_form which returns a form instance with a prefix of prefix for easier use in dynamic forms with JavaScript.

J'essaie de garder le code aussi concis que possible afin que même les débutants puissent le comprendre facilement.

Article précédent

Si vous ne comprenez pas cet article seul, vous trouverez peut-être utile de lire l'article précédent.

code

Si vous souhaitez que Django gère les formulaires de manière dynamique, utilisez Formsets '** empty_form **.

Un identifiant tel que ʻid_form- {No.} - Place_name est automatiquement inséré dans ʻinput d'un formulaire général généré par Django. Cependant, si ** empty_form ** est utilisé, l'id de tous les ʻinput sera ʻid_form -__ plefix __- place_name, il est donc nécessaire de remplacer la partie __plefix__ par un nombre.

template.html


<form method="POST" id="form">
    {% csrf_token %}
    {{ form.management_form }}
    <div class="text">
        {{ form.empty_form.as_p }}
    </div>
    <button type="button" id="btn-clone">clone</button>
    <button type="submit">submit</button>
</form>

En réalité, ça ressemble à ça.

template.html


<form method="POST" id="form">
    <!-- ...... -->
    <input type="hidden" name="form-TOTAL_FORMS" value="2" id="id_form-TOTAL_FORMS">
    <!-- ...... -->
    <div class="text">
        <p>
            <label for="id_form-__prefix__-place_name">Input:</label>
            <input type="text" name="form-__prefix__-place_name" id="id_form-__prefix__-place_name">
            <input type="hidden" name="form-__prefix__-id" id="id_form-__prefix__-id">
        </p>
    </div>
    <button type="button" id="btn-clone">clone</button>
    <button type="submit">submit</button>
</form>

Réécrivez «prefix». Spécifiez également le nombre de ʻinputavec la valeur de ʻinput [id = "id_form-TOTAL_FORMS"].

script.js


$(function() {


    // clone
    $('#btn-clone').click(function() {
        var text = $('.text').last();  //Entrée à la fin
        clone = text.clone().insertAfter(text);  //Ajouter une entrée à la fin
        clone.find("input[type='text']").val('');  //la valeur est également clonée, supprimez-la
    });


    //Faites fonctionner id etc. pour Django à partir d'ici
    $('#form').submit(function() {  //Juste avant de soumettre le formulaire

        //Spécifiez le nombre de champs de saisie sur le formulaire
        const text = $('.text');
        $('[name=form-TOTAL_FORMS]').val(text.length);

        //Dans chaque champ de saisie__prefix__Avec index
        text.each(function(index, element){
            html = $(element).html().replace(/__prefix__/g, index);
            value = $(element).find("input[type='text']").val();  //Enregistrez la valeur lorsqu'elle disparaît
            $(element).html(html);
            $(element).find("input[type='text']").val(value);
        });

    });
});

Si vous souhaitez implémenter la fonction de suppression de formulaire, consultez [Article précédent] Qiita. Nous n'avons implémenté que l'ajout de formulaires ici pour plus de clarté. Le code est redondant car il est censé implémenter finalement la fonction de suppression de formulaire. Si vous n'avez pas besoin de la fonction de suppression de formulaire, veuillez la corriger.

référence

Recommended Posts

Ajouter dynamiquement des champs de formulaire dans Django
Implémentation de boutons d'ajout de formulaire dans Django Inline Form Set Part2
Implémenter un bouton d'ajout de formulaire dans l'ensemble de formulaires en ligne Django
Spécifiez dynamiquement le jeu de requêtes ModelChoiceField dans Django
Formulaire de demande Django 2
Modèle dans Django
Formulaire suggéré par Django
Ramasser les oreilles tombées de Django Form
Formulaire à Django
Formulaire de contact Django
Enregistrez plusieurs modèles sous un seul formulaire avec Django
Définissez DateField du formulaire sur type = date dans Django
Soumettre sous forme [Python]
Modifications du modèle dans Django
Créez dynamiquement des tables dans un schéma avec Django, générez dynamiquement des modèles
Meilleures pratiques pour la gestion dynamique des messages LINE Flex dans Django
Optimisation des performances dans Django 3.xx
Définir dynamiquement des hôtes d'environnement avec Fabric
PHP comme var_dump dans le template Django
Gérer les constantes dans les modèles Django
Renommer les colonnes de table dans Django3
Sortie de la structure de table dans Django
(Note) Django dans l'environnement Vagrant
Appeler dynamiquement des méthodes en Python
Afficher Django ManyToManyField dans un modèle
django-rest-framework Changer dynamiquement les champs du sérialiseur