django - 在单个模板中处理多个表单在 django 中不起作用

Question

在这里，我的单个页面中有两个表单。我在某个表中有一个类别信息列表，并且我对POST请求有两个不同的操作。一个是删除单个类别对象，另一个是删除选中的对象。但是在将两个表单放在一起后删除单个对象不起作用。之前没有用于删除所选类别的表单，因此删除单个对象在模态下工作正常但是当我使用两个表单时，即使我单击删除单个类别链接然后它正在执行删除选定的类别视图并说没有选择类别。

我如何在这里处理两个表单。我在提交按钮中给出了两个不同的名称，也给出了两个不同的操作。

def delete_category(request, pk):
    category = get_object_or_404(Category, pk=pk)
    if request.method == 'POST' and 'single-delete' in request.POST:
        category.delete()
        messages.success(request, '{} category deleted.'.format(category.title))
        return redirect('view_categories')
    else:
        messages.error(request,'Invalid request')


def delete_selected_categories(request):
    selected_categories = Category.objects.filter(id__in=request.POST.getlist('categories'))
    if selected_categories:
        if 'delete_selected' in request.POST:
            count = selected_categories.count()
            selected_categories.delete()
            messages.success(request, '{} categories deleted.'.format(count))
            return redirect('view_categories')
    else:
        messages.info(request, 'No categories selected.')
        return redirect('view_categories')

模板

<div class="table-responsive">
                <form action ="{% url 'delete_selected_categories' %}" method="post">
                    {% csrf_token %}
              <table>
                {% for category in categories %}
                    <tr>
                        <td>

                          <input name ="categories" type="checkbox" id="category-{{category.pk}}" value="{{category.pk}}" >
                 <label for="category-{{category.pk}}">{{ forloop.counter }}</label>

                     </td>
                        <td>{{category.title}}</td>
                        <td>{{category.active}}</td>

                        <td>
                         <a type="button"  data-toggle="modal" data-target="#delete-modal">Delete</a>

                        </td>

                    </tr>
                 <div class="modal" id="delete-modal">
                          <div class="modal-dialog">
                            <div class="modal-content">

                              <div class="modal-header">
                                <h4 class="modal-title"> Are you sure you want to delete ?</h4>
                                <button type="button" class="close" data-dismiss="modal">&times</button>
                              </div>

                              <div class="modal-body">
                                <form method="POST" action="{% url 'delete_category' category.pk %}" id="delete-confirm-form">
                                        {% csrf_token %}
                                  <button name="single-delete" type="submit" class="btn btn-primary">Delete</button>

                                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                                </form>
                              </div>
                            </div>
                          </div>
                        </div>

                {% endfor %}
                </tbody>

            </table>

               <button type="submit" name="delete_selected">
                  Delete Selected Categories

               </button>
                </form>
            </div>

标签： djangodjango-formsdjango-views

Answer 1

您的问题是您有嵌套表单，这在 HTML 中是不允许的。这可能会导致单个删除按钮提交外部 delete_selected_categories 表单。

要解决此问题，请将模态框移到主窗体之外，如下所示：

<div class="table-responsive">
    <form action ="{% url 'delete_selected_categories' %}" method="post">
        {% csrf_token %}
        <table>
            {% for category in categories %}
                <tr>
                    <td>
                        <input name ="categories" type="checkbox" id="category-{{category.pk}}" value="{{category.pk}}" >
                        <label for="category-{{category.pk}}">{{ forloop.counter }}</label>
                    </td>
                    <td>{{category.title}}</td>
                    <td>{{category.active}}</td>

                    <td>
                        <a type="button"  data-toggle="modal" data-target="#delete-modal">Delete</a>
                    </td>
                </tr>
            {% endfor %}
            </tbody>

        </table>

        <button type="submit" name="delete_selected">
            Delete Selected Categories
        </button>
    </form>

    {%  for category in categories %}
        <div class="modal" id="delete-modal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title"> Are you sure you want to delete ?</h4>
                        <button type="button" class="close" data-dismiss="modal">&times</button>
                    </div>
                    <div class="modal-body">
                        <form method="POST" action="{% url 'delete_category' category.pk %}" id="delete-confirm-form">
                            {% csrf_token %}
                            <button name="single-delete" type="submit" class="btn btn-primary">Delete</button>

                            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    {% endfor %}
</div>

此外，这不是必需的，但根据显示的类别数量，您可以尝试通过在一个表单中仅添加一个模式来减小 HTML 的大小，并在单击“删除”按钮时设置该表单的类别 ID。

查看这个问题，了解如何将数据传递给模态。

更新：

所有模态的 id 都是相同的。改变<div class="modal" id="delete-modal">

到

<div class="modal" id="delete-modal-{{category.pk}}">

和

<a type="button" data-toggle="modal" data-target="#delete-modal">Delete</a>

到

<a type="button" data-toggle="modal" data-target="#delete-modal-{{category.pk}}">Delete</a>