Search code examples
javascriptjqueryhtmlprogress-4glwebspeed

Prevent form resubmit by back button + refresh/retry

I apologize if this has already been asked but I've done quite a bit of searching and have not been able to find a question that is similar to mine yet.

On my application I have a password change page that triggers if a person is a new user or had his/her password reset.

The issue is that once the user makes changes and hits submit he/she gets redirected to the main page. Now if the user spams the back button a few times to get to the password change page they encounter an expired page and they can hit refresh. Then the browser asks the user to retry to submit the data. This submit request is a POST and the original data that the user entered previously can be seen in the packet.

I've only been able to replicate this issue on IE so far..tried it on FF and Chrome but nothing there.

My question is, is there a way, using jQuery, HTML, WSS, or otherwise-- to prevent this POST from being resubmitted? My biggest concern is the packet with the data that can be seen.

Thanks.

Solution

  • A very general solution to this kind of problem is the Post/Redirect/Get-pattern.

    What this means is that when you want to do a POST to a page that updates something in the background you really create two target pages:

    Page number 1

    The target page of the POST. Contains the logic for updating your database/filesystem/API or whatever needs to be done. This is just a URL without any real visual feedback, instead it redirect you to page number 2 (see below) once the logic is done. The redirect is a simple GET instead of a POST.

    Page number 2

    A page that shows you feedback of your action on "page number 1". Could be just a message "Password update OK" or actual data from the database or whatever suits you.

    Now when somebody uses your form, they get posted to page number 1 that will perform the background action, then they are redirected to page number 2.

    Now if they reload they wont redo the entire logic part but just the feedback-part.

    Wikipedia has a pretty good explanation of this:

    https://en.wikipedia.org/wiki/Post/Redirect/Get

    How to do a redirect in Progress WebSpeed

    In your outputHeader-procedure or where ever you do 

    output-content-type ("text/html":U).

    Instead if the output-content-type: first do your logic and then insert something like this:

    OUTPUT-HTTP-HEADER("Status", "301").
OUTPUT-HTTP-HEADER("Location","http://www.yoursite.com/newurl").
OUTPUT-HTTP-HEADER("","").

    Now you will be server-side redirected once the logic has processed. You can also insert parameters in the url if needed:

    DEFINE VARIABLE iId as INTEGER NO-UNDO.
OUTPUT-HTTP-HEADER("Status", "301").
OUTPUT-HTTP-HEADER("Location","http://www.yoursite.com/newurl?id=" + STRING(iId)).
OUTPUT-HTTP-HEADER("","").