0

I have a form when on submit it will run two on-click events the first to redirect the window location to the new page and then the second to open the hidden div as below.

The issue is that it will load the new div in the source code and change it's status to display block but when it refreshes for the window location the function showDiv() is then hidden again. I'm sure there is a way to merge them both into one but I'm struggling.

function SetUpRedirect(destination)
{
    setTimeout("window.location=\'/?page=4\'",1000); 
    return true;
}
function showDiv() {
   document.getElementById('thanks').style.display = "block";
}
Bradley
  • 79
  • 7

2 Answers2

0

If I understand you right, the problem here is that you refresh the page. Once you refresh the browser loads a new DOM and forgets all about the old one and all the modifications you made to it. Changes you do to the DOM with JavaScript are not persistent over page loads.

So, how can you get around this? I can think of three options:

Alt 1. Use some kind of server side scripting, i.e. PHP, and pass the state of the div in the URL:

window.location = "/?page=4&display=block";

Then in the PHP (or whatever language you use), you need to read the value of display and handle it appropriately.

Alt 2. Set a cookie with JavaScript to signal that the div should be displayed, and when the page loads check if the cookie is present and adjust the display property of the div appropriately. You can read more about cookies in JavaScript here.

Alt 3. Design your page in such a way that a page load is not needed (for instance submitting the form with AJAX). This could require a major redesign, though.

Anders
  • 8,307
  • 9
  • 56
  • 88
0

This might help you with your problem. Since window.location will just reload the page and reset all the styles to the original form: How can I make a redirect page using jquery

Community
  • 1
  • 1
Jelmer
  • 949
  • 3
  • 10
  • 23