How can I redirect to the same page after submitting a form using Django and display the submitted data on that same page?
This is my class based view function
Whenever the use finishes to enter the required data and click the submit button. I want the page to reload so user can see the data they have submitted.
I don't want to redirect the user to another page. But the app behaves differently.
I'm trying to see how I can manage to make this work please
class homeView(View):
def get(self, request):
data = recipemeal.objects.all().order_by("-id")
context ={
"recipes":data,
"form":RecipeForm()
}
return render(request, "index.html", context)
def post(self, request):
form = RecipeForm(request.POST)
data = recipemeal.objects.all().order_by("-id")
if form.is_valid():
form.save(commit=True)
return HttpResponseRedirect(reverse("home"))
else:
context = {
"recipes": data,
"form": RecipeForm()
}
return render(request, "index.html", context)
*************************************************************************
urlpatterns = [
path("", views.homeView.as_view(), name="home"),
]
*********************************************************************
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>Hi there, my name is Wilkenson</h2>
<section>
<div class="container">
<div>
<form method="POST">
{% csrf_token %}
{{ form }}
<button class="btn" type="submit">Add Data</button>
</form>
</div>
<div>
<form action="/" method="POST">
{% csrf_token %}
<button class=" button generate-pdf">Generate Plan</button>
</form>
</div>
{% if recipes %}
<table>
<tr>
<th>Recipe No.</th>
<th>Day-Time</th>
<th>Recipe Name</th>
<th>Description</th>
<th>Action</th>
</tr>
{% for item in recipes %}
<tr>
<td>{{item.id}}</td>
<td>{{item.date}}</td>
<td>{{item.title}}</td>
<td>{{item.content}}</td>
<td><a href="">Update</a>/<a href="">Delete</a></td>
</tr>
{% endfor %}
</table>
{% endif %}
</div>
</section>
</body>
</html>
If you want the page to reload with the updated data after the user submits the form you don’t need to redirect Just save the form in if form.is_valid():
, then fetch the updated queryset and render the same template again
class homeView(View):
def get(self, request):
data = recipemeal.objects.all().order_by("-id")
context = {
"recipes": data,
"form": RecipeForm()
}
return render(request, "index.html", context)
def post(self, request):
form = RecipeForm(request.POST)
if form.is_valid():
form.save()
data = recipemeal.objects.all().order_by("-id")
context = {
"recipes": data,
"form": form # same form
}
return render(request, "index.html", context)
This way the same page reloads with the entered data and the user isn’t redirected to another page The only drawback is that refreshing the page after submitting may cause the browser to warn about resubmitting the form if that’s not a problem this solution works fine Otherwise you’d stick with the redirect pattern
note : you can also avoid reloading the whole page by submitting the form with JavaScript using AJAX (for example with fetch or jQuery) That way only the data section is updated dynamically without a full page refresh This gives a smoother user experience but requires writing a small JS snippet to send the form data and update the DOM with the new results