有没有办法用一个按钮和唯一的隐藏值提交多个表单？

Question

Note: I have seen some posts that are quite similar to mine but I don't think those solutions help in my use case. My website (made using Django) has a page for collecting dues payments.

There is one page per family, in which there will be multiple dues to be paid by each member. Currently, I have one submit button to each due as you can see in the code below.

{% for due in dues %}
<tr>
    <td>{{due.0}}</td>
    <td>{{due.1}}</td>
    <td>{{ due.3}}</td>
    <td>{{ due.4 }}</td>
    <td>{{ due.5 }}</td>
    <td><form action="/dues/?family-dues={{ familyprofile }}" method="POST" id= "dues-payment">
        {% csrf_token %}
                    <input type="text" placeholder="Enter Amount" name="amount">
                    <input type="hidden" value="{{due.2}}" name="due-id">
                    <input type="hidden" value="{{due.0}}" name="member-id">
                    <input type="hidden" value="{{duefamily.0}}" name="family-id">
        <button id="submit-payment">Pay</button></form></td>
</tr>
    {% endfor %}

The issue with this is that, only one payment can be done at a time. Is there a way where I can instead submit all the forms in one go. So that the cashier can just enter the appropriate payments in each textbox and when its submitted all the textbox values(paid amount) along with the due id be returned in one go?

Current Scenario

Due ID 1      textbox(Value is 40)       Pay Button
Due ID 2      textbox(Value is 80)       Pay Button
Due ID 3      textbox(Value is 100)      Pay Button

If a person come to pay a total of $220 (as shown above) across three payment due categories, the pay button needs to be pressed thrice. Is there a way the above can be changed to the below scenario.

Desired Scenario

Due ID 1      textbox(Value is 40)
Due ID 2      textbox(Value is 80) 
Due ID 3      textbox(Value is 100)
Pay Button

I am open to all ideas that can help me solve my issue. Thanks in advance:)

Answer 1

The simplest approach would be to make the whole table one form.

<form action="/dues/?family-dues={{ familyprofile }}" method="POST" id= "dues-payment">
    {% csrf_token %}
    <table>
        {% for due in dues %}
          <tr>
            <td>{{ due.0 }}</td>
            <td>{{ due.1 }}</td>
            <td>{{ due.3 }}</td>
            <td>{{ due.4 }}</td>
            <td>{{ due.5 }}</td>
            <td>
              <input type="text" placeholder="Enter Amount" name="due-{{ due.2 }}-amount">
            </td>
          </tr>
        {% endfor %}
    </table>
    <input type="hidden" value="{{ ?? }}" name="member-id">
    <input type="hidden" value="{{ duefamily.0 }}" name="family-id">
    <button id="submit-payment">Pay</button>
</form>

Note that I added the due IDs to the names of the fields that are shown on each line. Now you will have to do a bit of string parsing on the Django side to match these together.

You might also want to look into Django Formsets , which allow you to define the whole form in Python and just call form.as_table() in the template. It also has support for nested forms like this one.

Edit

I think you should also be able to do the amount inputs like this and then get lists in Django, but unfortunately I can't test if it works. You would get one called due-id and one called due-amount , and then rely on the values for each index matching.

        <td>
          <input type="text" placeholder="Enter Amount" name="due-amount[]">
          <input type="hidden" value={{ due.2 }} name="due-id[]">
        </td>