SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast adamschroeder's Avatar
    Join Date
    Mar 2011
    Location
    World
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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"> 
    	<!-- 
    	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>

  2. #2
    Keeper of the SFL StarLion's Avatar
    Join Date
    Feb 2006
    Location
    Atlanta, GA, USA
    Posts
    3,748
    Mentioned
    71 Post(s)
    Tagged
    0 Thread(s)
    call showMe on load as well?

  3. #3
    SitePoint Enthusiast adamschroeder's Avatar
    Join Date
    Mar 2011
    Location
    World
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    Keeper of the SFL StarLion's Avatar
    Join Date
    Feb 2006
    Location
    Atlanta, GA, USA
    Posts
    3,748
    Mentioned
    71 Post(s)
    Tagged
    0 Thread(s)
    My point is to run the javascript on the body's onLoad event.

  5. #5
    SitePoint Enthusiast adamschroeder's Avatar
    Join Date
    Mar 2011
    Location
    World
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm new to javascript so I have no idea how to translate your suggestion into practice.

  6. #6
    SitePoint Wizard silver trophybronze trophy Cups's Avatar
    Join Date
    Oct 2006
    Location
    France, deep rural.
    Posts
    6,869
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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. #7
    SitePoint Zealot zbing's Avatar
    Join Date
    Jun 2002
    Location
    Lisbon, Portugal
    Posts
    159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    zbing

  8. #8
    SitePoint Enthusiast adamschroeder's Avatar
    Join Date
    Mar 2011
    Location
    World
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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';        }    };

  9. #9
    Keeper of the SFL StarLion's Avatar
    Join Date
    Feb 2006
    Location
    Atlanta, GA, USA
    Posts
    3,748
    Mentioned
    71 Post(s)
    Tagged
    0 Thread(s)
    '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. #10
    SitePoint Wizard silver trophybronze trophy Cups's Avatar
    Join Date
    Oct 2006
    Location
    France, deep rural.
    Posts
    6,869
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    This stuff is harder than you imagined.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •