How to have multiple of the same form on the same page in django

Question

I am using the same form multiple times on my webpage.

This is my views.py

if request.method == "POST":
    form1 = TheForm(request.POST)
    form2 = TheForm(request.POST)
    form3 = TheForm(request.POST)

        if form1.is_valid() and form2.is_valid() and form3.is_valid():

This is my template page:

<form method="POST">
{% csrf_token %}
{{form1.as_p}}
{{form2.as_p}}
{{form3.as_p}}
<button class="waves-effect waves-light btn"> Button </button> </form>

When I try this however it only saves values from form3 not the others.

Thanks

I just collect the data using cleaned_data and then input that information into my models. — user8802333, Jan 03 '20 at 20:05
The data is request.POST how will the form know? You can give different prefix for different form and then go from there but formset is the use case here. Use formset. — Kapil Lamichhane, Jan 03 '20 at 20:57

score 4 · Answer 1 · answered Jan 03 '20 at 21:27

The problem is caused by those 3 forms being absolutely identical, especially they have the same field names inside rendered HTML code. Let me show it by example.

Imagine your form being:

class TheForm(forms.Form):
    the_field = forms.CharField(label="Field")

After rendering your template, you will end up with pretty much this code:

<form method="POST">
    <input type="hidden" name="csrftoken" value="some-token">
    <p>
        <label for="id_the_field">Field</label>
        <input type="text" name="the_field" id="id_the_field">
    </p>
    <p>
        <label for="id_the_field">Field</label>
        <input type="text" name="the_field" id="id_the_field">
    </p>
    <p>
        <label for="id_the_field">Field</label>
        <input type="text" name="the_field" id="id_the_field">
    </p>
    <button class="waves-effect waves-light btn"> Button </button>
</form>

As you can see, all 3 forms have identical fields, including names of your input field. If this form will be submitted, there is no distinction between those fields, so all 3 forms on Django side will receive the same value (in your case it is from 3rd form, but that may vary on some circumstances).

To fix that, you can initialize each form with distinct prefix, as follows:

if request.method == "POST":
    form1 = TheForm(request.POST, prefix="form1")
    form2 = TheForm(request.POST, prefix="form2")
    form3 = TheForm(request.POST, prefix="form3")

    if form1.is_valid() and form2.is_valid() and form3.is_valid():
        form1.save()
        form2.save()
        form3.save()
        return HttpResponseRedirect(...)
    else:
        return render(....)
else:
    form1 = TheForm(prefix="form1")
    form2 = TheForm(prefix="form2")
    form3 = TheForm(prefix="form3")

Now, rendered HTML will look like:

<form method="POST">
    <input type="hidden" name="csrftoken" value="some-token">
    <p>
        <label for="id_form1_the_field">Field</label>
        <input type="text" name="form1_the_field" id="id_form1_the_field">
    </p>
    <p>
        <label for="id_form2_the_field">Field</label>
        <input type="text" name="form2_the_field" id="id_form2_the_field">
    </p>
    <p>
        <label for="id_form2_the_field">Field</label>
        <input type="text" name="form3_the_field" id="id_form3_the_field">
    </p>
    <button class="waves-effect waves-light btn"> Button </button>
</form>

As you can see, now fields have different, distinct names, so they will be sent separately by the browser back to your Django backend when user submits.

You can find out more on form prefixes in Django docs

score 1 · Accepted Answer · answered Jan 03 '20 at 21:29

1

having multiple times the same things in a <form> should work as described here.

For Django you need to use formsets, looks like what you want to achieve

answered Jan 03 '20 at 21:29

JeanRibes

131
1
3

score 0 · Answer 3 · answered Jan 05 '20 at 08:59

0

I found a solution, not sure if it's the most efficient one.

I just kept everything except now I shuffle the queryset in the template itself.

I used this link here in order to perform the shuffle, and I used this link troubleshoot the templatetags.

answered Jan 05 '20 at 08:59

user8802333

469
1
8
18

How to have multiple of the same form on the same page in django

3 Answers3