Не удается отобразить форму на модале - Django

Я пытаюсь заставить мой модал содержать форму, которая может добавить задачу в список дел. Я еще не вносил изменений для работы формы. Я просто хочу, чтобы форма отображалась в модале.

Это сайт со списком дел, который я делаю, и я хочу иметь модальную панель, в которой я могу напрямую ввести детали задачи через модальную панель в моем выпадающем списке на панели навигации.

Любая помощь будет высоко оценена

views.py:

from django.shortcuts import render
from .models import to_do
from .forms import AddTaskForm

def add_task(request):
    form = AddTaskForm()
    return render(request, 'navbar.html', {'form': form})

models.py

from django.db import models

class to_do(models.Model):
    title = models.CharField('Title', max_length=120)
    description = models.TextField(blank=True)
    created_on = models.DateTimeField('Created On')
    due_by = models.DateTimeField('Due By')
    status = models.BooleanField('Status', default=False)

    def __str__(self):
        return self.title

forms.py

from django import forms
from django.forms import ModelForm
from .models import to_do

class AddTaskForm(ModelForm):
    class Meta:
        model = to_do
        fields = ("title", "description", "created_on", "due_by")

urls.py

from django.urls import path
from . import views

urlpatterns = [
    path('', views.home, name='home'),
    path('to-do', views.to_do_list, name='list'),
]

navbar.html

{% load static %}

<nav class="navbar navbar-expand-lg bg-tertiary nav justify-content-center" style="background: linear-gradient(to top, #5A99FF, #3D5AFE);">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            <!--<img src="{% static 'to-do-list.svg' %}" alt="To-Do List">--> To-Do
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="{% url 'list' %}" style="color: #000000 !important;"> To-Do List </a></li>
            <li><a class="dropdown-item" href="#" style="color: #000000 !important;" data-bs-target="#AddTaskForm" data-bs-toggle="modal"> Add Task </a></li>
          </ul>
          <div class="modal fade" id="AddTaskForm" aria-hidden="true" aria-labelledby="AddTaskFormLabel" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
              <div class="modal-content">
                <div class="modal-body">
                  <form action="" method=POST>
                    {% csrf_token %}


                    {{ form.as_p }}
                    <input type="submit" value="Submit" class="btn btn-success">
                  </form>
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>
</br>





<style>
  .navbar-nav li a,
  .navbar-brand,
  .navbar-toggler-icon {
    color: #FFFFFF !important;
  }
</style>

Вернуться на верх