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

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>