How to show a message dynamically in a django app? - django

Question

I've created a webapp using django where in one of the section I asks for user's feedback and on clicking the submit button I send user an email thanking him for feedback.
But every time I click on submit, the page refreshes itself, the email get delivered successfully But What I want is when user click on submit I want to show a "Thank you" message right there in place of feedback form. and feedback form to get removed
Here's a section of my index.html
<form action="" method="POST">
{% csrf_token %}
<div>{{ form.message }}</div>
<div>{{ form.email }}</div>
<p class="formerrors" >{{ form.email.errors.as_text }}</p>
<hr>
<input id="submitbutton" type="submit" name="submit" value="Submit">
</form>
here's my view
def index(request):
if request.method == 'POST':
form = FeedbackForm(request.POST)
if form.is_valid():
subject = "You got a message"
message = form.cleaned_data['message']
email = form.cleaned_data['email']
actual_message = "You got a message from {} \n\n {} \n\nGo to work\nWith regards".format(email,message)
recipients = ['example#mail.com']
sender = 'example#mail.com'
send_mail(subject, actual_message, sender ,recipients,fail_silently=False)
return HttpResponseRedirect('')
else:
form = FeedbackForm()
return render(request,'my_webapp/index.html',{'form':form})
I can do this by writing a JS onClick function but is there any better way to do this? Also the built-in django messages refreshes the page I guess and are always on the top of the page.
I certainly do not want my page to get refreshed and want message appear in place of form.

Answer 1

You should send your form using AJAX. For the response part you could send a message from your server on successful validation and in your complete function of AJAX change the form's display property to none to remove it. Then create an element for your response message using javascript.

Answer 2

You could send your form with Ajax to your django view and replace your form with a thank you note on the success callback.

Answer 3

Actually you don't have to use AJAX to achieve this. You could use django messages framework to create messages when user submitted their form.
Like so:
from django.contrib import messages
...
if request.method == 'POST':
form = FeedbackForm(request.POST)
if form.is_valid():
...
messages.success("Thank you")
# After submitted, redirect user to current page, the form will be reset
return HttpResponseRedirect(request.path_info)
else:
form = FeedbackForm()
return render(request,'my_webapp/index.html',{'form':form})
then on your template:
{% if messages %}
{% for message in messages %}
<p class="text-danger">{{ message }}</p>
{% endfor %}
{% endif %}
<form action="" method="POST">
{% csrf_token %}
<div>{{ form.message }}</div>
<div>{{ form.email }}</div>
<p class="formerrors" >{{ form.email.errors.as_text }}</p>
<hr>
<input id="submitbutton" type="submit" name="submit" value="Submit">
</form>
Of if you want a toastr message?, reference this answer