Cancel the POST when the page is refreshed

Question

My problem is: when an user refresh a form, the data in the Form is sent.

I have a Form with a POST request.

The user writes his name, mail and a message. If the mail is correct, the message is sent.

In my view, if the Form is valid, I add the message in my model Message.

After that I disable the "Send" button. But if the user refreshes the page, my view is called, and another row is added in my model.

I would like, when the user refreshes the page, to block the POST.

My View:

def contact(request):

    form = MessageForm(request.POST or None)

    if form.is_valid(): 
        name = form.cleaned_data['name']
        message = form.cleaned_data['message']
        mail = form.cleaned_data['mail']

        new_message = Message()
        new_message.name = name
        new_message.message = message
        new_message.mail = mail
        new_message.save()

        envoi = True

    return render(request, 'vautmieux/contact.html', locals())

My URL:

path('contact/', views.contact, name='contact'),

My HTML:

<form action="{% url "contact" %}" method="post">
    {% csrf_token %}
        <div class="row">
           <div class="col-md-6">
              {{ form.name }}
              {{ form.mail }}
           </div>
           <div class="col-md-6" >
              {{ form.message }}
           </div>
           <button id="sendMessageButton" type="submit">ENVOYER LE MESSAGE !</button>
        </div>
    {% if envoi %}Votre message a bien été envoyé !{% endif %}
</form>

Answer 1

This is the main reason why people implement the Post/Redirect/Get pattern [wiki] . In case of a successful POST request, you should return a redirect to a URL. As a result the browser will perform a GET, and in case the browser thus performs a refresh later, it will make a GET again.

def contact(request):
    if request.method == 'POST':
        form = MessageForm(request.POST)
        if form.is_valid(): 
            form.save()
            
    else:
        form = MessageForm()
    return render(request, 'vautmieux/contact.html', {'form': form})

Here 'some-message-successful-view' needs to be replaced with the name of a view you trigger when sending a message was succesful. This can be the same view as the one defined here. I advice to use Django's message framework [Django-doc] to send a message to the user that the message has been submitted successfully.