show hidden div after page refresh

Printable View

May 8, 2011, 17:16
adamschroeder

show hidden div after page refresh
Hi Guys,
I'm not sure if I can do this in php or javascript, but I have a problem.
When the user clicks on checkbox, the hidden div (calendar) shows up. However, after he submits and page reloads- due to an empty required field- the checkbox stays ticked but the calendar dissapears. Which I think is because javascript goes back to default stage. Although the box appears ticked, I have to untick and tick again for calendar to reshow.

Is there a way I can make the calendar show up once the page refreshes?

Any help appreciated,
Thank you.
Code JavaScript:

<script type="text/javascript">  </script>
HTML Code:

<form action="register-civ.php" method="post" name="go"> <input type="checkbox" name='c2' value="check me 2" onclick="showMe('div1', this)" <?php echo $name_text = isset($_REQUEST['c2']) ? 'checked':'';?> /> Specific date<p/> <div id="div1" style="display:none"> a calendar I have for the user </div> <input name="submit" value="Submit" type="submit" /></form>
May 8, 2011, 17:26
StarLion

call showMe on load as well?
May 8, 2011, 17:32
adamschroeder

I'm sorry but I don't really understand your question StarLion.
The page reloads to self, so the "onclick="showMe('div1', this)"
" is still there, yes.
May 8, 2011, 19:17
StarLion

My point is to run the javascript on the body's onLoad event.
May 8, 2011, 19:55
adamschroeder

I'm new to javascript so I have no idea how to translate your suggestion into practice.
May 9, 2011, 00:47
Cups

Display the cal div by default. On page load call a function which checks the state of your select box, if unchecked, hide the calendar division.
May 9, 2011, 04:08
zbing
Create a function to check the checkbox state and act accordingly:
Code JavaScript:

function checkMyBox(trigger,toggled){ var mcb = document.getElementById(trigger); var cal = document.getElementById(toggled); if(mcb.checked == false){ cal.style.display = 'none'; } else { cal.style.display = 'block'; } };
Use the body "onload" event to check initial state and the checkbox onclick event to react to user input.

HTML Code:

<body onload="checkMyBox('c2','div1')"> <form action="register-civ.php" method="post" name="go"> <input type="checkbox" name='c2' id="c2" value="check me 2" onclick="checkMyBox('c2','div1');"> <div id="div1">a calendar I have for the user</div> <input name="submit" value="Submit" type="submit"> </form> </body>

Also, as Cups suggested, the default state for the calendar should be visible, so that users without javascript can still use the form.
May 9, 2011, 06:54
adamschroeder
Thank you Zbing, I used your code and it obviously worked. And the default state of the calendar is always visible like you and Cups suggested.

As far as I understand: if mcb is not triggered than cal is not displayed, or else it's 'blocked'. What does 'block' mean. Does that mean 'displayed' in javascript?

And why can't PHP do all this? Why do we need javascript?
I thought the whole idea of a programming language is that it's all- encompassing, which means it should do as much as possible?!

Although you might frown or chuckle at my ignorance, would it be extremely difficult to allow PHP to verify state of checkboxes and show hidden divs?
Code JavaScript:

function checkMyBox(trigger,toggled){ var mcb = document.getElementById(trigger); var cal = document.getElementById(toggled); if(mcb.checked == false){ cal.style.display = 'none'; } else { cal.style.display = 'block'; } };
May 9, 2011, 07:14
StarLion

'block' means "Start a new line before me, and a new line after me. Make me a block by myself." (In contrast to Inline)

As far as needing Javascript....

Server-Side vs Client Side.

PHP operates on the server side. Once the code goes to the browser, PHP no longer has any control over it.

Javascript operates on the client side. It has no access to the server information, but operates inside the browser (with varying degrees of success).
May 9, 2011, 08:12
Cups

This stuff is harder than you imagined.