Checkbox/Radio Button Mastery

OldManRiver

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:

<?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

OldManRiver

All,

OK latest code is here:

<?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

Weedpacket

Your HTML is a long way from validating.
The name= attribute on <form> elements is deprecated.
Which means so is the "document.formname" construction in JavaScript.
I at least have never had trouble with MSIE and names of the form "foo[]". Good thing, too, given the number of times they're used and the number of people who use MSIE.
"foo[]" is a legitimate value for a name= attribute.
"1" is not a legitimate value for an id= attribute.
Nor are duplicate values for the id= attribute legitimate.
<font>?!