Show hidden div after page refresh

PHP
1

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.


<script type="text/javascript">
	<!--
	function showMe (it, box) {
	  var vis = (box.checked) ? "block" : "none";
	  document.getElementById(it).style.display = vis;
	}
	//-->
</script>



<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>
2

call showMe on load as well?

3

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.

4

My point is to run the javascript on the body’s onLoad event.

5

I’m new to javascript so I have no idea how to translate your suggestion into practice.

6

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.

7

Create a function to check the checkbox state and act accordingly:


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.


<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.

8

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?


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';        }    };
9

‘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).

10

This stuff is harder than you imagined.