JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS

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

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Thread Solved

•
•
Join Date: Mar 2007
Posts: 63
Reputation: websurfer is an unknown quantity at this point 
Solved Threads: 0
websurfer websurfer is offline Offline
Junior Poster in Training

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

 
0
  #1
Jun 18th, 2009
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:


JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1.  
  2. <script type="text/javascript">
  3. <!--
  4.     function toggle_visibility(id) {
  5.        var e = document.getElementById(id);
  6.        if(e.style.display == 'none')
  7.           e.style.display = 'block';
  8.        else
  9.           e.style.display = 'none';
  10.     }
  11. //-->
  12. </script>
  13.  
  14. <script type="text/javascript">
  15. <!--
  16.     function toggle_visibilityNone(id) {
  17.        var e = document.getElementById(id);
  18.        if(e.style.display == 'block')
  19.           e.style.display = 'none';
  20.        else
  21.           e.style.display = 'none';
  22.     }
  23. //-->
  24. </script>
  25.  
  26.  
  27.  
  28. <script type="text/javascript">
  29. <!--
  30.     function toggle_visibilityYes(id) {
  31.        var e = document.getElementById(id);
  32.        if(e.style.display == 'none')
  33.           e.style.display = 'block';
  34.        else
  35.           e.style.display = 'block';
  36.     }
  37. //-->
  38. </script>

