如何使用 Django 和 JavaScript 提交多个表单？答案

【问题标题】：How can I submit multiple forms using Django and JavaScript?如何使用 Django 和 JavaScript 提交多个表单？
【发布时间】：2021-10-10 18:59:07
【问题描述】：

我正在开发一个在索引页面上显示表单的应用程序，您可以在其中输入信息以最终计算总金额并根据表单输入输出其他详细信息。

我的表单继承自 form.Forms。
“添加行”按钮可根据需要创建此行的多个副本。

每个表单都包含一个 ID 为“calc-form”的表单。我的问题是 POST 方法中只包含一个表单。我想一键处理所有表单。

当我点击“计算”时，如何在 POST 方法中包含所有其他表单？

index.html

{% extends 'base.html' %}
{% load crispy_forms_tags %}
{% block content %}
{% load static %}

<script type="text/javascript" src="{% static 'app.js' %}"></script>

<table id="table-id">
  <tr id='table-row'>
    <form id="calc-form" action="{% url 'result' %}" method="post">
      {% csrf_token %}
      {% for field in form %}
      <td>{{ field|as_crispy_field }}</td>
      {% endfor %}
    </form>
  </tr>
</table>
<br>

<input type="submit" value="Calculate" form="calc-form">
<button type="button" id="add-row-btn" onclick="addRow()">Add row</button>
<button type="button" id="delete-row-btn" onclick="deleteRow()">Delete last row</button>

{% endblock content %}

views.py

from django.shortcuts import render
from .forms import TariffCalcForm


def index(request):

    form = TariffCalcForm
    context = {'form': form}
    return render(request, 'clickapp/index.html', context)


def result(request):

    context = {}

    if request.method == 'POST':
        for r in request:
            form = TariffCalcForm(request.POST)
            if form.is_valid():
                context['form'] = form
        return render(request, 'result.html', context)
    else:
        return render(request, 'index.html', context)

app.js

function addRow() {

  const formTable = document.getElementById('table-id');
  const formRow = document.getElementById('table-row');
  const formRowCopy = formRow.cloneNode(true);
  formTable.appendChild(formRowCopy);

}

【问题讨论】：

看看formsets。
@dgw 谢谢你的建议。 Formsets 需要我创建一个模型，将输入保存到数据库，不是吗？我想处理数据而不必存储它（如果可能的话）。编辑：我不确定 Formsets 是否也允许动态表单。

标签： javascript html python-3.x django django-rest-framework

【解决方案1】：

form wizard 可能是合适的。它允许您处理一系列表单，将提交每个表单的结果存储在客户端会话中。这当然是在数据库中，但它可以是暂时的，并且可以是匿名会话。最终提交可以处理所有表单中的数据，并在为用户呈现结果页面之前将其从会话中删除（可能是自动的，不确定）。

根据之前的数据，跳过某些表格的能力有限。

另一种方法是基于客户端。您使用一个巨大的表单，但使用某种 Javascript 来引导用户逐节浏览它。前面部分的“提交”不涉及服务器，只是隐藏子表单并显示下一个（或在选项卡之间切换，用户也可以自己做）。方法的范围从简单的 Jquery 到庞大的 Javascript 框架。

【讨论】：