How Can I Save Django Dynamic Formset Data Using Forms And Views

July 31, 2024 Post a Comment

I am trying to save formset extra fields data using forms and views. Eg:-Team has no.of players. so i want to add new player by click on add more button.The code i tried below. the

Solution 1:

The reason why you only can save first one of items is your added line id and name still is id_form-0-pname not change to id_form-1-pname(pattern is id_form-i-pname).

Another way to achieve this,use lib django-dynamic-formset,code is here:

news.html

<html><head><title>gffdfdf</title><metaname="viewport"content="width=device-width, initial-scale=1"><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><scriptsrc="/static/jquery.formset.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></head><body><divclass="container"><formid="myForm"action=""method="post"class="">
        {% csrf_token %}
        <h2> Team</h2>
        {% for field in form %}
            {{ field.errors }}
            {{ field.label_tag }} : {{ field }}
        {% endfor %}
        {{ form.player.management_form }}

        <h3> Product Instance(s)</h3><tableid="table-product"class="table"><thead><tr><th>player name</th><th>highest score</th><th>age</th></tr></thead>
            {% for player in form.player %}
                <tbodyclass="player-instances"><tr><td>{{ player.pname }}</td><td>{{ player.hscore }}</td><td>{{ player.age }}</td></tr></tbody>
            {% endfor %}
        </table><buttontype="submit"class="btn btn-primary">save</button></form></div><script>
    $(function () {
        $('#myForm tbody tr').formset();
    })
</script></body></html>

It's look like it's simple and work. jquery.formset.js can be downloaded from github in here.Doc is here. You can change the text and css of add\remove link with conf jquery.formset.js like:

/* Setup plugin defaults */
$.fn.formset.defaults = {
    prefix: 'form',                  // The form prefix for your django formset
    formTemplate: null,              // The jQuery selection cloned to generate new form instances
    addText: 'add another',          // Text for the add link
    deleteText: 'remove',            // Text for the delete link
    addCssClass: 'add-row',          // CSS class applied to the add link
    deleteCssClass: 'delete-row',    // CSS class applied to the delete link
    formCssClass: 'dynamic-form',    // CSS class applied to each form in a formset
    extraClasses: [],                // Additional CSS classes, which will be applied to each form in turn
    keepFieldValues: '',             // jQuery selector for fields whose values should be kept when the form is cloned
    added: null,                     // Function called each time a new form is added
    removed: null// Function called each time a form is deleted
};

Solution 2:

You need to loop over form.player_instances.

if request.POST:
    form = TeamForm(request.POST)
    form.player_instances = PlayerFormset(request.POST)
    if form.is_valid():
    team= Team()
    team.tname= form.cleaned_data['tname']
    team.save()

    if form.player_instances.is_valid():

        for item in form.player_instances:
            player = Player()
            player.pname= item.cleaned_data['pname']
            player.hscore= item.cleaned_data['hscore']
            player.age= item.cleaned_data['age']
            player.save()
            team.player.add(player)
            team.save()

Solution 3:

**Use this following for your new.html file and keep your other files unchanged like forms and models **

<html><head><title>gffdfdf</title><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery.formset/1.2.2/jquery.formset.js"></script></head><body><divclass="container"><formmethod="post"class="">
        {% csrf_token %}
        <h2> Team</h2>
        {% for field in form %}
            {{ field.errors }}
            {{ field.label_tag }} : {{ field }}
        {% endfor %}
        {{ form.players.management_form }}
       <divstyle="display: none" > {{ form.players.empty_form }}</div><h3> Product Instance(s)</h3><tableid="table-product"class="table"><thead><tr><th>player name</th><th>highest score</th><th>age</th></tr></thead>
            {% for player in form.players %}
                <tbodyclass="player-instances"id="playerFrmTableId"><tr><td>{{ player.pname  }}</td><td>{{ player.hscore }}</td><td>{{ player.age }}</td><td><inputid="input_add"type="button"name="add"value=" Add More "class="tr_clone_add btn data_input"></td></tr></tbody>
            {% endfor %}
        </table><buttontype="submit"class="btn btn-primary">save</button></form></div><script>

    $("#input_add").click(function() {
        let formCount = parseInt($('#id_form-TOTAL_FORMS').val());
        var html = `<tr>
                        <td>{{ form.players.empty_form.pname }}</td>
                        <td>{{ form.players.empty_form.hscore }}</td>
                        <td>{{ form.players.empty_form.age }}</td>
                        <td> <input id="input_add" type="button" name="add" value=" Add More " class="tr_clone_add btn data_input"> </td>
                     </tr>`;
       html =  html.replace(/__prefix__/g, formCount);
        $('#id_form-TOTAL_FORMS').val(formCount + 1);
        $('#playerFrmTableId').append(html);
    });
</script></body></html>

JavaScript Frameworks

How Can I Save Django Dynamic Formset Data Using Forms And Views

Solution 1:

Solution 2:

Solution 3:

Post a Comment for "How Can I Save Django Dynamic Formset Data Using Forms And Views"