how can I keep "checked" boxes within div to default to "unchecked" if div is"hidden"

Question

websurfer 0 Junior Poster in Training

15 Years Ago

Hi, all:

I got a form where some checbox fields will hide or show as user clicks specific choices. Problem is, if one mistakenly checks one of these checkboxes and then hides it, it still does retain the checked value, even if hidden. How can I make sure that the checkbox defaults back to "unchecked" if in fact is "hidden"??

Here's my javascript code:

<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'none')
          e.style.display = 'block';
       else
          e.style.display = 'none';
    }
//-->
</script>

<script type="text/javascript">
<!--
    function toggle_visibilityNone(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'none';
    }
//-->
</script>



<script type="text/javascript">
<!--
    function toggle_visibilityYes(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'none')
          e.style.display = 'block';
       else
          e.style.display = 'block';
    }
//-->
</script>

and here is my basic form-html code:

<form action="<?php echo $editFormAction; ?>" id="insertForm" name="insertForm" method="POST">
  <p>&nbsp;</p>
  <table width="375" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
      <td colspan="3" align="center"><img src="../images/nc_title_logo.gif" width="342" height="54" /></td>
    </tr>
    <tr>
      <td colspan="3">&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td colspan="2" align="center">&nbsp;</td>
    </tr>
    <tr>
      <td width="314"><span class="style5">No Order completed in this call </span></td>
      <td width="61" colspan="2" align="center">
      <input name="noorder" type="checkbox" id="noorder" value="checkbox" onclick="toggle_visibility('box');" />     </td>
    </tr>
    <tr>
      <td colspan="3">&nbsp;</td>
    </tr>
    <tr>
      <td colspan="3"><div id="box">
        <table width="100%" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td width="100%"><table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr class="color-table">
                <td >&nbsp;  </td>
                <td align="left">&nbsp;</td>
                <td align="left">&nbsp;</td>
              </tr>
              <tr class="color-table">
                <td >&nbsp;</td>
                <td align="left"><strong>YES</strong></td>
                <td align="left"><strong>NO</strong></td>
              </tr>
              <tr>
                <td width="80%" class="color-table">&nbsp;&nbsp;1) Did you attempt an Upsell?</td>
                <td class="color-table"><input type="radio" name="upsell" value="Y" onclick="toggle_visibilityYes('upsellBox');"/></td>
                <td align="center" class="color-table"><input type="radio" name="upsell" value="N" onclick="toggle_visibilityNone('upsellBox');"/></td>
              </tr>
            </table></td>
          </tr>
          <tr>
            <td class="color-table">&nbsp;</td>
            </tr>
          <tr>
            <td class="color-table"><div id="upsellBox">
              <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td width="80%" class="color-table">&nbsp;&nbsp;2) Was the Upsell successful? </td>
                  <td class="color-table"><input type="radio" name="upsellStatus" value="Y" /></td>
                  <td align="center" class="color-table"><input type="radio" name="upsellStatus" value="N" /></td>
                </tr>
                <tr>
                  <td class="color-table">&nbsp;</td>
                  <td class="color-table">&nbsp;</td>
                  <td align="center" class="color-table">&nbsp;</td>
                </tr>
              </table>
            </div></td>
            </tr>
          <tr>
            <td class="color-table-2">&nbsp;</td>
            </tr>
          <tr>
            <td class="color-table-2"><table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td class="color-table-2">&nbsp;</td>
                <td align="left" class="color-table-2"><strong>YES</strong></td>
                <td colspan="2" align="left" class="color-table-2"><strong>NO</strong></td>
              </tr>
              <tr>
                <td width="80%" class="color-table-2">&nbsp;&nbsp;3) Did you attempt a Cross-Sell? </td>
                <td class="color-table-2"><input type="radio" name="cross" value="Y" onclick="toggle_visibilityYes('crossBox');"/></td>
                <td colspan="2" align="center" class="color-table-2"><input type="radio" name="cross" value="N" onclick="toggle_visibilityNone('crossBox');"/></td>
                </tr>
            </table></td>
            </tr>
          <tr>
            <td class="color-table-2">&nbsp;</td>
          </tr>
          <tr>
            <td><div id="crossBox">
              <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td width="80%" class="color-table-2">&nbsp;&nbsp;4) Was the Cross-Sell successful? </td>
                  <td class="color-table-2"><input type="radio" name="crossStatus" value="Y" /></td>
                  <td align="center" class="color-table-2"><input type="radio" name="crossStatus" value="N" /></td>
                </tr>
                <tr>
                  <td class="color-table-2">&nbsp;</td>
                  <td class="color-table-2">&nbsp;</td>
                  <td align="center" class="color-table-2">&nbsp;</td>
                </tr>
              </table>
            </div></td>
            </tr>
        </table>
      </div>        </td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td colspan="2" align="center">&nbsp;</td>
    </tr>
    <tr>
      <td><input name="agentid" type="hidden" id="agentid" value="<?php echo $_GET['agentid']; ?>" />
      <input name="first" type="hidden" id="first" value="<?php echo $_GET['first']; ?>" />
      <input name="last" type="hidden" id="last" value="<?php echo $_GET['last']; ?>" />
      <input name="startdate" type="hidden" id="startdate" value="<?php 
	  
	  
	  $newdate = $_GET['startdate'];
	  $newdateMonth = substr($newdate,0,2);
	  $newdateDay = substr($newdate,2,2);
	  $newdateYear = substr($newdate,4,4);
	  $newFinalDate = $newdateYear . "-" . $newdateMonth . "-" . $newdateDay;
	  echo  $newFinalDate;
	  
	  
	  
	  ?>" />
      <input name="inqueue" type="hidden" id="inqueue" value="<?php echo $_GET['inqueue']; ?>" />
      <input name="skill" type="hidden" id="skill" value="<?php echo $_GET['skill']; ?>" />
      <input name="skillname" type="hidden" id="skillname" value="<?php echo $_GET['skillname']; ?>" />
      <input name="contactid" type="hidden" id="contactid" value="<?php echo $_GET['contactid']; ?>" />
      <input name="masterid" type="hidden" id="masterid" value="<?php echo $_GET['masterid']; ?>" />
      <input name="dnis" type="hidden" id="dnis" value="<?php echo $_GET['dnis']; ?>" />
      <input name="ani" type="hidden" id="ani" value="<?php echo $_GET['ani']; ?>" />
      </td>
      <td colspan="2" align="center"><input type="submit" name="Submit" value="Submit" /></td>
    </tr>
  </table>
  
  <input type="hidden" name="MM_insert" value="insertForm">
