Using multiple POST requests with different urls in a single page

Question

I am trying to build a todo-list with an add/delete and completed button for each todo. I've used multiple forms and POST requests to make it work. Is there a better solution to achieve this?

Current issues- page refresh after adding adds the same item to the list, page refresh after every request.

views.py

from django.shortcuts import render, redirect
from .models import *
from .forms import ListForm

# Create your views here.
def homePage(request):
    list = List.objects.all()
    form = ListForm()

    if request.method == 'POST':
        form = ListForm(request.POST)
        if form.is_valid():
            form.save()

    context = {'list': list, 'form': form}
    return render(request,'todoList/home.html',context)

def deleteList(request,pk):
    list = List.objects.get(id=pk)
    if request.method == 'POST':
        list.delete()
        return redirect('/')

def completed(request,pk):
    list = List.objects.get(id=pk)
    if request.method == 'POST':
        print(list.completed)
        if list.completed == False:
            list.completed = True
        else:
            list.completed = False
        list.save()
        return redirect('/')

Html

<h2>Todo list</h2>
    {% for listItem in list %}
    <div class="row">
        <form class="bottomCont" action=" {% url 'delete_list' listItem.id %} " method="POST">
            {% csrf_token %}
            <div class="col-sm-3">
                <h4>{{ listItem }}</h2>
            </div>
            <div class="col-sm-1">
                <p>{{ listItem.completed }}</p>
            </div>
            <div class="col-sm-2">
                <p>{{ listItem.date_added }}</p>
            </div>
            <div class="col-sm-1">
                <button type="submit" class="btn btn-danger">Delete</button>
            </div>   
        </form>
        </div>
        <form action=" {% url 'completed' listItem.id %}" method="POST">
            {% csrf_token %}
            <div class="col-sm-1">
                <button type="submit" class="btn btn-success">Completed</button>
            </div> 
        </form>
    </form>    
    {% endfor %}
    <form action="" method="POST">
        <div>
            {% csrf_token %}
            {{ form }}
            <button type="submit" class="btn btn-success">Add</button>
        </div>
    </form>

urls.py

from django.urls import path 
from . import views

urlpatterns = [
    path('',views.homePage, name='home'),
    path('delete_list/<int:pk>/',views.deleteList, name='delete_list'),
    path('completed_list/<int:pk>/',views.completed, name='completed'),
]

Thank you!

I found this post, which might be exactly what you're looking for https://stackoverflow.com/questions/1395807/proper-way-to-handle-multiple-forms-on-one-page-in-django — Luis Silva, May 10 '20 at 11:04

score 1 · Accepted Answer · answered May 10 '20 at 11:37

Current issues- page refresh after adding adds the same item to the list, page refresh after every request.

If you want to avoid page refresh after each action, then you have to send AJAX requests from Javascript, and create some AJAX views in Django.

Take a look at this post: How do I integrate Ajax with Django applications?

Using multiple POST requests with different urls in a single page

1 Answers1