show hidden div after page refresh

**adamschroeder** · May 8, 2011 17:16

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"> 
	<!-- 
	function showMe (it, box) { 
	  var vis = (box.checked) ? "block" : "none"; 
	  document.getElementById(it).style.display = vis;
	} 
	//--> 
</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>

**StarLion** · May 8, 2011 17:26

call showMe on load as well?

**adamschroeder** · May 8, 2011 17:32

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.

**StarLion** · May 8, 2011 19:17

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

**adamschroeder** · May 8, 2011 19:55

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

**Cups** · May 9, 2011 00:47

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.

**zbing** · May 9, 2011 04:08

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.

**adamschroeder** · May 9, 2011 06:54

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

**StarLion** · May 9, 2011 07:14

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

**Cups** · May 9, 2011 08:12

This stuff is harder than you imagined.

User Tag List

Thread: show hidden div after page refresh

Thread Tools

Display

show hidden div after page refresh

Bookmarks

Bookmarks

Posting Permissions