More on 303 redirect

Question

Yesterday, Peter Boughton mentioned that a 303 redirect can be used to transform to a refresh-friendly GET request.

Q: How is this done? Suppose I have the form:

<form method="post">
<button type="submit" name="Save">Save</button>
</form>

Then how do you do a 303 redirect to keep the user from submitting the same thing by pressing F5?

Note: As of bootstrap 3, I'm now using button type=submit in favor of input type=submit.

Answer 1

You can use

<cflocation url = "newpage.cfm" addToken = "no" statusCode = "303">

See https://learn.adobe.com/wiki/display/coldfusionen/cflocation for more details

Answer 2

One idea that I'm playing with is not submitting the form at all. Instead I change the button type="submit" to button type="button" and have JavaScript do an AJAX call to save the form and then do a window.replace so that when the user presses the back button, they don't have a long tail of browser history:

Here's my form:

<form method="post">
   <button type="button" id="Save">Save</button>
</form>

And here's my JavaScript:

(function() {
    $(document).on('click','#Save',SaveClicked);
    function SaveClicked() {
        var local = {};

        local.data = {};
        local.data.method = 'Save';
        local.dataType = 'text'; // no return value.
        local.Promise = $.ajax('xxx.cfc',local);
        local.Promise.done(done);
        local.Promise.fail(fail);
    }
    function done(data, textStatus, jqXHR) {
        window.location.replace(window.location.pathname);
    }
    function fail(jqXHR, textStatus, errorThrown) {
        debugger;
    }
})();