Keeping url same while updating contents of page after form submission using Django

Question

I built an html form using the <form> tag and not using built in Django forms. The form asks for name and age. What I want to do is that after the user fills the form, the url of the page is kept same, while the contents of the page are changed to display name and age. How can I do that?

<html>
<head>
 <title>Form</title>
</head>
<body>

 <form method="post" action="aftersubmit">
  {% csrf_token %}
  <input placeholder="yourname" name="name">
  <br>
  <input placeholder="your age" name="age">
  <br>
  <input type="submit" value="Submit">
 </form>
</body>
</html>

from django.shortcuts import render,redirect
# Create your views here.

def formpage(request):
    return render(request,'formhtml.html')

def aftersubmit(request):
    name = request.POST['name']
    age = request.POST['age']
    dictionary = {
    "name":name,
    "age":age
    }
    print(dictionary)
    return redirect('formpage')

My current code keeps the url same but does not modify the contents of the page.

bb4L · Accepted Answer · 2020-04-18T15:02:31.140

you can achieve the behavior in one view:

check for the request type

if it's post read age and name as in your aftersubmit view.

def formpage(request):
    if request.method == 'POST':
        name = request.POST['name']
        age = request.POST['age']
        return render(request, 'formhtml.html', {'name': name, 'age':age}) # you could also swap the template if you want
    else:
        return render(request,'formhtml.html')

and render the view with context containing name and age

in the template check if the age and/or name is present and check that the action is pointing to the same view

{% if name %}
{{name}}  {{age}}
{% else %}
your form you already have
{% endif %}

example from the documentation: https://docs.djangoproject.com/en/3.0/topics/forms/

Thanks a lot! That worked. Could you please add one more thing in your answer, mentioning that the `action` attribute needs to be changed as well to the url set for the webpage having form. This would be helpful for future viewers. — user185887, Apr 18 '20 at 15:00

score 0 · Answer 2 · answered Apr 18 '20 at 14:56

Form action expects the url, so {% url 'aftersubmit' %} should work. HOWEVER, forms that don't trigger refresh SHOULD HAVE NEITHER ACTION ATTRIBUTE NOR SUBMIT BUTTON as the submit event is the event responsible for the refresh. What you're looking for is called AJAX and you can find your answer here, or use Axios library to call your view. Using ajax puts some work on the Front-End, As now you have to manually change the data on the Front-End compared to what we had before "The refresh".

Keeping url same while updating contents of page after form submission using Django

2 Answers2