</form>

javascript

2 Contributors
4 Replies
125 Views
2 Days Discussion Span
Latest Post 15 Years Ago Latest Post by websurfer

Airshow 416 WiFi Lounge Lizard

15 Years Ago

Surfer,

First of all, you can massively simplify your form by purging all the nested tables.

<form action="<?php echo $editFormAction; ?>" id="insertForm" name="insertForm" method="POST">
<table width="375" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td colspan="3" align="center"><img src="../images/nc_title_logo.gif" width="342" height="54" /></td>
</tr><tr height="35" valign="bottom">
<td width="80%"><span class="style5">No Order completed in this call</span></td>
<td width="10%" align="center"><input name="noorder" type="checkbox" id="noorder" value="checkbox" onclick="toggle_visibility(['upsell', 'upsellBox', 'cross', 'crossBox'], 0, ['upsell', 'upsellStatus', 'cross', 'crossStatus']);" /></td>
<td width="10%">&nbsp;</td>
</tr>
</tbody>
<tbody id="upsell" class="color-table">
<tr height="35" valign="bottom">
<td>&nbsp;</td>
<td align="center"><strong>YES</strong></td>
<td align="center"><strong>NO</strong></td>
</tr><tr>
<td>1) Did you attempt an Upsell?</td>
<td align="center"><input type="radio" name="upsell" value="Y" onclick="toggle_visibility('upsellBox', 1, 'upsellStatus');"/></td>
<td align="center"><input type="radio" name="upsell" value="N" onclick="toggle_visibility('upsellBox', -1, 'upsellStatus');"/></td>
</tr>
</tbody>
<tbody id="upsellBox" class="color-table">
<tr>
<td>2) Was the Upsell successful? </td>
<td align="center"><input type="radio" name="upsellStatus" value="Y" /></td>
<td align="center"><input type="radio" name="upsellStatus" value="N" /></td>
</tr>
</tbody>
<tbody id="cross" class="color-table-2">
<tr height="35" valign="bottom">
<td>&nbsp;</td>
<td align="center"><strong>YES</strong></td>
<td align="center"><strong>NO</strong></td>
</tr><tr>
<td>3) Did you attempt a Cross-Sell? </td>
<td align="center"><input type="radio" name="cross" value="Y" onclick="toggle_visibility('crossBox', 1, 'crossStatus');"/></td>
<td align="center"><input type="radio" name="cross" value="N" onclick="toggle_visibility('crossBox', -1, 'crossStatus');"/></td>
</tr>
</tbody>
<tbody id="crossBox" class="color-table-2">
<tr>
<td>4) Was the Cross-Sell successful? </td>
<td align="center"><input type="radio" name="crossStatus" value="Y" /></td>
<td align="center"><input type="radio" name="crossStatus" value="N" /></td>
</tr>
</tbody>
<tbody>
<tr height="35" valign="bottom">
<td>&nbsp;</td>
<td colspan="2" align="center"><input type="submit" name="Submit" value="Submit" /></td>
</tr>
</tbody>
</table>
<input type="hidden" name="MM_insert" value="insertForm">
<input name="agentid" type="hidden" id="agentid" value="<?php echo $_GET['agentid']; ?>" />
<input name="first" type="hidden" id="first" value="<?php echo $_GET['first']; ?>" />
<input name="last" type="hidden" id="last" value="<?php echo $_GET['last']; ?>" />
<input name="startdate" type="hidden" id="startdate" value="<?php 
	$newdate = $_GET['startdate'];
	$newdateMonth = substr($newdate,0,2);
	$newdateDay = substr($newdate,2,2);
	$newdateYear = substr($newdate,4,4);
	$newFinalDate = $newdateYear . "-" . $newdateMonth . "-" . $newdateDay;
	echo  $newFinalDate;
