Django Handling Multiple Forms

Question

I'm currently working on To-Do App using Django.

I got stucked in handling two different forms in single html file and each form has separate function in views. I have two models Todo and Task. The task items should be placed under to-do item. In short To-Do is a Category and the task's are its sub-category. The data is not getting saved and displayed in the Web.

I have two forms in main.html one is for to-do item and other one is for task item. Each have two different function in views.py which are home and add_todo function respectively.

In form-2 which is for task item built using bootstrap Modal. The form action provided to add_todo function in views.py.

models.py

class Todo(models.Model):

    date_created = models.DateTimeField(auto_now_add=True)
    completed = models.BooleanField(default=False)
    title = models.CharField(max_length=200)
    user_id = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE)

    def __str__(self):
        return self.title

class Task(models.Model):

    heading = models.CharField(max_length=100)
    todo = models.ForeignKey(Todo, on_delete=models.CASCADE, related_name='tasks')
    date_created = models.DateTimeField(auto_now_add=True)
    completed = models.BooleanField(default=False)
    user = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE)

    def __str__(self):
        return self.heading

views.py

from django.shortcuts import render, redirect, get_object_or_404
from django.http import HttpResponse, Http404, HttpResponseNotFound, JsonResponse, HttpResponseRedirect
from .models import Todo, Task
from .forms import *
from django.utils import timezone
from django.contrib.auth.forms import UserCreationForm
from django.views.decorators.csrf import csrf_protect
from django.contrib.auth import authenticate, login, logout
from django.contrib.auth.decorators import login_required
from django.views.generic import View
from django.contrib.auth.models import User
from django.core.paginator import Paginator


def register(request):
    form = userRegisterForm()

    if request.method == 'POST':
        form = userRegisterForm(request.POST)
        if form.is_valid():
            form.save()
            username = form.cleaned_data.get('username')
            password = form.cleaned_data.get('password2')

            return redirect('login')
    else:
        form = userRegisterForm()

    context = {'form': form}
    return render(request, 'todo/register.html', context)


def logoutUser(request):
    logout(request)
    return redirect('login')


@login_required(login_url='login')
def home(request):

    todo_form = TodoForm()
    task_form = TaskForm()
    current = timezone.now()

    todo_items_upcoming = Todo.objects.filter(user_id=request.user, completed=False).order_by('-date_created')
    todo_items_completed = Todo.objects.filter(user_id=request.user, completed=True).order_by('-date_created')

    pagi1 = Paginator(todo_items_upcoming, 4)
    pagi2 = Paginator(todo_items_completed, 4)

    page_num = request.GET.get('upcoming', 1)
    page_num2 = request.GET.get('completed', 1)

    page_obj = pagi1.get_page(page_num)
    page_obj2 = pagi2.get_page(page_num2)

    if request.method == "POST":
        todo_form1 = TodoForm(request.POST)
        if todo_form1.is_valid():
            data = todo_form1.cleaned_data.get('title')
            obj = Todo.objects.create(date_created=current, title=data, user_id=request.user)
        
        return redirect('/')

    context = {'todo_form': todo_form, 'page_obj': page_obj, 'page_obj2': page_obj2,
               'pagi1': pagi1, 'pagi2': pagi2, 'page_num2': int(page_num2), 'page_num': int(page_num), 'task_form':task_form}

    return render(request, 'todo/main.html', context)


@login_required(login_url='login')
def update_todo(request, pk):

    try:
        obj = Todo.objects.get(id=pk, user_id=request.user)

        upform = TodoForm(instance=obj)
        if request.method == 'POST':
            upform = TodoForm(request.POST, instance=obj)
            if upform.is_valid():
                upform.save()
                return redirect('/')
    except Exception as err:

        try:
            obj = Task.objects.get(id=pk, user=request.user)
            upform = TaskForm(instance=obj)
            if request.method == 'POST':
                upform = TaskForm(request.POST, instance=obj)
                if upform.is_valid():
                    upform.save()
                    return redirect('/')
        except Exception as err:
            raise Http404(err)

    context = {'upform': upform}
    return render(request, 'todo/update_task.html', context)


@login_required(login_url='login')
def add_todo(request, pk):

    try:
        obj = Todo.objects.get(id=pk, user_id=request.user)
    except Exception as e:
        raise Http404(e)

    if request.method == 'POST':
        t_form = TaskForm(request.POST)
        if t_form.is_valid():
            data = t_form.cleaned_data.get('heading')
            Task.objects.create(user=request.user, heading=data, todo=obj, date_created=timezone.now())
            
            return redirect('/')
    else:
        t_form = TaskForm()

    context = {'t_form':t_form}
    return render(request, 'todo/main.html', context)


@login_required(login_url='login')
def delete_todo(request, pk):

    try:
        obj = Todo.objects.get(id=pk, user_id=request.user)
    except Exception as err:
        try:
            obj = Task.objects.get(id=pk, user=request.user)
        except Exception as err:
            raise Http404(err)

    obj.delete()
    return HttpResponseRedirect(request.META.get('HTTP_REFERER'))


