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

Hide fields depending on selection

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

•
•
Join Date: Jul 2008
Posts: 25
Reputation: stockton is an unknown quantity at this point 
Solved Threads: 0
stockton stockton is offline Offline
Light Poster

Hide fields depending on selection

 
0
  #1
Sep 1st, 2009
In the following code I am attempting to get certain fields to only appear if the user Selects dependent else those fields should be hidden.
Please tell me what I have done wrong?
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. <head>
  5. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. <meta http-equiv="Content-Style-Type" content="text/css" />
  8. <meta http-equiv="Content-Script-Type" content="text/javascript" />
  9. <title>Display and Hide</title>
  10. <script language="JavaScript">
  11.   function showhidefield()
  12.   {
  13.     if (document.HelpAdd.RecordType.value == "Parent")
  14.     {
  15.       document.getElementById("hideablearea").style.visibility = "hidden";
  16.     }
  17.     else
  18.     {
  19.       document.getElementById("hideablearea").style.visibility = "visible";
  20.     }
  21.   }
  22. </script>
  23.  
  24. </head>
  25. <body>
  26. <form name='HelpAdd' action='nextpage.asp'>
  27. <table align="center" border="3" cellspacing="0" cellpadding="3">
  28. <tr><td>Record Type:</td>
  29. <td><select id="RecordType" name="RecordType" onchange=showhidefield()>
  30. <option value='0'>Parent</option>
  31. <option value='1'>Dependant</option><br/>
  32. <tr><td>Topic Title:</td>
  33. <td><input type="text" name="TopicName" ID="TopicName" maxlength="25"></td></tr>
  34.  
  35. <div id='hideablearea' style='visibility:hidden;'>
  36. <tr><td>Parent:</td>
  37. <td><select name="Parent">
  38. <input type="text" name="ParentID" ID="ParentID" maxlength="25"></td></tr>
  39. <tr><td>Topic Body:</td>
  40. <input type="hidden" name="MAX_FILE_SIZE" value="<?php echo $MaxFileSize ?>" />
  41. <td><input id="helpfile" name="helpfile" type="file" /></td></tr>
  42. </div>
  43. <tr><td colspan="2" align="center">
  44. <input type="submit" name="submit" value="Submit">
  45. <a href="/help.php"><button>Back</a>
  46. </td></tr>
  47. <tr><td colspan="2" align="center">
  48. <?php echo $Message ?>
  49. </td></tr>
  50. </table>
  51. </form>
  52. </body>
  53. </html>
Regards,
Alf Stockton www.stockton.co.za
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2009
Posts: 855
Reputation: Airshow is on a distinguished road 
Solved Threads: 121
Airshow's Avatar
Airshow Airshow is offline Offline
Practically a Posting Shark

Re: Hide fields depending on selection

 
0
  #2
Sep 1st, 2009
Stockton,

You can't use <div> like that to segment part(s) of a table.

Use <tbody> instead. You may have as many <tbody>s as you like within a table, each containing any number of <tr>s , each containing any number of <td>s .

<td>s may contain <div>s but do not generally need to as each <td> is directly addressable by giving it an id.

To hide/show a <tbody> with JavaScript, use:
javascript Syntax (Toggle Plain Text) 
  1. tttt.style.display = 'none';
  2. tttt.style.display = '';
where tttt is a reference to a particular <tbody> obtained (for example) with document.getElementById(...) .
Last edited by Airshow; Sep 1st, 2009 at 7:15 pm.
50% of the solution lies in accurately describing the problem!
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2008
Posts: 25
Reputation: stockton is an unknown quantity at this point 
Solved Threads: 0
stockton stockton is offline Offline
Light Poster

Re: Hide fields depending on selection

 
0
  #3
Sep 2nd, 2009
Thank you for your suggestion and now I almost have it the way I want but ......
Initial display is fine and if the user switches from "Parent" to "Dependent" the additional fields do display as expected but if they then switch from "Dependent" to "Parent" the additional fields do not disappear.
BTW The code I am working on can be seen at http://www.stockton.co.za/HelpTest.php
Obviously I am missing something, but what ?
Regards,
Alf Stockton www.stockton.co.za
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2009
Posts: 855
Reputation: Airshow is on a distinguished road 
Solved Threads: 121
Airshow's Avatar
Airshow Airshow is offline Offline
Practically a Posting Shark

Re: Hide fields depending on selection

 
1
  #4
Sep 2nd, 2009
Stockton,

That's because the value of the selected option is detemined by its value attribute (0|1) not its innerHTML property (Parent|Dependant).

You will find the following code more reliable cross-browser. It is also reusable in that it takes arguments rather than relying on hard-code.
javascript Syntax (Toggle Plain Text) 
  1. function showhidefield(menu, elId){
  2. 	var el = document.getElementById(elId);
  3. 	if(el){ el.style.display = (menu[menu.selectedIndex].value == '0') ? 'none' : ''; }
  4. }
HTML Syntax (Toggle Plain Text) 
  1. <select id="RecordType" name="RecordType" onchange="showhidefield(this, 'hideablearea')">
  2. <option selected value="0">Parent</option>
  3. <option value="1">Dependant</option>
  4. </select>
I notice you are using DOCTYPE XHTML strict which means that, if you want the page to validate, all HTML tags should balance (or end in />), all tagnames and attributes should be lower case, and (iirc) attribute values should be in double quotes.

Airshow
Last edited by Airshow; Sep 2nd, 2009 at 1:27 pm.
50% of the solution lies in accurately describing the problem!
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2008
Posts: 25
Reputation: stockton is an unknown quantity at this point 
Solved Threads: 0
stockton stockton is offline Offline
Light Poster

Re: Hide fields depending on selection

 
0
  #5
Sep 3rd, 2009
Excellent. Just what I needed. Thank you.
Regards,
Alf Stockton www.stockton.co.za
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 ajaxexample ajaxhelp ajaxjspservlets animate array automatically beta box browser calendar captchaformproblem cart close codes column css cursor date debugger decimal dependent design dom download dropdown element embed enter error events firefox focus form frameworks getselection google gwt gxt hiddenvalue highlightedword hint html htmlform ie7 iframe image() index java javascript javascripthelp2020 jawascriptruntimeerror jquery jsp libcurl listbox maps masterpage media menu microsoft mimic mp4 onerror onmouseover paypal php player position post problem programming prototype rated rating redirect regex safari scale scriptlets search security select software sql starrating text textarea toggle unicode validation variables w3c webservice website window windowofwords windowsxp
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC