#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2005
    Posts
    126
    Rep Power
    14

    Checkbox/Radio Button Mastery


    All,

    Because of the problems with MSIE, it took me over 3 days to master/perfect the code to properly process radio buttons and checkboxes. The other day was doing some clean up on my machine and lost the file. I have rebuilt most, but still having some problems and this is significant enough I intend to put into online wiki/howto when done, so it doesn't get lost again.

    The main problems run around two (2) main issues:
    • Checkboxes according to all the PHP manuals and docs must be declared with $var[] array notation, which does not work in MSIE causing errors from HTML validators, which basically must be perfect or MSIE will not run. MSIE6 has more problems with the code than MSIE7 but the handling for all this is significant enough it needs to be a shared solution.
    • JavaScript that most like to use for this do not call or pass their vars back to the PHP code correctly and just getting document.formname.submit() to work inside of the javascript, to recall the current page for processing is not an easy task to accomplish, again especially in MSIE.

    Therefore I am posting the code I currently have to gain assistance in getting this right again so we can all get this posted online as example for all the noobie and junior coders to gain insight from. Ideally I think this should get posted back into the PHP online documents so other can find it right off and not spend needless hour hashing out this complicated problem.

    Here is my code so far:

    Code:
    <?php
       $chk_stat = isset($_POST['one']) ? 'checked="checked"' : '';
       if (!empty($chk_stat)) {
          $dsp_lin = "Box Checked!";
       } else {
          $dsp_lin = "Box UnChecked!";
       }
       $chk_mult = isset($_POST['two']);
       if (!empty($chk_mult)) {
          $chk_mult = 1;
       }
       switch ($chk_mult) {
          case 1:
          	 $dsp_str = "Box One is Checked";
             $chk_vl1 = 'checked="checked"';
             $chk_vl2 = '';
             $chk_vl3 = '';
             break;
          case 2:
          	 $dsp_str = "Box Two is Checked";
             $chk_vl1 = '';
             $chk_vl2 = 'checked="checked"';
             $chk_vl3 = '';
             break;
          case 3:
          	 $dsp_str = "Box Three is Checked";
             $chk_vl1 = '';
             $chk_vl2 = '';
             $chk_vl3 = 'checked="checked"';
       }
       $rad_stat = isset($_POST['rd1']) ? 'checked="checked"' : '';
       if (!empty($rad_stat)) {
          $rad_lin = "Box Checked!";
       } else {
          $rad_lin = "Box UnChecked!";
       }
       $rad_mult = isset($_POST['rd2']);
       if (!empty($rad_mult)) {
          $rad_mult = 1;
       }
       switch ($rad_mult) {
          case 1:
          	 $rad_str = "Button One is Checked";
             $rad_vl1 = 'checked="checked"';
             $rad_vl2 = '';
             $rad_vl3 = '';
             break;
          case 2:
          	 $rad_str = "Button Two is Checked";
             $rad_vl1 = '';
             $rad_vl2 = 'checked="checked"';
             $rad_vl3 = '';
             break;
          case 3:
          	 $rad_str = "Button Three is Checked";
             $rad_vl1 = '';
             $rad_vl2 = '';
             $rad_vl3 = 'checked="checked"';
       }
    ?>
    
    <html>
    <head>
       <script>
          function checkedAll (id, checked) {
             var el = document.getElementById(id);
             for (var i = 0; i < el.elements.length; i++) {
                el.elements[i].checked = checked;
             }
          }
          // document.form['oneclick'].submit();
       </script>
    </head>
    
    <body>
    
    <!-- PHP section -->
    <form name=oneclick id="form_one" method=post action="<?php echo $_SERVER['PHP_SELF']; ?>" >
       <font size='+3' color='blue'><b>PHP Section</b></font><br>
       <p>
       <table border='0' cellspacing='0' cellpading='0'>
          <td>
    	   <font size='+2'><b>Check Boxes</b></font><br>
    	   <input type="checkbox" name="one" onclick="document.oneclick.submit()"
    	      <?php echo $chk_stat; ?> />
    	   <font size='+1'><b>Single Toggling Checkbox</b></font><br>
    	   <p>
    	   <?php echo "<p> $dsp_lin"; ?>
    	   <p>
    	   <font size='+1'><b>Multiple Checkboxes</b></font><br>
    	   <p>
    	   <input type="checkbox" name="two" id='1' value='1' onclick="document.oneclick.submit()"
    	      <?php echo $chk_vl1; ?> /> Checkbox One&nbsp;&nbsp;&nbsp;
    	   <input type="checkbox" name="two" id=2 value=2 onclick="document.oneclick.submit()"
    	      <?php echo $chk_vl2; ?> /> Checkbox Two&nbsp;&nbsp;&nbsp;
    	   <input type="checkbox" name="two" id=3 value=3 onclick="document.oneclick.submit()"
    	      <?php echo $chk_vl3; ?> /> Checkbox Three
    	   <p>
    	   <?php echo "<p> $dsp_str"; ?>
          </td>
          <td width='100'>&nbsp;</td>
          <td>
    	   <font size='+2'><b>Radio Buttons</b></font><br>
    	   <input type="radio" name="rd1" onclick="document.oneclick.submit()"
    	      <?php echo $rad_stat; ?> />
    	   <font size='+1'><b>Single Toggling Button</b></font><br>
    	   <p>
    	   <?php echo "<p> $rad_lin"; ?>
    	   <p>
    	   <font size='+1'><b>Multiple Buttons</b></font><br>
    	   <p>
    	   <input type="radio" name="rd2" id='1' value='1' onclick="document.oneclick.submit()"
    	      <?php echo $rad_vl1; ?> /> Button One&nbsp;&nbsp;&nbsp;
    	   <input type="radio" name="rd2" id=2 value=2 onclick="document.oneclick.submit()"
    	      <?php echo $rad_vl2; ?> /> Button Two&nbsp;&nbsp;&nbsp;
    	   <input type="radio" name="rd2" id=3 value=3 onclick="document.oneclick.submit()"
    	      <?php echo $rad_vl3; ?> /> Button Three
    	   <p>
    	   <?php echo "<p> $rad_str"; ?>
          </td>
          </tr>
       </table>
    </form>
    
    <p>
    <hr width='100%' align='center'>
    
    <!-- JavaScript section -->
    <form name='twoclick' id="form_two" method='post' action="<?php echo $_SERVER['PHP_SELF']; ?>" >
       <font size='+3' color='blue'><b>JavaScript Section</b></font><br>
       <p>
       <table border='0' cellspacing='0' cellpading='0'>
          <td>
    	   <font size='+2'><b>Check Boxes</b></font><br>
    	   <input type="checkbox" name="cb1" id='1' onclick="javascript:toggleAll('form_two', cb1)">
    	   <font size='+1'><b>Single Toggling Checkbox</b></font><br>
    	   <p>
    	   <?php echo "<p> $jav_lin"; ?>
    	   <p>
    	   <font size='+1'><b>Multiple Checkboxes</b></font><br>
    	   <p>
    	   <input type="checkbox" name="cb2" id='1' onclick="javascript:toggleItem('form_two', cb2)">
    	      Checkbox One&nbsp;&nbsp;&nbsp;
    	   <input type="checkbox" name="cb2" id=2 onclick="javascript:toggleIten('form_two', cb2)">
    	      Checkbox Two&nbsp;&nbsp;&nbsp;
    	   <input type="checkbox" name="cb2" id=3 onclick="javascript:toggleItem('form_two', cb2)">
    	      Checkbox Three
    	   <p>
    	   <?php echo "<p> $jav_str"; ?>
          </td>
          <td width='100'>&nbsp;</td>
          <td>
    	   <font size='+2'><b>Radio Buttons</b></font><br>
    	   <input type="radio" name="jv1" onclick="javascript:toggleAll('form_two', jv1)">
    	   <font size='+1'><b>Single Toggling Button</b></font><br>
    	   <p>
    	   <?php echo "<p> $jav_out"; ?>
    	   <p>
    	   <font size='+1'><b>Multiple Buttons</b></font><br>
    	   <p>
    	   <input type="radio" name="jv2" id='1' value='1' onclick="javascript:toggleItem('form_two', jv2)">
    	      Button One&nbsp;&nbsp;&nbsp;
    	   <input type="radio" name="jv2" id=2 value=2 onclick="javascript:toggleItem('form_two', jv2)">
    	      Button Two&nbsp;&nbsp;&nbsp;
    	   <input type="radio" name="jv2" id=2 value=2 onclick="javascript:toggleItem('form_two', jv2)">
    	      Button Three
    	   <p>
    	   <?php echo "<p> $jav_sel"; ?>
          </td>
          </tr>
          <tr>
          <td>
    	   <font size=+2><b>Select/Unselect All</b></font><br>
    	   <p>
    	   <input type="checkbox" name="foo" id='1'/>
    	   <input type="checkbox" name="bar" id=2/>
    	   <a href="javascript:checkedAll('form_two', true)">all</a>
    	   <a href="javascript:checkedAll('form_two', false)">none</a>
          </td>
          </tr>
       </table>
    </form>
    </body>
    
    </html>
    Downloading and running you can see the obvious problems in the current code. All help here in getting this right (again) is appreciated.

    Thanks!

    OMR
    Last edited by OldManRiver; January 16th, 2009 at 05:58 PM.
  2. #2
  3. No Profile Picture
    Lost in code
    Devshed Supreme Being (6500+ posts)

    Join Date
    Dec 2004
    Posts
    8,304
    Rep Power
    7175
    I'm honestly confused about what is so complicated...

    # Checkboxes according to all the PHP manuals and docs must be declared with $var[] array notation, which does not work in MSIE causing errors from HTML validators, which basically must be perfect or MSIE will not run. MSIE6 has more problems with the code than MSIE7 but the handling for all this is significant enough it needs to be a shared solution.
    I'm assuming you mean the name attribute when you say "declared with $var[] array notation". Checkboxes do not need to use an array for their name, and even using brackets inside the name, it should validate fine and work in all browsers. If you're actually putting the $ in though you might run into problems.

    Use the ID attribute to access elements in javascript instead of name. Don't use brackets in the ID.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2005
    Posts
    126
    Rep Power
    14

    Checkbox/Radio Button Mastery: Latest Code


    All,

    OK latest code is here:

    Code:
    <?php
       $show_me = 0;
       if ($show_me==1) {
          foreach ($_POST as $key => $val) {
             echo "K=> $key V=> $val <br>";
          }
       }
       if (!isset($_POST['one'])) {
          $chk_stat = 'checked="checked"';
       }
       $chk_stat = (isset($_POST['one'])) ? 'checked="checked"' : '';
       $dsp_lin  = (isset($_POST['one'])) ? 'Box Checked!' : 'Box UnChecked!';
       if (!isset($_POST['two'])) {
          $chk_vl1 = 'checked="checked"';
       }
       if (isset($_POST['two'])) {
          foreach($_POST as $key => $val) {
          	 if ($key=='two') {
    //            echo "K=> $key V=> $val <br>";
                $chkVar = 'chk_vl'.$val;
                $$chkVar = 'checked="checked"';
                $dsp_ary[] = "Checkbox $val is checked";
    //      	    echo "F=> $chkVar V=> $$chkVar D=> $dsp_ary <br>";
             }
          }
          $dsp_str = implode(', ', $dsp_ary);
       }
       if (!isset($_POST['rd1'])) {
          $rad_stat = 'checked="checked"';
       }
       $rad_stat = (isset($_POST['rd1'])) ? 'checked="checked"' : '';
       $rad_lin  = (isset($_POST['rd1'])) ? 'Button Checked!' : 'Button UnChecked!';
       if (!isset($_POST['rd2'])) {
          $rad_vl1 = 'checked="checked"';
       }
       if (isset($_POST['rd2'])) {
          foreach($_POST as $key => $val) {
          	 if ($key=='rd2') {
    //            echo "K=> $key V=> $val <br>";
                $radVar = 'rad_vl'.$val;
                $$radVar = 'checked="checked"';
                $rad_ary[] = "Button $val is checked";
    //      	    echo "F=> $radVar V=> $$radVar D=> $rad_ary <br>";
             }
          }
          $rad_str = implode(', ', $rad_ary);
       }
    ?>
    
    <html>
    <head>
       <script>
          function checkedAll (id, checked) {
             var el = document.getElementById(id);
             for (var i = 0; i < el.elements.length; i++) {
                el.elements[i].checked = checked;
             }
          }
          // document.form['oneclick'].submit();
       </script>
    </head>
    
    <body>
    
    <!-- PHP section -->
    <form name=oneclick id="form_one" method=post action="<?php echo $_SERVER['PHP_SELF']; ?>" >
       <font size='+3' color='blue'><b>PHP Section</b></font><br>
       <p>
       <table border='0' cellspacing='0' cellpading='0'>
          <td>
    	   <font size='+2'><b>Check Boxes</b></font><br>
    	   <input type="checkbox" name="one" onclick="document.oneclick.submit()" <?php echo $chk_stat; ?> />
    	   <font size='+1'><b>Single Toggling Checkbox</b></font><br>
    	   <p>
    	   <?php echo "<p> $dsp_lin"; ?>
    	   <p>
    	   <font size='+1'><b>Multiple Checkboxes</b></font><br>
    	   <p>
    	   <input type="checkbox" name="two" id='1' value='1' onclick="document.oneclick.submit()" <?php echo $chk_vl1; ?> />
    	      Checkbox One&nbsp;&nbsp;&nbsp;
    	   <input type="checkbox" name="two" id='2' value='2' onclick="document.oneclick.submit()" <?php echo $chk_vl2; ?> />
    	      Checkbox Two&nbsp;&nbsp;&nbsp;
    	   <input type="checkbox" name="two" id='3' value='3' onclick="document.oneclick.submit()" <?php echo $chk_vl3; ?> />
    	      Checkbox Three
    	   <p>
    	   <?php echo "<p> $dsp_str"; ?>
          </td>
          <td width='100'>&nbsp;</td>
          <td>
    	   <font size='+2'><b>Radio Buttons</b></font><br>
    	   <input type="radio" name="rd1" onclick="document.oneclick.submit()" <?php echo $rad_stat; ?> />
    	   <font size='+1'><b>Single Toggling Button</b></font><br>
    	   <p>
    	   <?php echo "<p> $rad_lin"; ?>
    	   <p>
    	   <font size='+1'><b>Multiple Buttons</b></font><br>
    	   <p>
    	   <input type="radio" name="rd2" id='1' value='1' onclick="document.oneclick.submit()" <?php echo $rad_vl1; ?> />
    	      Button One&nbsp;&nbsp;&nbsp;
    	   <input type="radio" name="rd2" id='2' value='2' onclick="document.oneclick.submit()" <?php echo $rad_vl2; ?> />
    	      Button Two&nbsp;&nbsp;&nbsp;
    	   <input type="radio" name="rd2" id='3' value='3' onclick="document.oneclick.submit()" <?php echo $rad_vl3; ?> />
    	      Button Three
    	   <p>
    	   <?php echo "<p> $rad_str"; ?>
          </td>
          </tr>
       </table>
    </form>
    
    <p>
    <hr width='100%' align='center'>
    
    <!-- JavaScript section -->
    <form name='twoclick' id="form_two" method='post' action="<?php echo $_SERVER['PHP_SELF']; ?>" >
       <font size='+3' color='blue'><b>JavaScript Section</b></font><br>
       <p>
       <table border='0' cellspacing='0' cellpading='0'>
          <td>
    	   <font size='+2'><b>Check Boxes</b></font><br>
    	   <input type="checkbox" name="cb1" id='1' onclick="javascript:toggleAll('form_two', cb1)">
    	   <font size='+1'><b>Single Toggling Checkbox</b></font><br>
    	   <p>
    	   <?php echo "<p> $jav_lin"; ?>
    	   <p>
    	   <font size='+1'><b>Multiple Checkboxes</b></font><br>
    	   <p>
    	   <input type="checkbox" name="cb2" id='1' onclick="javascript:toggleItem('form_two', cb2)">
    	      Checkbox One&nbsp;&nbsp;&nbsp;
    	   <input type="checkbox" name="cb2" id='2' onclick="javascript:toggleItem('form_two', cb2)">
    	      Checkbox Two&nbsp;&nbsp;&nbsp;
    	   <input type="checkbox" name="cb2" id='3' onclick="javascript:toggleItem('form_two', cb2)">
    	      Checkbox Three
    	   <p>
    	   <?php echo "<p> $jav_str"; ?>
          </td>
          <td width='100'>&nbsp;</td>
          <td>
    	   <font size='+2'><b>Radio Buttons</b></font><br>
    	   <input type="radio" name="jv1" onclick="javascript:toggleAll('form_two', jv1)">
    	   <font size='+1'><b>Single Toggling Button</b></font><br>
    	   <p>
    	   <?php echo "<p> $jav_out"; ?>
    	   <p>
    	   <font size='+1'><b>Multiple Buttons</b></font><br>
    	   <p>
    	   <input type="radio" name="jv2" id='1' onclick="javascript:toggleItem('form_two', jv2)">
    	      Button One&nbsp;&nbsp;&nbsp;
    	   <input type="radio" name="jv2" id='2' onclick="javascript:toggleItem('form_two', jv2)">
    	      Button Two&nbsp;&nbsp;&nbsp;
    	   <input type="radio" name="jv2" id='3' onclick="javascript:toggleItem('form_two', jv2)">
    	      Button Three
    	   <p>
    	   <?php echo "<p> $jav_sel"; ?>
          </td>
          </tr>
          <tr>
          <td>
    	   <font size=+2><b>Select/Unselect All</b></font><br>
    	   <p>
    	   <input type="checkbox" name="foo" id='1'/>
    	   <input type="checkbox" name="bar" id=2/>
    	   <a href="javascript:checkedAll('form_two', true)">all</a>
    	   <a href="javascript:checkedAll('form_two', false)">none</a>
          </td>
          </tr>
       </table>
    </form>
    </body>
    
    </html>
    It has the following errors or incorrect functioning:

    Single Boxes/Buttons
    • Boxes/Buttons do not init as checked or on,
    • Radio Button will not uncheck.

    Multi Boxes/Buttons
    • Check boxes click up in value but will not decrement unless highest box value is checked.

    The single checkbox and the multi-radio buttons work fine.

    Working on these problems. Think a hidden field is needed to fix the single buttons inits. May also need that to correct down checking the multi checkbox collection.

    See not near as easy a problem to solve as many think.

    OMR

IMN logo majestic logo threadwatch logo seochat tools logo