@login_required(login_url='login')
def completed_todo(request, pk):

    try:
        obj = Todo.objects.get(id=pk, user_id=request.user)
    except Exception as err:
        try:
            obj = Task.objects.get(id=pk, user=request.user)
        except Exception as err:
            raise Http404(err)

    obj.completed = True
    obj.save()

    # return redirect('/')
    return HttpResponseRedirect(request.META.get('HTTP_REFERER'))

main.html

{% extends 'todo/index.html' %}
{% load crispy_forms_tags %}
{% block content %}

    <div class="center-column">
        <h5 class="card-title">Create your List</h5>
         #form-1
        <form action="" method="POST">
            {% csrf_token %}
            <div class="input-group-append">
                {{ todo_form.title }}
                <button type="submit" class="form-control btn btn-primary mb-3 mr-sm-2" id="addItem">
                    Add Items
                </button>
            </div>
        </form>
    </div>

    <div class="row">
        <div class="col-sm-6">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Upcoming Items</h4>
                    <hr/>

                    <ul class="list-group" id="upcomingItems">
                        {% for i in page_obj %}

                            <li class="list-group-item list-group-item-primary mb-1" id="upcomingItem">
                                {{ i.title }}

                                <div class="float-right">
                                    <button type="submit" class="btn btn-sm btn-danger ml-1 mt-1 mr-1 mb-1">
                                        <a href="{% url 'delete_todo' i.id %}">❌</a>
                                    </button>
                                </div>

                                <div class="float-right">
                                    <button type="submit" class="btn btn-sm btn-success ml-1 mt-1 mr-1 mb-1" id="update_btn">
                                        <a href="{% url 'update_todo' i.id %}">Update</a>
                                    </button>
                                </div>

                                <div class="float-right">
                                    <button type="submit" class="btn btn-sm btn-dark ml-1 mt-1 mr-1 mb-1" id="completed_btn">
                                        <a href="{% url 'completed_todo' i.id %}">Completed</a>
                                    </button>
                                </div>

                                <div class="float-right">

                                    <!-- Button trigger modal -->
                                    <button type="button" class="btn btn-sm btn-primary ml-1 mt-1 mr-1 mb-1" data-toggle="modal" data-target="#staticBackdrop">
                                        Add
                                    </button>
                                    <!-- Modal -->
                                    <div class="modal fade" id="staticBackdrop" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                                        <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="staticBackdropLabel">Add New Task</h5>
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>

                                            <div class="modal-body">
                          #form-2
                                                <form action="{% url 'home' %}" method="POST">
                                                    {% csrf_token %}
                                                    <div class="card">

                                                        {{ task_form.heading }}

                                                    </div>
                                                    <div class="modal-footer">
                                                        <button class="btn btn-success" type="submit">Submit</button>
                                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                        </div>
                                    </div>
                                </div>

                                {% for j in i.tasks.all %}
                                    {% if i.tasks.all %}
                                        <div class="card mt-4">
                                            <ul class="list-group">
                                                <li class="list-group-item list-group-item-danger" id="upcomingItem">
                                                    {{ j.heading }}
                                                    <div class="float-right">
                                                        <button type="submit" class="btn btn-sm btn-danger ml-1 mt-1 mr-1 mb-1">
                                                            <a href="{% url 'delete_todo' j.id %}">❌</a>
                                                        </button>
                                                    </div>

                                                    <div class="float-right">
                                                        <button type="submit" class="btn btn-sm btn-dark ml-1 mt-1 mr-1 mb-1" id="completed_btn">
                                                            <a href="{% url 'completed_todo' j.id %}">Completed</a>
                                                        </button>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    {% endif %}
                                {% endfor %}
                            </li>

                        {% endfor %}
                    </ul>
                    <hr/>

                    <ul class="pagination justify-content-center">
                        {% if page_obj.has_previous %}
                            <li class="page-item {% if page_obj.page_number == page_num %} active {% endif %}">
                                <a class="page-link" href="?upcoming={{ page_obj.previous_page_number }}&completed={{ page_num2 }}">&laquo</a>
                            </li>
                        {% endif %}
                        {% for i in pagi1.page_range %}
                            <li class="page-item {% if i == page_num %} active {% endif %}">
                                <a class="page-link" href="?upcoming={{ i }}&completed={{ page_num2 }}">{{ i }}</a>
                            </li>
                        {% endfor %}
                        {% if page_obj.has_next %}
                            <li class="page-item {% if page_obj.page_number == page_num %} active {% endif %}">
                                <a class="page-link" href="?upcoming={{ page_obj.next_page_number }}&completed={{ page_num2 }}">&raquo</a>
                            </li>
                        {% endif %}
                    </ul>
                </div>
            </div>
        </div>

        <div class="col-sm-6">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Completed Items</h4>
                    <hr/>

                    <ul class="list-group">
                        {% for i in page_obj2 %}

                            {% if not i.tasks.all %}

                                <li class="list-group-item list-group-item-primary mb-1" id="upcomingItem">
                                    {{ i.title }}
                                    <div class="float-right">
                                        <button type="submit" class="btn btn-sm btn-danger mt-1 mb-1">
                                            <a href="{% url 'delete_todo' i.id %}">❌</a>
                                        </button>
                                    </div>
                                
                                </li>
                            {% else %}

                                {% for j in i.tasks.all %}

                                    <li class="list-group-item list-group-item-primary mb-1" id="upcomingItem">
                                        {{ i.title }}
                                        <div class="float-right">
                                            <button type="submit" class="btn btn-sm btn-danger mt-1 mb-1">
                                                <a href="{% url 'delete_todo' i.id %}">❌</a>
                                            </button>
                                        </div>

                                        <div class="card mt-4">
                                            <ul class="list-group">
                                                <li class="list-group-item list-group-item-danger">
                                                    {{ j.heading }}

                                                    <div class="float-right">
                                                        <button type="submit" class="btn btn-sm btn-danger">
                                                            <a href="{% url 'delete_todo' j.id %}">❌</a>
                                                        </button>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </li>
                                {% endfor %}
                            {% endif %}

                        {% endfor %}
                        
                    </ul>
                    <hr/>

                    <ul class="pagination justify-content-center">
                        {% if page_obj2.has_previous %}

                            <li class="page-item {% if page_obj2.page_number == page_num %} active {% endif %}">
                                <a class="page-link" href="?completed={{ page_obj2.previous_page_number }}&upcoming={{ page_num }}">&laquo</a>
                            </li>

                        {% endif %}
                        {% for i in pagi2.page_range %}

                            <li class="page-item {% if i == page_num2 %} active {% endif %}">
                                <a class="page-link" href="?completed={{ i }}&upcoming={{ page_num }}">{{ i }}</a>
                            </li>

                        {% endfor %}
                        {% if page_obj2.has_next %}

                            <li class="page-item {% if page_obj2.page_number == page_num %} active {% endif %}">
                                <a class="page-link" href="?completed={{ page_obj2.next_page_number }}&upcoming={{ page_num }}">&raquo</a>
                            </li>

                        {% endif %}
                    </ul>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

