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

Question

注意：我看过一些与我的非常相似的帖子，但我认为这些解决方案对我的用例没有帮助。 我的网站（使用 Django 制作）有一个收取会费的页面。

每个家庭有一个页面，其中每个成员将支付多个会费。目前，我有一个提交按钮，您可以在下面的代码中看到。

{% 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 %}

这样做的问题是，一次只能完成一笔付款。有没有一种方法可以让我一次性提交所有表格。这样收银员可以在每个文本框中输入适当的付款，并在提交时一次性返回所有文本框值（支付金额）以及到期ID？

当前情景

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

如果一个人在三个到期付款类别中总共支付 220 美元（如上所示），则需要按三次付款按钮。有没有办法可以将上述情况更改为以下情况。

所需场景

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

我愿意接受所有可以帮助我解决问题的想法。在此先感谢:)

Answer 1

最简单的方法是将整个表格变成一个表格。

<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>

请注意，我在每行显示的字段名称中添加了到期 ID。现在你必须在 Django 端做一些字符串解析来匹配它们。

您可能还想查看Django Formsets，它允许您在 Python 中定义整个表单并在模板中调用 form.as_table()。它还支持像这样的嵌套表单。

编辑

我认为您也应该能够像这样输入数量，然后在 Django 中获取列表，但不幸的是我无法测试它是否有效。你会得到一个名为due-id 和一个名为due-amount，然后依赖于每个索引匹配的值。

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