and here is my basic form-html code:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1.  
  2.  
  3. <form action="<?php echo $editFormAction; ?>" id="insertForm" name="insertForm" method="POST">
  4.   <p>&nbsp;</p>
  5.   <table width="375" border="0" align="center" cellpadding="0" cellspacing="0">
  6.     <tr>
  7.       <td colspan="3" align="center"><img src="../images/nc_title_logo.gif" width="342" height="54" /></td>
  8.     </tr>
  9.     <tr>
  10.       <td colspan="3">&nbsp;</td>
  11.     </tr>
  12.     <tr>
  13.       <td>&nbsp;</td>
  14.       <td colspan="2" align="center">&nbsp;</td>
  15.     </tr>
  16.     <tr>
  17.       <td width="314"><span class="style5">No Order completed in this call </span></td>
  18.       <td width="61" colspan="2" align="center">
  19.       <input name="noorder" type="checkbox" id="noorder" value="checkbox" onclick="toggle_visibility('box');" />     </td>
  20.     </tr>
  21.     <tr>
  22.       <td colspan="3">&nbsp;</td>
  23.     </tr>
  24.     <tr>
  25.       <td colspan="3"><div id="box">
  26.         <table width="100%" border="0" cellpadding="0" cellspacing="0">
  27.           <tr>
  28.             <td width="100%"><table width="100%" border="0" cellspacing="0" cellpadding="0">
  29.               <tr class="color-table">
  30.                 <td >&nbsp;  </td>
  31.                 <td align="left">&nbsp;</td>
  32.                 <td align="left">&nbsp;</td>
  33.               </tr>
  34.               <tr class="color-table">
  35.                 <td >&nbsp;</td>
  36.                 <td align="left"><strong>YES</strong></td>
  37.                 <td align="left"><strong>NO</strong></td>
  38.               </tr>
  39.               <tr>
  40.                 <td width="80%" class="color-table">&nbsp;&nbsp;1) Did you attempt an Upsell?</td>
  41.                 <td class="color-table"><input type="radio" name="upsell" value="Y" onclick="toggle_visibilityYes('upsellBox');"/></td>
  42.                 <td align="center" class="color-table"><input type="radio" name="upsell" value="N" onclick="toggle_visibilityNone('upsellBox');"/></td>
  43.               </tr>
  44.             </table></td>
  45.           </tr>
  46.           <tr>
  47.             <td class="color-table">&nbsp;</td>
  48.             </tr>
  49.           <tr>
  50.             <td class="color-table"><div id="upsellBox">
  51.               <table width="100%" border="0" cellspacing="0" cellpadding="0">
  52.                 <tr>
  53.                   <td width="80%" class="color-table">&nbsp;&nbsp;2) Was the Upsell successful? </td>
  54.                   <td class="color-table"><input type="radio" name="upsellStatus" value="Y" /></td>
  55.                   <td align="center" class="color-table"><input type="radio" name="upsellStatus" value="N" /></td>
  56.                 </tr>
  57.                 <tr>
  58.                   <td class="color-table">&nbsp;</td>
  59.                   <td class="color-table">&nbsp;</td>
  60.                   <td align="center" class="color-table">&nbsp;</td>
  61.                 </tr>
  62.               </table>
  63.             </div></td>
  64.             </tr>
  65.           <tr>
  66.             <td class="color-table-2">&nbsp;</td>
  67.             </tr>
  68.           <tr>
  69.             <td class="color-table-2"><table width="100%" border="0" cellspacing="0" cellpadding="0">
  70.               <tr>
  71.                 <td class="color-table-2">&nbsp;</td>
  72.                 <td align="left" class="color-table-2"><strong>YES</strong></td>
  73.                 <td colspan="2" align="left" class="color-table-2"><strong>NO</strong></td>
  74.               </tr>
  75.               <tr>
  76.                 <td width="80%" class="color-table-2">&nbsp;&nbsp;3) Did you attempt a Cross-Sell? </td>
  77.                 <td class="color-table-2"><input type="radio" name="cross" value="Y" onclick="toggle_visibilityYes('crossBox');"/></td>
  78.                 <td colspan="2" align="center" class="color-table-2"><input type="radio" name="cross" value="N" onclick="toggle_visibilityNone('crossBox');"/></td>
  79.                 </tr>
  80.             </table></td>
  81.             </tr>
  82.           <tr>
  83.             <td class="color-table-2">&nbsp;</td>
  84.           </tr>
  85.           <tr>
  86.             <td><div id="crossBox">
  87.               <table width="100%" border="0" cellspacing="0" cellpadding="0">
  88.                 <tr>
  89.                   <td width="80%" class="color-table-2">&nbsp;&nbsp;4) Was the Cross-Sell successful? </td>
  90.                   <td class="color-table-2"><input type="radio" name="crossStatus" value="Y" /></td>
  91.                   <td align="center" class="color-table-2"><input type="radio" name="crossStatus" value="N" /></td>
  92.                 </tr>
  93.                 <tr>
  94.                   <td class="color-table-2">&nbsp;</td>
  95.                   <td class="color-table-2">&nbsp;</td>
  96.                   <td align="center" class="color-table-2">&nbsp;</td>
  97.                 </tr>
  98.               </table>
  99.             </div></td>
  100.             </tr>
  101.         </table>
  102.       </div>        </td>
  103.     </tr>
  104.     <tr>
  105.       <td>&nbsp;</td>
  106.       <td colspan="2" align="center">&nbsp;</td>
  107.     </tr>
  108.     <tr>
  109.       <td><input name="agentid" type="hidden" id="agentid" value="<?php echo $_GET['agentid']; ?>" />
  110.       <input name="first" type="hidden" id="first" value="<?php echo $_GET['first']; ?>" />
  111.       <input name="last" type="hidden" id="last" value="<?php echo $_GET['last']; ?>" />
  112.       <input name="startdate" type="hidden" id="startdate" value="<?php 
  113.  
  114.  
  115. 	  $newdate = $_GET['startdate'];
  116. 	  $newdateMonth = substr($newdate,0,2);
  117. 	  $newdateDay = substr($newdate,2,2);
  118. 	  $newdateYear = substr($newdate,4,4);
  119. 	  $newFinalDate = $newdateYear . "-" . $newdateMonth . "-" . $newdateDay;
  120. 	  echo  $newFinalDate;
  121.  
  122.  
  123.  
  124. 	  ?>" />
  125.       <input name="inqueue" type="hidden" id="inqueue" value="<?php echo $_GET['inqueue']; ?>" />
  126.       <input name="skill" type="hidden" id="skill" value="<?php echo $_GET['skill']; ?>" />
  127.       <input name="skillname" type="hidden" id="skillname" value="<?php echo $_GET['skillname']; ?>" />
  128.       <input name="contactid" type="hidden" id="contactid" value="<?php echo $_GET['contactid']; ?>" />
  129.       <input name="masterid" type="hidden" id="masterid" value="<?php echo $_GET['masterid']; ?>" />
  130.       <input name="dnis" type="hidden" id="dnis" value="<?php echo $_GET['dnis']; ?>" />
  131.       <input name="ani" type="hidden" id="ani" value="<?php echo $_GET['ani']; ?>" />
  132.       </td>
  133.       <td colspan="2" align="center"><input type="submit" name="Submit" value="Submit" /></td>
  134.     </tr>
  135.   </table>
  136.  
  137.   <input type="hidden" name="MM_insert" value="insertForm">
  138. </form>
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2009
Posts: 818
Reputation: Airshow is on a distinguished road 
Solved Threads: 116
Airshow's Avatar
Airshow Airshow is offline Offline
Practically a Posting Shark

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

 
1
  #2
Jun 18th, 2009
Surfer,

