Beginner: Django todoapp- update view(funcn based). I am able to update, returns back to home page but shows old data itself instead of updated data

Question

I am building a todo app with two forms - UpdateForm and TodoForm, using Django. I tried two types of function codes, but was not able to get the desired result.

With the first type of function code, I was not even able to update, but with the alternate function code (given below), I was able to click the update button, enter the details, click the Submit button, and then redirected back to the home page with the old data. The updated data does not get saved.

I would like to know my mistakes and how to fix this problem with the update. Any help is appreciated!

views.py:

def update(request, pk):
    task = Index.objects.get(id=pk)
    form = UpdateForm(instance=task)
    if request.method == 'POST':
        form = UpdateForm(request.POST, instance=task)
        if form.is_valid():
            form.save()
            return redirect('/')
    context = {'form': form}
    return render(request, 'update.html', context)

forms.py:

from django.forms import ModelForm
from .models import Index
from django import forms

class UpdateForm(forms.ModelForm):
    task_title = forms.CharField(max_length=250)
    date = forms.DateField()
    time = forms.TimeField()

class TodoForm(forms.ModelForm):
    class Meta:
        model = Index
        fields = ['task_title', 'date', 'time']

admin:

from django.contrib import admin
from .models import Index

admin.site.register(Index)

home page - input.html:

<div class="col-md-6">
   <h4>TASKS TO BE DONE</h4>
   {% for i in task1 %}
      <div class="shadow card">
         <div class="card-body">
            <h5 class="card-title">{{i.task_title}}</h5>
            <br>
            <br>
            <p><b>{{i.date}}</b></p>
            <p><b>{{i.time}}</b></p>
         </div>
      </div>
      <br>
      <a class="btn btn-success" href="{% url 'todoapp:update' i.id %}">UPDATE</a>
      <a class="btn btn-danger" href="{% url 'todoapp:delete' i.id %}">DELETE</a>
   {% endfor %}
</div>

update.html:

{% extends 'base.html' %}
{% block body %}
   <form method="POST" action="">
      {% csrf_token %}
      {{ form.as_p }}
      <a class="btn btn-success" href="{% url 'todoapp:input' Index.id %}">SUBMIT</a>
   </form>
{% endblock %}

app/urls.py:

from django.urls import path
from . import views

app_name = 'todoapp'

urlpatterns = [
   path('', views.input, name='input'),
   path('<id>/delete.html', views.delete, name='delete'),
   path('update/<str:pk>/', views.update, name='update'),
   path('<id>/update.html', views.update, name='update'),
]

Here is the alternate update function code that I used:

# With this code, I am able to click the update button, enter the details, but after submitting, it redirects me to the home page with the old date, i.e., updated data doesn't get saved.

context = {}
task = get_object_or_404(Index, id=id)
f = TodoForm(request.POST or None, instance=task)
if f.is_valid():
   f.save()
   return render(request, 'input.html')
context = {'f': f}
return render(request, 'update.html', context)

update.html:

{% extends 'base.html' %}
{% block body %}
   <form method="POST" action="">
      {% csrf_token %}
      {{ f.as_p }}
      <a class="btn btn-success" href="{% url 'todoapp:input' %}">SUBMIT</a>
   </form>
{% endblock %}

home page - input.html:

<div class="col-md-6">
   <h4>TASKS TO BE DONE</h4>
   {% for i in task1 %}
      <div class="shadow card">
         <div class="card-body">
            <h5 class="card-title">{{i.task_title}}</h5>
            <br>
            <br>
            <p><b>{{i.date}}</b></p>
            <p><b>{{i.time}}</b></p>
         </div>
      </div>
      <br>
      <a class="btn btn-success" href="{% url 'todoapp:update' i.id %}">UPDATE</a>
      <a class="btn btn-danger" href="{% url 'todoapp:delete' i.id %}">DELETE</a>
   {% endfor %}
</div>