forms.py

class TodoForm(forms.ModelForm):
    
    class Meta:
        model = Todo
        fields = ['title', 'completed']

class TaskForm(forms.ModelForm):

    class Meta:
        model = Task
        fields = ['heading', 'todo', 'completed']

class userRegisterForm(UserCreationForm):
    email = forms.EmailField()

    class Meta:
        model = User
        fields = ['username','email','password1','password2']

urls.py

urlpatterns = [

    path('', views.home, name='home'),
    
    path('update_todo/<int:pk>/', views.update_todo, name='update_todo'),
    path('completed/<int:pk>/', views.completed_todo, name="completed_todo"),
    path('delete_todo/<int:pk>/', views.delete_todo, name='delete_todo'),
    path('add_todo/<int:pk>/', views.add_todo, name='addTodo'),

    path('register/', views.register, name='register'),
    path('login/', auth_views.LoginView.as_view(template_name='todo/login.html'), name='login'),
    path('logout/', auth_views.LogoutView.as_view(template_name='todo/logout.html'), name='logout'),

]

When I click Add button and type something and click enter, the data was not saved in the DB so that I'm unable to see the tasks data.

Image-1

Task form Popup modal using bootstrap for adding task items under a todo.

Image-2

Whenever I add task items for other todo items, those task items are getting dtored to 1t todo items not to their corresponding todo items. I have added two task items on Maths Todo items but those Maths-1 and Maths-2 was created under 1st todo items.

Answer 1

The changes I have made are in add_todo function and bootstrap modal form.

views.py ad_todo function

def add_todo(request, pk):

    obj = Todo.objects.get(id=pk, user_id=request.user)

    if request.method == 'POST':
        if request.POST.get('heading'):
            data = Task()
            data.heading = request.POST.get('heading')
            data.todo = obj
            data.user = request.user
            data.save()

    return redirect('/') 

In main.html file - form-2 which is a bootstrap Modal form for adding task items.

<div class="float-right">
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-sm btn-primary ml-1 mt-1 mr-1 mb-1">
        <a href="{% url 'addTodo' i.id %}" data-toggle="modal" data-target="#staticBackdrop">
            Add
        </a>                
    </button>
    <!--Modal -->
    <div class="modal fade" id="staticBackdrop" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">Add New Task</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">
                    <form action="{% url 'addTodo' i.id %}" method="POST">
                        {% csrf_token %}
                        <div class="card">

                            {{ task_form.heading }}

                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-success" type="submit">Submit</button>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>                                    

Answer 2

Simple way is action = "{%url 'link_name' %}" You can specify the function path name in the form Action.