First of all, you can massively simplify your form by purging all the nested tables.
html Syntax (Toggle Plain Text) 
  1. <form action="<?php echo $editFormAction; ?> " id="insertForm" name="insertForm" method="POST">
  2. <table width="375" border="0" align="center" cellpadding="0" cellspacing="0"> 
  3. <tbody> 
  4. <tr> 
  5. <td colspan="3" align="center"> <img src="../images/nc_title_logo.gif" width="342" height="54" /> </td> 
  6. </tr> <tr height="35" valign="bottom"> 
  7. <td width="80%"> <span class="style5"> No Order completed in this call</span> </td> 
  8. <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> 
  9. <td width="10%"> &nbsp;</td> 
  10. </tr> 
  11. </tbody> 
  12. <tbody id="upsell" class="color-table"> 
  13. <tr height="35" valign="bottom"> 
  14. <td> &nbsp;</td> 
  15. <td align="center"> <strong> YES</strong> </td> 
  16. <td align="center"> <strong> NO</strong> </td> 
  17. </tr> <tr> 
  18. <td> 1) Did you attempt an Upsell?</td> 
  19. <td align="center"> <input type="radio" name="upsell" value="Y" onclick="toggle_visibility('upsellBox', 1, 'upsellStatus');"/> </td> 
  20. <td align="center"> <input type="radio" name="upsell" value="N" onclick="toggle_visibility('upsellBox', -1, 'upsellStatus');"/> </td> 
  21. </tr> 
  22. </tbody> 
  23. <tbody id="upsellBox" class="color-table"> 
  24. <tr> 
  25. <td> 2) Was the Upsell successful? </td> 
  26. <td align="center"> <input type="radio" name="upsellStatus" value="Y" /> </td> 
  27. <td align="center"> <input type="radio" name="upsellStatus" value="N" /> </td> 
  28. </tr> 
  29. </tbody> 
  30. <tbody id="cross" class="color-table-2"> 
  31. <tr height="35" valign="bottom"> 
  32. <td> &nbsp;</td> 
  33. <td align="center"> <strong> YES</strong> </td> 
  34. <td align="center"> <strong> NO</strong> </td> 
  35. </tr> <tr> 
  36. <td> 3) Did you attempt a Cross-Sell? </td> 
  37. <td align="center"> <input type="radio" name="cross" value="Y" onclick="toggle_visibility('crossBox', 1, 'crossStatus');"/> </td> 
  38. <td align="center"> <input type="radio" name="cross" value="N" onclick="toggle_visibility('crossBox', -1, 'crossStatus');"/> </td> 
  39. </tr> 
  40. </tbody> 
  41. <tbody id="crossBox" class="color-table-2"> 
  42. <tr> 
  43. <td> 4) Was the Cross-Sell successful? </td> 
  44. <td align="center"> <input type="radio" name="crossStatus" value="Y" /> </td> 
  45. <td align="center"> <input type="radio" name="crossStatus" value="N" /> </td> 
  46. </tr> 
  47. </tbody> 
  48. <tbody> 
  49. <tr height="35" valign="bottom"> 
  50. <td> &nbsp;</td> 
  51. <td colspan="2" align="center"> <input type="submit" name="Submit" value="Submit" /> </td> 
  52. </tr> 
  53. </tbody> 
  54. </table> 
  55. <input type="hidden" name="MM_insert" value="insertForm"> 
  56. <input name="agentid" type="hidden" id="agentid" value="<?php echo $_GET['agentid']; ?>" />
  57. <input name="first" type="hidden" id="first" value="<?php echo $_GET['first']; ?> " />
  58. <input name="last" type="hidden" id="last" value="<?php echo $_GET['last']; ?>" />
  59. <input name="startdate" type="hidden" id="startdate" value="<?php 
  60. 	$newdate = $_GET['startdate'];
  61. 	$newdateMonth = substr($newdate,0,2);
  62. 	$newdateDay = substr($newdate,2,2);
  63. 	$newdateYear = substr($newdate,4,4);
  64. 	$newFinalDate = $newdateYear . "-" . $newdateMonth . "-" . $newdateDay;
  65. 	echo  $newFinalDate;
  66. ?> " />
  67. <input type="hidden" name="inqueue"   id="inqueue"   value="<?php echo $_GET['inqueue']; ?>" />
  68. <input type="hidden" name="skill"     id="skill"     value="<?php echo $_GET['skill']; ?> " />
  69. <input type="hidden" name="skillname" id="skillname" value="<?php echo $_GET['skillname']; ?>" />
  70. <input type="hidden" name="contactid" id="contactid" value="<?php echo $_GET['contactid']; ?> " />
  71. <input type="hidden" name="masterid"  id="masterid"  value="<?php echo $_GET['masterid']; ?>" />
  72. <input type="hidden" name="dnis"      id="dnis"      value="<?php echo $_GET['dnis']; ?> " />
  73. <input type="hidden" name="ani"       id="ani"       value="<?php echo $_GET['ani']; ?>" />
  74. </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.