?>" />
<input type="hidden" name="inqueue"   id="inqueue"   value="<?php echo $_GET['inqueue']; ?>" />
<input type="hidden" name="skill"     id="skill"     value="<?php echo $_GET['skill']; ?>" />
<input type="hidden" name="skillname" id="skillname" value="<?php echo $_GET['skillname']; ?>" />
<input type="hidden" name="contactid" id="contactid" value="<?php echo $_GET['contactid']; ?>" />
<input type="hidden" name="masterid"  id="masterid"  value="<?php echo $_GET['masterid']; ?>" />
<input type="hidden" name="dnis"      id="dnis"      value="<?php echo $_GET['dnis']; ?>" />
<input type="hidden" name="ani"       id="ani"       value="<?php echo $_GET['ani']; ?>" />
</form>

Notes:

<tbody id="..."> is used to make addressable portions of a single table.
Judicious use of <tr height=".." valign="bottom"> obviates the need for spacing rows in the table.

In Javascript, I have reduced your three functions for toggling sections on/off to just one. It's parameters control the behaviour including the unchecking of associated radio buttons, which is achieved by calling a second function.

function toggle_visibility(idArray, force, radioNamesArray) {
	force = (!force) ? null : (force <= -1) ? 'none' : 'block';
	if(typeof idArray == 'string'){ idArray = [idArray]; }//if string, then convert to array
	if(radioNamesArray){ uncheck(radioNamesArray); }
	for(var i=0; i<idArray.length; i++) {
		var e = (document.getElementById) ? document.getElementById(idArray[i]) : document.all[idArray[i]];
		if(force){ e.style.display = force; }
		else{ e.style.display = (e.style.display == 'none') ? 'block' : 'none'; }
	}
}
function uncheck(radioNamesArray) {
	if(typeof radioNamesArray == 'string'){ radioNamesArray = [radioNamesArray]; }//if string, then convert to array
	var elements = document.getElementsByTagName('input');
	for(var i=0; i<elements.length; i++) {
		for(var j=0; j<radioNamesArray.length; j++) {
			if(elements[i].name && elements[i].name == radioNamesArray[j]) {
				elements[i].checked = 0;
			}
		}
	}
}

