HTML checkbox onClick submit?

Discussion in 'JavaScript' started by PoPSiCLe, Mar 17, 2009.

  1. #1
    Hey.

    I have a webpage, with admin-login and such. This is all done in PHP, and works just fine.

    When an admin logs in, all edit-boxes and such becomes visible on the webpage, and sometimes these boxes becomes obtrusive, and it's a hassle to log out to see the page without the admin-boxes and then have to log in again to do more work.

    I would like a checkbox to become visible when an admin logs in. The checkbox would say something like:

    "Click here to hide all admin-tools" or something similar.

    When a user clicks this checkbox (default, unchecked) all admin tools will be hidden.

    So... what I need help with is how to do this part in javascript?

    I'm wondering as follows:

    *how do I make the checkbox "submit" the choice onClick?
    *how do I make the browser remember the choice spanning different pages?
    *what is the best way of achieving my goal? Just change a CSS-value, as to hide the admin-tools?

    Anyone have any mock-up code, code examples etc. that I can look at for help on this?
     
    PoPSiCLe, Mar 17, 2009 IP
  2. slash197

    slash197 Greenhorn

    Messages:
    91
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #2
    1)submit on click:
    <input type="checkbox" onclick="this.form.submit();">

    2)to remember choice on different pages use session
    3)yes , use css to show/hide things based on your checkbox value
     
    slash197, Mar 18, 2009 IP
  3. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #3
    Well... I've gotten a bit further, and have a working checkbox with a session attached to it - the problem now is: how do I get the checkbox to "turn off"?

    What I've got for now is the following code:
    
    <input type="checkbox" name="admincheck" value="1" onClick="this.form.submit();<?php if (isset($_POST['admincheck'])) { $_SESSION['check']=checked; } else { $_SESSION['check']; } ?>" checked="<?php echo $_SESSION['check']; ?>" />
    
    Code (markup):
    That makes the box stay checked through the pages, just as I want it to - but I would also like to be able to click it off - how do I do that? Obviously it doesn't help to check for a non-checked (or as in the else-statement, try to set a blank session-cookie) value, so...? any ideas?
     
    PoPSiCLe, Mar 18, 2009 IP
  4. alexpr07

    alexpr07 Active Member

    Messages:
    284
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    73
    #4
    Well, I'm not so familiar with PHP syntax so I'll just try to explain in plain english.
    First of all, you can add a button to each page:
    
    <input type="button" value="View/Hide Admin Tools" onclick="javascript:location='session_variable.php';">
    
    Code (markup):
    Now in session_variable.php write something like this:
    if session("hide_tools")="yes" then session("hide_tools")="no" else session("hide_tools")="yes"
    then redirect back to HTML_REFERRER

    On each page you can use stylesheet, basically if session("hide_tools") is "yes" then you use "hide_tools.css" else you use "display_tools.css"

    This should be not be difficult in PHP...
     
    alexpr07, Mar 18, 2009 IP
  5. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #5
    Okay - I get your point, but I'm at a loss to how to accomplish it, it seems. The example you give above, to me, makes no sense - I get that the javascript calls the php-file, of course, that is no problem, but I fail to see where the php-file gets its values from.

    The javascript-button does nothing, really - it does not set the session-value or anything (and from what I have read online, javascript can't set session values, only cookies?).

    A more or less "working" script (basically - how to make a single javascript-button change between a yes/no value, and preferably save that value to a php-session or a cookie (both will work just fine for me)).

    Can I ask for that? :) (Yeah, I know, javascript is like greek to me).
     
    PoPSiCLe, Mar 18, 2009 IP
  6. wrankin

    wrankin Peon

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Do it backwards.
     
    wrankin, Mar 18, 2009 IP
  7. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #7
    Again... makes no sense to me :)

    I got it working though, by abandoning JS alltogether, and just using php and a session-variable. It works like a charm, even though it might not be as "slick" as I'd like it to be :) It works, that's the important part.
     
    PoPSiCLe, Mar 19, 2009 IP
  8. slash197

    slash197 Greenhorn

    Messages:
    91
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #8
    I'm glad that you worked it out, even though not with my help.
     
    slash197, Mar 19, 2009 IP
  9. bestseo1

    bestseo1 Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    this one is working perfect:

    <?
    $office = $_POST['office'];
    ?>
    <html>
    <body>
    <?
    if ($office=='on') {
    echo "ON<br>";
    $office='off';
    $checked = "checked";
    }
    else {
    echo "OFF<br>";
    $office='on';
    $checked = "";
    }
    ?>
    <form name="checkbox" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
    <input type="checkbox" name="office" value="<? echo $office;?>" onClick='submit();' <? echo $checked;?>>
    </form>


    www . teranor . com
    if you have any questions you can find me on w w w . t e r a n o r . c o m .
    We do IT:
    - iphone applications
    - android applications
    - websites
    - SEO
     
    bestseo1, Jun 15, 2012 IP
  10. Rukbat

    Rukbat Well-Known Member

    Messages:
    2,908
    Likes Received:
    37
    Best Answers:
    51
    Trophy Points:
    125
    #10
    Did you ever think of putting all the admin tools in the same class and just use CSS to make them all display:hidden/display:visible (or display:none if you don't want them to take up space when they're not visible)?
     
    Rukbat, Jun 16, 2012 IP