Search code examples
javascriptjqueryhtmlformsbrowser-history

Document ready form submission and browser history

I have the following code in my page to submit the form on the page automatically when the DOM is ready:

$(function () {
    $('form').submit();
});

However, on the next page if the user clicks back on their browser it goes back to the page before this one rather than the page with this code on (with Chrome/IE anyway). i.e. the page with the form on is missing in the browser history.

This is great, although I wondered is this something all modern browsers now do? I am looking for an answer that cites official sources such as from internet standards documents or from browser vendors that state the mechanism they have implemented.

This appears to only happen if I call the submit() function in the DOM ready or Window load events.

e.g. this code will show the form page in browser history after the page is clicked (back/forward):-

document.addEventListener('click', function () { document.forms[0].submit(); }, false);

the following snippets won't:-

document.addEventListener('DOMContentLoaded', function () { document.forms[0].submit(); }, false);
window.addEventListener('load', function() { document.forms[0].submit(); }, false);
window.onload = function () { document.forms[0].submit(); };
Solution

  • I've dealt with this before. I did not want the back button to take the user back to previous page. Using onbeforeunload solved the issue for me...

    But your issue is related to the following concepts

    • Browsing Context
    • Session History
    • Replacement Enabled (flag)

    1. A "Browsing Context" is an environment in which "Document" objects are presented to the user.

    2. The sequence of "Document"s in a "Browsing Context" is its "Session History". The "Session History" lists these "Document"s as flat entries.

    3. "Replacement Enabled" comes into effect when we propagate from one "Document" to another in the "Session History". If the traversal was initiated with "Replacement Enabled", the entry immediately before the specified entry (in the "Session History") is removed.

    Note A tab or window in a Web browser typically contains a browsing context, as does an iframe or frames in a frameset.

    Logically thinking, by calling any of these 

    document.addEventListener( 'DOMContentLoaded', function() {document.forms[0].submit();}, false );
window.addEventListener( 'load', function() {document.forms[0].submit();}, false );
window.onload = function() {document.forms[0].submit();};

    you are suggesting the browser to perform #3, because what those calls mean is that propagate away from the page as soon as it loads. Even to me that code is obviously :) asking to be cleared off from the "Session History".

    Further reading...