You may need to readdress classes. I may have over-simplified things by moving all class definitions from <td>s to <tbody> tags.

Anyways, I hope this helps.

Airchow

itsjareds commented: Nice simplification of his code +1

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

websurfer 0 Junior Poster in Training · Answer 1 · 2009-06-19T20:16:38+00:00

Hi, Airshow...

You are awesome! As you can see, I can barely grasp Javascript, so very much appreciate your help!

I did notice, it did work pretty smooth in Explorer, but things get all out of place if I try it in Firefox, like table gets all mumbled-jumbled.. and was wansdering if there is something that can be modified, so it also looks good there? I think, possibly as you say the over-simplification of the td vs. tbody tags? but I just dont know exactly what to modify...

Thanks, very much appreciate it!!

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 2 · 2009-06-20T02:14:51+00:00

Surfer,

By crickey, you're right about Firefox behaving oddly. I tracked it down to the style directive for turning hidden <tbody> elements back on. IE takes 'block' while FF/opera etc. take 'table-row-group' !!! The latter is both standards compliant and unguessable.

So you need some new code. Replace the function toggle_visibility with :

function set_display(idArray, state, radioNamesArray) {
	var method = 'display';
	state = (!state || state < 0) ? 0 : 1;
	if(typeof idArray == 'string'){ idArray = [idArray]; }//if string, then convert to array
	if(radioNamesArray){ uncheck(radioNamesArray); }
	for(var i=0; i<idArray.length; i++) {
		var el = (document.getElementById) ? document.getElementById(idArray[i]) : document.all[idArray[i]];
		if(!el) { return; }
		try { el.style.display = (state) ? 'table-row-group' : 'none'; }//firefox, opera etc.
		catch(err) {
			try { el.style.display = (state) ? 'block' : 'none'; }//ie
			catch (err) { ; }
		}
	}
}

I have changed the name to more correctly reflect the nature of the function.

You must also replace five lines in the HTML :

<td width="10%" align="center"><input name="noorder" type="checkbox" id="noorder" value="checkbox" onclick="set_display(['upsell', 'upsellBox', 'cross', 'crossBox'], !this.checked, ['upsell', 'upsellStatus', 'cross', 'crossStatus']);" /></td>
	....
	<td align="center"><input type="radio" name="upsell" value="Y" onclick="set_display('upsellBox', 1, 'upsellStatus');"/></td>
	<td align="center"><input type="radio" name="upsell" value="N" onclick="set_display('upsellBox', 0, 'upsellStatus');"/></td>
	....
	<td align="center"><input type="radio" name="cross" value="Y" onclick="set_display('crossBox', 1, 'crossStatus');"/></td>
	<td align="center"><input type="radio" name="cross" value="N" onclick="set_display('crossBox', 0, 'crossStatus');"/></td>

These lines have only changed in their detail, so it should be easy to find the five original lines.

My proviso about maybe having oversimplified the class definitions still stands. This won't affect the basic switching functionality, but may affect appearance (text/background color etc) in that your <tr>s and/or <td>s may rely on being individually styled (as per your original HTML) rather than having a "group style" applied at <tbody> level. I can't tell without seeing your stylesheet.

Anyway, for now see if the changes fix things in FF.

Airshow

websurfer 0 Junior Poster in Training · Answer 3 · 2009-06-21T03:45:51+00:00

Hi again, Air:

YOU ARE DARN GOOD...! and you call yourself "Whiz in Training!"??? how about "Great Master"... your fixes worked right on!

Now it all works beautifully in all browsers, including my Mac!

Thanks so much for taking the time to look at my problem... and hanging in there for me. Very much appreciate it!

Surfer