javascript Syntax (Toggle Plain Text) 
  1. function toggle_visibility(idArray, force, radioNamesArray) {
  2. 	force = (!force) ? null : (force <= -1) ? 'none' : 'block';
  3. 	if(typeof idArray == 'string'){ idArray = [idArray]; }//if string, then convert to array
  4. 	if(radioNamesArray){ uncheck(radioNamesArray); }
  5. 	for(var i=0; i<idArray.length; i++) {
  6. 		var e = (document.getElementById) ? document.getElementById(idArray[i]) : document.all[idArray[i]];
  7. 		if(force){ e.style.display = force; }
  8. 		else{ e.style.display = (e.style.display == 'none') ? 'block' : 'none'; }
  9. 	}
  10. }
  11. function uncheck(radioNamesArray) {
  12. 	if(typeof radioNamesArray == 'string'){ radioNamesArray = [radioNamesArray]; }//if string, then convert to array
  13. 	var elements = document.getElementsByTagName('input');
  14. 	for(var i=0; i<elements.length; i++) {
  15. 		for(var j=0; j<radioNamesArray.length; j++) {
  16. 			if(elements[i].name && elements[i].name == radioNamesArray[j]) {
  17. 				elements[i].checked = 0;
  18. 			}
  19. 		}
  20. 	}
  21. }
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
Last edited by Airshow; Jun 18th, 2009 at 9:12 pm.
50% of the solution lies in accurately describing the problem!
Reply With Quote Quick reply to this message  
•
•
Join Date: Mar 2007
Posts: 63
Reputation: websurfer is an unknown quantity at this point 
Solved Threads: 0
websurfer websurfer is offline Offline
Junior Poster in Training

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

 
0
  #3
Jun 19th, 2009
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!!
Last edited by websurfer; Jun 19th, 2009 at 11:17 am.
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2009
Posts: 818
Reputation: Airshow is on a distinguished road 
Solved Threads: 116
Airshow's Avatar
Airshow Airshow is offline Offline
Practically a Posting Shark

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

 
0
  #4
Jun 19th, 2009
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 :
javascript Syntax (Toggle Plain Text) 
  1. function set_display(idArray, state, radioNamesArray) {
  2. 	var method = 'display';
  3. 	state = (!state || state < 0) ? 0 : 1;
  4. 	if(typeof idArray == 'string'){ idArray = [idArray]; }//if string, then convert to array
  5. 	if(radioNamesArray){ uncheck(radioNamesArray); }
  6. 	for(var i=0; i<idArray.length; i++) {
  7. 		var el = (document.getElementById) ? document.getElementById(idArray[i]) : document.all[idArray[i]];
  8. 		if(!el) { return; }
  9. 		try { el.style.display = (state) ? 'table-row-group' : 'none'; }//firefox, opera etc.
  10. 		catch(err) {
  11. 			try { el.style.display = (state) ? 'block' : 'none'; }//ie
  12. 			catch (err) { ; }
  13. 		}
  14. 	}
  15. }
I have changed the name to more correctly reflect the nature of the function.

You must also replace five lines in the HTML :
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. 	<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>
  2. 	....
  3. 	<td align="center"><input type="radio" name="upsell" value="Y" onclick="set_display('upsellBox', 1, 'upsellStatus');"/></td>
  4. 	<td align="center"><input type="radio" name="upsell" value="N" onclick="set_display('upsellBox', 0, 'upsellStatus');"/></td>
  5. 	....
  6. 	<td align="center"><input type="radio" name="cross" value="Y" onclick="set_display('crossBox', 1, 'crossStatus');"/></td>
  7. 	<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
50% of the solution lies in accurately describing the problem!
Reply With Quote Quick reply to this message  
•
•
Join Date: Mar 2007
Posts: 63
Reputation: websurfer is an unknown quantity at this point 
Solved Threads: 0
websurfer websurfer is offline Offline
Junior Poster in Training

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

 
0
  #5
Jun 20th, 2009
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
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread has been marked solved.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



acid2 ajax ajaxcode ajaxhelp animate array automatically beta box bug calendar captchaformproblem cart checkbox child class close codes column createrange() css cursor decimal dependent design disablefirebug dom download dropdown editor element engine enter error events explorer ext file firefox focus forms frameworks google gwt gxt html htmlform ie8 iframe images index internet java javascript jawascriptruntimeerror jquery jsf jsfile jsp jump listbox masterpage math menu microsoft mimic mp4 object onmouseoutdivproblem onmouseover onreadystatechange parent pdf php player post problem progressbar prototype redirect regex runtime scale scroll search select shopping size sql text textarea toggle w3c web website window windowofwords windowsxp wysiwyg \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC