Prevent form fields from repopulating after clicking the back button

Question

I have a form. After it is successfully submitted, there is a server side redirect to view the new entry.

Problem: All the inputs are still populated with the last values after the back button is pressed (it doesn't resubmit the form automatically or show that "confirm form submission" prompt). This allows the user to manually click "Submit" again and submit a duplicate entry very easily, which is what I want to avoid. Note that this is not the classic "repost" problem, we are using the post/redirect/get pattern.

There are 20+ fields in the form, and technically speaking it's possible that two identical entries could be legitimate, but I just want the fields to be cleared when the user presses the back button.

Here's what I've tried:

No-cache headers

header('Cache-Control: must-revalidate, no-store, no-cache, private, max-age=0');
header('Pragma: no-cache');
header('Expires: Sat, 26 Jul 1997 05:00:00 GMT');

Combinations of No-cache meta tags

<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />

Submitting and redirecting with javascript

$('form').submit(function(){
    $.post($(this).attr('action'), $(this).serialize(), function(response){
        window.location = response.redirectUrl;
    });
});

"Refresh" redirect after submitting the form

header('refresh:0; url=view_entry'); 

Refresh triggered by session data (getting a little hacky here...)

// psuedo PHP code for the "add" page
if ($_SESSION['submit']) {
    $_SESSION['submit'] = 0;
    redirect(current_url); // Cross fingers and hope this clears the form
}
if ($formValid and $saveEntry) {
    $_SESSION['submit'] = 1;
    redirect(next_url);
}

None of this works, the fields are still populated after hitting the back button. The last option actually triggers the "confirm form submission" prompt, which isn't what I want but at least it's a little better.

I should mention that this is in Google Chrome. Codeigniter and jQuery are available if that helps. I just want the form fields cleared after the user hits the back button, after a successful entry is posted. I don't actually recall having this issue before, and I'm all out of ideas. What's the right way to do this?

Answer 1

A fast and easy approach would be to clear the fields individually after the response and prior to the redirect.

$('form').submit(function(){
    $.post($(this).attr('action'), $(this).serialize(), function(response){
        // HERE, clear the fields like...
        $("#field_id_1").val('');
        $("#field_id_2").val('');
        // THEN do the redirect
        window.location = response.redirectUrl;
    });
});

it may not be the most comprehensive solution but since you are doing your submission using an ajax call anyway, there is no reason not to do it this way.