Dynamically created input element not shown after user hit Back button

Question

I create dynamic input elements with this code:

<div id="add">Add row</div>
<script>
$(document).on('click', '#add', function() {
    var number = $('div[id^="row_"]').length + 1;
    $('#add').before('<div id="row_'+number+'"><label for="answer_'+number+'">Question #'+number+'</label> <input id="answer_'+number+'" name="answer_'+number+'" type="text"></div>');
});
</script>

If I send the form and hit the BACK button all other input elements show the text of the user, except the dynamically created input fields. The fields itself don't show up.

I tried to put the user's text into a hidden field via jQuery but it is also disappeared after the BACK button.

How can I show the previous state of the whole form to the user after they hit the BACK button?

SOLUTION:

If I put the user's text into a type="text" element with style="display:none", I have the text after the BACK button and I can recreate the dynamic fields with the user's text.

Thanks everyone for the suggestions, hopefully this will help others who come across this problem.

Answer 1

Upon POSTing the form, the browser navigates to the location (url) of your <form>'s action. When you then go back, it will reload your page and the state of all scripts is reset because the page reloaded.

If you want to keep that state, you need to send the form via AJAX. You can do that with jQuery as well (see here). Then you'll not even need to hit the back button.

Answer 2

I think maybe I fully understand your problem now after chatting, I hope, anyway! --

Browser Code Cache

When you download a page in Chrome or your browser, it is stored in your local browser cache. But it stores the commands, not the state, of the page. So, when you go back, the HTML is rerendered per the HTML and CSS commands, and the JS is re-executed. I found some information from v8.com, the official dev blog for Chrome...

When the JS file is requested a second time (i.e. a warm run), Chrome takes the file from the browser cache and once again gives it to V8 to compile. This time, however, the compiled code is serialized, and is attached to the cached script file as metadata.

So, you see, it recompiles and reruns the JavaScript when you hit the back button, but it does not restore the previous elements generated from the last JavaScript running, or the events that the user committed to triggered that state.

Source: V8.com: Code caching for JavaScript developers

Back-Forward Cache (BFCache)/Browser Form Cache

Don't mix this up with cached form data, which is completely different. Chrome will cache your old form data with the back button automatically, but that is not part of the code caching feature. Check out this similar question for that problem: Clear all fields in a form upon going back with browser back button

Google 2019, Feb Update: This appears to be something that should be fixed at some time within the near future. Source: Exploring a back/forward cache for Chrome.

Answer 3

Here is a solution:

I tried to put the user's text into a type="hidden" element via jQuery, and it has been lost, after the BACK button, however if I put the answer into a type="text" element with style="display:none", I have the user's text after the BACK button and I can recreate the dynamic fields with the user's text.

Thanks everyone for the suggestions, hopefully this will help others who come across this problem.