www.webdeveloper.com
Results 1 to 9 of 9

Thread: Checklist help

  1. #1
    Join Date
    Jul 2010
    Posts
    5

    Checklist help

    Hello,
    I need help creating/setting up an online checklist that the user can return to with out losing their checks in a checkbox.
    Fang suggest Server-Side language would be the best option, since I'm a noob to this I need some help please.

    Basically i have a series of pictures (of comic book issues) with a checkbox next to it that people can check saying they own that issue, but when refreshing the page the checkboxes reset, I would like them to stay checked unless the user unchecks it.

  2. #2
    Join Date
    Mar 2010
    Posts
    2,803
    I agree a server-side solution is probably the best way. Another option you have is to use cookies to store the state of your checkboxes, but cookies have their disadvantages.

    If using a server side solution I would do something like this.

    Assuming your user has the option to navigate to a range of pages from the page with the checkboxes:

    1) Start a session on the page displaying the checkboxes.

    2) Every time a user clicks a checkbox, use AJAX to send a request to the server to update the status value of the session variable for that checkbox.

    3) On subsequent visits to the page with the checkboxes, set the default/initial checked status of each checkbox to the appropriate state according to the currrent value of the session variable for that checkbox.

  3. #3
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,270
    Don't use Ajax, do use cookies and do consult the forum associated with the scripting language that you plan to use. What do you have available? PHP?
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

  4. #4
    Join Date
    Jul 2010
    Posts
    5
    First off, thanks for the responses.

    I do have PHP available, I'm sorry but I'm very new to the development part of websites... I'm one of those Graphic Design guys who wants it to work one way but doesn't know how to get there.

    I use Adobe GoLive, and have a very limited knowledge of scripting. Here is a link to the site to get a better idea of what's needed.
    http://www.collectingpunisher.com

    -Rubberpik

  5. #5
    Join Date
    Mar 2010
    Posts
    2,803
    Although cookies is an option, as you are aware, I wouldn't use cookies because you most probably will have probelms with users who have cookies disabled or who clear them at some stage for any reason.

    I would prefer to do something like this:

    The page containing the checkboxes;

    home.php

    PHP Code:
    <?php
    session_start
    ();
    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <script type="text/javascript">
     
    window.onload=function() {
        //now assign the previously checked boxes
        <?php 
         
    foreach($_SESSION['chkBoxes'] as $k => $v) {
             if(
    $v == 1) {
          echo 
    'document.getElementById("'.$k.'").checked = true;';
             } else {
              echo 
    'document.getElementById("'.$k.'").checked = false;';
             }
     }
         
    ?>
    }
    </script>
     
    <script type="text/javascript">
    <!--
     
    function saveStatus(elem) {
     var xmlHttp = null;
     
        try{
            // Firefox, Opera 8.0+, Safari Browsers
            xmlHttp = new XMLHttpRequest();
        }
        catch (e){
            try{
                // IE Browsers v6+
                xmlHttp =new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch (e)
            {
                try{
                    // IE Browsers v5+
                    xmlHttp =new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch (e)
                {
                    alert("Your browser does not support AJAX!");
                }
            }
        }
        var stat = (elem.checked)? 1: 0;
        var url = "saveStatus.php?id="+elem.id+"&status="+stat;
        xmlHttp.open("GET",url,false);
        xmlHttp.send(null);
    } //end of ajax function
     
    //-->
    </script>
    </head>
    <body>
     
    <form action="test.php" method="post" />
    <div>
       <input type="checkbox" name="chkBox[]" id="chk_1" value="chk_1" onclick="saveStatus(this)"  /> chkbox 1<br />
       <input type="checkbox" name="chkBox[]" id="chk_2" value="chk_2" onclick="saveStatus(this)" /> chkbox 2<br />
       <input type="checkbox" name="chkBox[]" id="chk_3" value="chk_3" onclick="saveStatus(this)" /> chkbox 3<br />
       <input type="checkbox" name="chkBox[]" id="chk_4" value="chk_4" onclick="saveStatus(this)" /> chkbox 4<br />
    </div>
    </form>
     
    <div>
      <a href="test2.php">Go to to test2.php</a>
    </div>
     
    </body>
    </html>
    On page load, the checkbox statuses are set according to the values in the session array storing the status of each checkbox.

    When you click a checkbox, an ajax request is sent to saveStatus.php to update the status of the clicked checkbox in the session array storing the status of each checkbox.

    saveStatus.php

    PHP Code:
    <?php
    session_start
    ();
    $key $_GET['id'];
    $_SESSION['chkBoxes'][$key] = $_GET['status'];
    ?>
    test2.php

    just a test page to navigate away from home and back to test if the status of checkbox has been saved

    PHP Code:
    <?php
    session_start
    ();
    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    </head>
    <body>
    <div>
    <a href="home.php">Go to Home</a>
    </div>
    </body>
    </html>
    This all works on my local XAMPP server.
    Last edited by tirna; 08-01-2010 at 10:50 PM.

  6. #6
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,270
    Quote Originally Posted by tirna View Post
    This all works on my local XAMPP server.
    But only because the Session module is using cookies to save state. So your "example" relies upon two iffy technologies (JavaScript and cookies) and two server side scripts. My suggested method relies upon one iffy technology (cookies) and requires just one server side script.
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

  7. #7
    Join Date
    Mar 2010
    Posts
    2,803
    Quote Originally Posted by Charles View Post
    But only because the Session module is using cookies to save state. So your "example" relies upon two iffy technologies (JavaScript and cookies) and two server side scripts. My suggested method relies upon one iffy technology (cookies) and requires just one server side script.
    Thank you for your opnion

    I just posted how I would do it if I have a choice of methods and it works. I did not say it must be done this way. Given that, according to w3schools, in 2008 95&#37; of users had javascript enabled (and imo that figure is much higher now) non-javascript browsers is no longer an issue for me...but that is just me

  8. #8
    Join Date
    Jul 2010
    Posts
    5
    Tirna,
    Thanks for the post, it looks like that will work for me, Is there anwyay for it to automatically read all the checkboxes, i have several pages with 40 boxes (over 300 total) on them and don't want to have to code for each one if at all possible.

  9. #9
    Join Date
    Mar 2010
    Posts
    2,803
    no problem.

    You didn't mention if the id's for the 300+ checkboxes on the various pages are unique. I am assuming they are.

    All you need to do then is substitute the window.onload I posted earlier with

    PHP Code:
    window.onload=function() {
        //get all the checkboxes on this page and uncheck them
        var chkBoxes = new Array();
        var inpElems = document.getElementsByTagName("input");
        for(var i=0; i < inpElems.length; i=i+1) {
         if(inpElems[i].type == "checkbox")  {
             chkBoxes.push(inpElems[i]);
                inpElems[i].checked = false;  //uncheck all the boxes.
            }
        }

        //transfer the session array storing the checkbox status to a javascript associative array
        var storedStatus = new Array();
        <?php 
        
    foreach($_SESSION['chkBoxes'] as $k => $v) {
              echo 
    'storedStatus["'.$k.'"] = '.$v.';';   
        }
        
    ?>

        //now set checked=true to the appropriate boxes
        for(var i=0; i < chkBoxes.length; i=i+1) {
            for(var k in storedStatus) {
                if(chkBoxes[i].id == k && storedStatus[k] == 1) {
                 document.getElementById(k).checked = true;
                    break;
                }
            }
        }
    }
    on each page where you have the checkboxes or use php's include() to inlude the code in each page.

    I have tested the above code on my XAMPP for 1 page with text boxes and so it should work for multiple pages assuming all 300+ checkboxes have a unique id.
    Last edited by tirna; 08-03-2010 at 08:24 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles