CODEWITHSUNDEEP
phpajaxhtmlforms
James Wilson
James Wilson

Reputation: 809

Any way to force the browser to remember form fields for hitting back button?

I have a weird issue. I've created a complicated quote form for our business that uses lots of ajax to return prices for products based on the users input.

I have 6 hidden fields like so:

As the users enters more information they build up how many products they want.

My issue is, once submitted, if I click "back" - productname1 is the only field populated, no matter how many other fields I populated via the ajax results.

I've checked my code and I cannot spot anything interfering. My question is... is the browser not remembering the state these fields get into and is just taking the user back to when the first product input was populated?

I am using "POST" method to get from the main form page to the second page.

Upvotes: 2

Views: 1750

Answers (1)

Wissam El-Kik
Wissam El-Kik

Reputation: 2525

There's no way you can force the browser to re-fill the input fields when the page is refreshed. Some users disabled the option to save the form data from within their browser options. Some developers are using autocomplete="off" on an input field to force the input field to be cleared when the page is refreshed.

I would suggest to use HTML5 localStorage to save the data when the user fills the form.

Keep in mind that HTML5 localStorage is only supported on modern browsers.

Here's a code using jQuery and HTML5 localStorage:

<input type="text" id="inputField" value="" />

<script type="text/javascript">
    $(document).ready(function(){
        $("#inputField").on("change", function(){
            var input_field_value = $(this).val();
            if(typeof(Storage) !== "undefined") {
                // localStorage is supported
                localStorage.setItem("my_input_field", input_field_value);
            } else {
                // No Web Storage support
            }
        });
    });
</script>

Upvotes: 3

Related Questions