Member Avatar for smoh

I'm having a hard time getting this to work!

I currently have 3 dropdowns. The 1st one will open up the 2nd 3rd ones. The 2nd one has just 1 value and the 3rd one has about 60 values the user can choose from. Then they fill in a text box and click submit. After that, it takes them to the results.php page which will give the results of their selections.

If the user clicks on the back button, it shows all of the default values, but box 2 and 3 (dependants) are missing. If they click submit again, its a whole mess. What I want to do is if the user clicks on the back button, all of the fields need to go back to the default selections.

Can anyone help out with this?

  • 2 Contributors
  • 2 Replies
  • 789 Views
  • 16 Hours Discussion Span
  • Latest Post Latest Post by smoh

Dani AI

Generated

Quick diagnosis: the browser is restoring the page from the back/forward cache (bfcache) when the user hits Back, so your window.onload handler does not always run and your dynamic dependents never get rebuilt. That is why IE/Firefox looked different from Chrome — modern Chromium and Safari often restore pages from memory for instant back/forward navigation. (web.dev)

Use the pageshow event and form.reset() (and re-run your dynamic-init) so the reset runs whether the page is loaded normally or restored from bfcache. Example pattern:

window.addEventListener('pageshow', function (evt) {
  var form = document.getElementById('myForm'); // adjust id
  if (evt.persisted) {
    form.reset();                    // restore HTML defaults
    initDependentSelects();          // re-run whatever builds box2/box3
  } else {
    initDependentSelects();          // normal first load init
  }
});

The pageshow event has a persisted flag you can use to detect a bfcache restore, and form.reset() restores controls to their original HTML defaults (note: it will not undo values set via setAttribute() or masked if a control is named reset). (developer.mozilla.org)

Troubleshooting tips: if your dependent selects are removed from the DOM on change, prefer hiding them and repopulating on init (or keep a template to re-insert) so reset() plus your init function produces a clean state. Forcing a reload (e.g. location.reload() or server Cache-Control tweaks) will work but harms UX — handle only when data is sensitive. Use Chrome DevTools Application -> Back/forward cache to see whether the page is being restored. (web.dev)

's server-side querystring idea can work, but rebuilding client-side on pageshow is simpler and more robust for Back-button restores.

Recommended Answers

All 2 Replies

Member Avatar for phpuser

Hi smoh ,

First let me know are you using button or link for submit ?

And for setting default data back to your main page , you must have to pass it with button of result.php page

Suppose , your first drop down set to 1 and you are on result.php page so on back button action you have to pass 1 as querystring value so by $_REQUEST method you can get back it and can set it as default value.

Member Avatar for smoh

I seemed to get it to work by using this script.

<script>
        // Reset form fields when page loads, in case the user is coming back from submission page
        window.onload = function() {
            var form = document.getElementById( 'myForm' );

            form.network.selectedIndex = 0;    // reset dropdown to first selection
            form.minutes.value = "";          // blank out text field
        }
    </script>

The form looks as you would expect it to. It works, in IE and Firefox, but doesn't reset in GoogleChrome. I'm guessing this would be the same for Safari? Does anyone have a fix to this?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.