时间戳

首页 > 解决方案 > 如何使用 Django 和 JavaScript 提交多个表单？

javascript - 如何使用 Django 和 JavaScript 提交多个表单？

问题描述

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

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

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

索引.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 %}

视图.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)

应用程序.js

function addRow() {

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

}

标签： javascripthtmlpython-3.xdjangodjango-rest-framework

解决方案

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

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

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

推荐阅读