Simple Math on One Webpage

Question

I'm currently trying to do something as basic as adding two numbers the user inputs onto the page and showing the result on the same page but I'm running into problems.

index.html

{% extends "project_long_page/base.html" %}

{% block body %}

<form action="." method="POST">

    {% csrf_token %}

    {{ forms }}

    <input type="submit">

</form>

{% endblock %}

views.py

from django.shortcuts import render
import datetime
from django import forms
from django.shortcuts import render


class NewTaskForm(forms.Form):
    num1 = forms.IntegerField(label="Number 1")
    num2 = forms.IntegerField(label="Number 2")


# Create your views here.
def index(request):
    return render(request, "project_long_page/index.html")


def add(request):
    return render(request, "project_long_page/index.html", {
        "form": NewTaskForm()
    })

urls.py

from django.urls import path
from . import views

app_name = "project_long_page"
urlpatterns = [
    path("", views.index, name="index")

]

Current Webpage Output

Desired Webpage Output (While keeping original values inputted)

Thank you for helping if you assist:,)

Edit:

In case you want to see this...

Update 1:

Using the code from @Marco (Thank you @Marco!)

def index(request):
    if request.method == "POST":
        form = NewTaskForm(request.POST)
        if form.is_valid():
            num1 = form.cleaned_data["num1"]
            num2 = form.cleaned_data["num2"]
            result = num1 * num2
            context = {
                "form": NewTaskForm(initial={"num1": num1, "num2": num2}),
                "result": result
            }
            return render(request, "project_long_page/index.html", context)

    form = NewTaskForm()
    return render(request, "project_long_page/index.html", {"form": form})

Updated index.html

{% extends "project_long_page/base.html" %}

{% block body %}

<form action="." method="POST">

    {% csrf_token %}

    {{ form }}

    <input type="submit">
    <br>

    The answer is {{ result }}!

</form>

{% endblock %}

Answer 1

Change your index() view to:

def index(request):
    if request.method == "POST":
        form = NewTaskForm(request.POST)
        if form.is_valid():
            num1 = form.cleaned_data["num1"]
            num2 = form.cleaned_data["num2"]
            result = num1 * num2
            context = {
                "form": NewTaskForm(initial={"num1": num1, "num2": num2}),
                "result": result
            }
            return render(request, "project_long_page/index.html", context)

    form = NewTaskForm()
    return render(request, "project_long_page/index.html", {"form": form})

Then add result to your template.

Did not check if code is working