Google-chrome – Chrome doesn’t cache hidden form field values for use in browser history

back-buttonbrowser-historygoogle-chromehidden-fields

I have a ASP.Net web form that contains both text box fields and hidden fields. The hidden field values are modified dynamically using client side JavaScript. Posting the form, inspecting the values and redirecting to another page is all working as expected.

However, when I use the browser back button to display the previous page then I expect so see that ALL form fields are still populated with the values that were posted.

In IE and Firefox this is the case for both text and hidden input fields.

In Chrome this is ONLY the case for text fields. The value of hidden fields is lost.

Is it true that Chrome never repopulates dynamically set hidden form field values when navigating the browser history?

I have put a small sample together to demonstrate the problem and can provide that if required. I wanted to first ask the question to see if this is well known behaviour and something I have to accept.

Best Answer

This problem could be solved using a small trick.

The problem is Form fields with Type=hidden with Dynamically set values are not handled properly by the Chrome Browser.

So the solution is to change the type of the field to text and use some other method to hide the visible text boxes. This could be achieved by surrounding all the text boxes carrying values intended to be hidden by a DEV tag pair and assigning the style as display: none

Then on the page you wont see the text boxes carrying hidden values and it will work properly with JavaScript of the browser.

BEFORE

<input type=hidden name=item_no value=00001>

AFTER

<div style="display: none">
    <input type=text name=item_no value=00001>
</div>

Related Solutions

Javascript – IE doesn’t find hidden-field values created with JS

Actually, Firefox even keeps current values when hitting refresh, while IE resets page to initial values on refresh. I guess this is same stuff. No standards describe what should actually happen here, so you should not rely on how the different browsers choose to handle this scenario.

Google-chrome – Removing input background colour for Chrome autocomplete

You can change input box styles as well as text styles inside input box:

Here you can use any color e.g. white, #DDD, rgba(102, 163, 177, 0.45).

But transparent won't work here.

/* Change the white to any color */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

Additionally, you can use this to change the text color:

/*Change text in autofill textbox*/
input:-webkit-autofill{
    -webkit-text-fill-color: yellow !important;
}

Advice: Don't use an excessive blur radius in the hundreds or thousands. This has no benefit and might put processor load on weaker mobile devices. (Also true for actual, outside shadows). For a normal input box of 20px height, 30px ‘blur radius’ will perfectly cover it.