出现在弹出面板中的表单答案

【问题标题】：Form to appear in a popup panel出现在弹出面板中的表单
【发布时间】：2021-02-12 01:11:33
【问题描述】：

我有以下文件设置：

在forms.py

class TableCheckInForm(forms.Form):
    guest_count = forms.IntegerField(min_value =0)

在views.py:

def table_checkin_view(request):
    if request.method == 'POST':
        form = TableCheckInForm(request.POST)
        if form.is_valid():            
            cd = form.cleaned_data
    else:
        form = TableCheckInForm()
    return render(request,
                  'table/table_checkin.html', {'form': form})

在模板table_view.html

<script src="{% static 'js/table.js' %}"></script>
...
<button class="button checkin_button" onclick="openForm()">Check In</button>
...

在另一个模板table_checkin.html

{% load static %}

<script src="{% static 'js/table.js' %}"></script>

  <div id="table_checkin_form">
    <h1>Check-In</h1>
    <form class="form-container" method="post">
      {{ form.as_p }}
      {% csrf_token %}
      <button type="submit" class="table_checkin" onclick="closeForm()">Check In</button>
    </form>
  </div>

在静态 Javascript 文件中table.js

function openForm() {
  document.getElementById("table_checkin_form").style.display = "block";
}

function closeForm() {
  document.getElementById("table_checkin_form").style.display = "none";
}

在urls.py

urlpatterns = [
    ...
    path('', views.table_view, name='table_view'),
    path('1/checkin/', views.table_checkin_view, name='table_checkin_view'),
    ...
]

我正在尝试实现一个包含上述表单的弹出面板，类似于 W3Schools here 的这个示例。

假设我目前在模板table_view.html 上。当我单击按钮checkin_button 时，我希望在呈现table_checkin.html 的小面板中弹出表单。这意味着，在后台，我仍然希望看到模板 table_view.html。但是在我的例子中，表单总是出现在一个全新的页面中（因为它有自己的 url）。撇开css效果不谈，是否可以让一个包含表单的视图在另一个视图之上呈现为弹出窗口？

如果您有其他建议来实现此效果，那就太好了。谢谢。

【问题讨论】：

标签： css django django-forms django-templates

【解决方案1】：

您无需打开单独的 URL 即可呈现表单。

要创建您所引用的示例，该表单将作为 div 包含在您的 table_view.html 页面中。默认是隐藏的，点击打开表单按钮时会显示div。

将 W3Schools 示例中第一个按钮的代码粘贴到脚本末尾（结束 body 标记之前）到 table_view.html 中应该可以让他们的示例为您运行。然后替换表单和操作信息。根据需要添加 CSS。

【讨论】：

谢谢。但是这样使用裸露的形式是不是有跨站攻击的风险呢？我将表单放在自己的模板中，以便以后可以使用{% csrf_token %} 或crispy-form 之类的东西。或者有没有办法在 W3Schools 示例中避免这种风险？
您需要插入 csrf_token 才能在表单上使用 Post 方法。使用 Javascript 暂时隐藏然后显示页面内容是完全可以接受的。