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

Save form values - show/hide divs depending on values

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

•
•
Join Date: Apr 2009
Posts: 10
Reputation: sgweaver is an unknown quantity at this point 
Solved Threads: 0
sgweaver sgweaver is offline Offline
Newbie Poster

Save form values - show/hide divs depending on values

 
0
  #1
Apr 29th, 2009
I am creating a form that you don’t actually submit in order to allow people to download files. You select different options with radio buttons and drop-down menus and then use that information to “show/hide” divs with javascript. That part works, but if the user leaves the page and then comes back, the data can be somewhat misleading. One radio button may be checked, but the corresponding div that was showing before you left the page is not (it was set to “display:block;” in css with the “onclick” or “onchange” depending on which choice on the form caused it to appear).

I know that I need to set a session cookie to save the values on the form, but it is a bit more complicated because I need to set divs to “display:block;” or “display:none;” depending on what the values of the form fields are.

Would anyone have any suggestions of where I could go to learn more about how to do this? I’m a novice at javascript. Since I am not submitting the form, I can’t use PHP.

Any advice would be appreciated.
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2009
Posts: 825
Reputation: Airshow is on a distinguished road 
Solved Threads: 117
Airshow's Avatar
Airshow Airshow is online now Online
Practically a Posting Shark

Re: Save form values - show/hide divs depending on values

 
0
  #2
Apr 29th, 2009
Sgweaver,

As I understand it, all you need to do is to ensure, on page load/reload, that your divs are correctly shown/hidden in accordance with the state of various radio buttons and pulldown menus.

You should be able to get away without setting a session cookie.

You can make a "scan" function that scans your form elements, tests their state and sets divs accordingly. Then you arrange for the scan function to ba called when the window loads/reloads so it will guarantee that your divs are always in synchronisation with your controls.

This technique has the advantage that it will also work during in normal user interaction by calling scan in response to relevant user events.

In my demo below, I have also arranged for the "bindings" between controls and divs to be specified in the HTML, not in the JavaScript, which may make the page easier to develop/maintain.

I have tested in IE6 and Moz 3.0.7 (both under win 2000) it works in both! On going back to the page, controls and divs all return to their previous states.

Here it is:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <title>Untitled</title>
  5. <style type="text/css">
  6. #controls, #divs { margin-bottom:12px; width:160px; padding:10px; border:1px solid #999999; }
  7. #controls h1, #divs h1 { margin:2px 0; padding:3px 0; font-size:9pt; text-align:center; background-color:#e0e0e0; }
  8. form { margin:0; }
  9. .showHide { display:none; margin:3px 0; padding:3px; text-align:center; }
  10. .red { background-color:#FF9999; }
  11. .green { background-color:#99FF99; }
  12. .blue { background-color:#9999FF; }
  13.  
  14. </style>
  15.  
  16. <script language="JavaScript" type="text/javascript">
  17. function scan(){
  18. 	var inputElements = document.getElementsByTagName('input');
  19. 	for(var i=0; i<inputElements.length; i++){
  20. 		if( inputElements[i].getAttribute('type') == 'radio' && inputElements[i].className == 'scanMe' ){
  21. 			var div = document.getElementById( inputElements[i].getAttribute('divId') );
  22. 			div.style.display = (inputElements[i].checked) ? 'block' : 'none';
  23. 		}
  24. 	}
  25. 	var optionElements = document.getElementsByTagName('option');
  26. 	for(var i=0; i<optionElements.length; i++){
  27. 		if( optionElements[i].className == 'scanMe' ){
  28. 			var div = document.getElementById( optionElements[i].getAttribute('divId') );
  29. 			var selectedOption = optionElements[i].parentNode[optionElements[i].parentNode.selectedIndex];
  30. 			div.style.display = (selectedOption == optionElements[i]) ? 'block' : 'none';
  31. 		}
  32. 	}
  33. 	return false;
  34. }
  35.  
  36. onload = function(){
  37. 	scan();
  38. }
  39. </script>
  40. </head>
  41.  
  42. <body>
  43.  
  44. <div id="controls">
  45. 	<h1>Controls</h1>
  46. 	<form id="myControls">
  47. 	<input id="radio1" type="radio" name="x" class="scanMe" divId="d1" onclick="scan()" checked><label for="radio1">Show d1</label><br>
  48. 	<input id="radio2" type="radio" name="x" class="scanMe" divId="d2" onclick="scan()"><label for="radio2">Show d2</label><br>
  49. 	<input id="radio3" type="radio" name="x" class="scanMe" divId="d3" onclick="scan()"><label for="radio3">Show d3</label><br>
  50.  
  51. 	<select onchange="scan()">
  52. 		<option class="scanMe" divId="d4">Show d4</option>
  53. 		<option class="scanMe" divId="d5" selected>Show d5</option>
  54. 		<option class="scanMe" divId="d6">Show d6</option>
  55. 	</select><br>
  56.  
  57. 	<select onchange="scan()">
  58. 		<option class="scanMe" divId="d7">Show d7</option>
  59. 		<option class="scanMe" divId="d8">Show d8</option>
  60. 		<option class="scanMe" divId="d9" selected>Show d9</option>
  61. 	</select><br>
  62. 	</form>
  63. </div>
  64.  
  65. <div id="divs">
  66. 	<h1>Divs</h1>
  67. 	<div class="showHide red"   id="d1">div id="d1"</div>
  68. 	<div class="showHide green" id="d2">div id="d2"</div>
  69. 	<div class="showHide blue"  id="d3">div id="d3"</div>
  70.  
  71. 	<div class="showHide red"   id="d4">div id="d4"</div>
  72. 	<div class="showHide green" id="d5">div id="d5"</div>
  73. 	<div class="showHide blue"  id="d6">div id="d6"</div>
  74.  
  75. 	<div class="showHide red"   id="d7">div id="d7"</div>
  76. 	<div class="showHide green" id="d8">div id="d8"</div>
  77. 	<div class="showHide blue"  id="d9">div id="d9"</div>
  78. </div>
  79.  
  80. </body>
  81. </html>
Airshow
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 954
Reputation: essential will become famous soon enough essential will become famous soon enough 
Solved Threads: 131
Featured Poster
essential's Avatar
essential essential is offline Offline
Posting Shark

Re: Save form values - show/hide divs depending on values

 
0
  #3
Apr 30th, 2009
You can try this sample if you prefer using cookie session.
Simply include these cookie.js in your (x)HTML document's.
cookie.js:



JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. var now = new Date(), expDate;
  2. var eDate = now;
  3. eDate.setTime( eDate.getTime() + (( 24 * 60 * 60 * 1000 ) * 31 ));
  4. var data;
  5. var cookies;
  6. var cookieActive = Boolean( navigator.cookieEnabled );
  7.  
  8. cookies = function() {
  9.    return { 
  10.       set : function( name, value, exp, path ) {
  11.          if ( cookieActive ) {
  12.             try {
  13.             data = name  + "=" + (( value !== null ) ? escape( value ) : "" );
  14.             data += (( exp !== null ) ? "; expires=" + exp.toGMTString() : "" );
  15.             data += (( path !== null ) ? "; path=" + escape( path ) : "" );
  16.             document.cookie = data;
  17.             } catch( e ) {
  18.       (( e.description ) ? alert( e.description ) : alert( e.message ));
  19.             }
  20.          } else { alert("Unable to create cookie!\nPlease make sure that your cookie is enabled in your browser...");
  21.          }
  22.       }, // Baking cookie's
  23.       del : function( name ) {
  24.       expDate = now;
  25.       expDate.setTime( expDate.getTime() - (( 24 * 60 * 60 * 1000 ) * 31 ));
  26.          try {
  27.          document.cookie = name + "=; expires=" + expDate.toGMTString() + "; path=/";
  28.          } catch( e1 ) {
  29.          (( e1.description ) ? alert( e1.description ) : alert( e1.message ));
  30.          }
  31.       }, // Dump cookie's
  32.       eat : function( name ) {
  33.          if ( name !== null ) {
  34.             try {
  35.             lists = document.cookie.match("(^|;) ?" + name + "=([^;]*)(;|$)");
  36.       return (unescape( RegExp.$2 )); 
  37.             } 
  38.             catch( e ) {   
  39.             lists = document.cookie.indexOf( name + "="); 
  40.                if ( lists !== -1 ) {
  41.                lists = lists + name.length + 1;
  42.                sem = document.cookie.indexOf(";", lists);
  43.                sem = ( sem == -1 ) ? document.cookie.length : ""; 
  44.                return ( unescape(document.cookie.substr( lists, sem )));
  45.                }
  46.             }
  47.          }
  48.       } // Let's eat cookie's
  49.    }; 
  50. }();
  51.  
  52. $ = Object.prototype.$ = function( myELEM, num, getClass ) {
  53.       if ( typeof num === "number" ) {
  54.       return document.getElementsByTagName( myELEM )[ num ];
  55.       } else if (( getClass !== null ) && ( typeof getClass === "string" )) {
  56.          try {
  57.             if (( typeof myELEM === "string" ) && ( num !== null ) && ( getClass !== null)) { 
  58.             return document.getElementsByTagName( myELEM )[ num ].className = getClass;
  59.             } else {
  60.             return (( document.getElementById ) ? document.getElementById( myELEM ).className = getClass : document.all[ myELEM ].className = getClass ); 
  61.             }
  62.          } catch( e2 ) {
  63.          return (( e2.description ) ? alert( e2.description ) : alert( e2.message ));
  64.          }
  65.       } else {
  66.       return (( document.getElementById ) ? document.getElementById( myELEM ) : document.all.myELEM );
  67.       }
  68.     };
Last edited by essential; Apr 30th, 2009 at 4:34 am. Reason: Bb tags
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 954
Reputation: essential will become famous soon enough essential will become famous soon enough 
Solved Threads: 131
Featured Poster
essential's Avatar
essential essential is offline Offline
Posting Shark

Re: Save form values - show/hide divs depending on values

 
0
  #4
Apr 30th, 2009
Here's the base sample test.html
javascript Syntax (Toggle Plain Text) 
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  3.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <html id="xhtml10" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5. <head>
  6. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8. <meta http-equiv="Content-Script-Type" content="text/javascript" />
  9. <title>JavaSript : Cookie Session</title>
  10. <style type="text/css">
  11. /* <![CDATA[ */
  12.  
  13. .hide { display : none; }
  14. .show { display : block; }
  15.  
  16. /* ]]> */
  17. </style>
  18. <script type="text/javascript" src="cookie.js"></script>
  19. <script type="text/javascript">
  20. // <![CDATA[
  21. var radio;
  22.  
  23. window.onload = function() {
  24.  
  25. /* USAGE
  26.  Syntax:
  27.  $([ string , [ string|null|number|empty, [ string|null|empty ] ] ]);
  28.  $("elementID", index, "setElementclassName"); 
  29.  
  30. The example above shows three parameter's of the Object.
  31.  
  32. * 1st Parameter is the ( ID or TagName ) of the element.
  33.   This parameter is required and cannot be empty.
  34.  
  35. * 2nd Parameter is the referenced (or index) number of the object, and will only work if you will - 
  36.  specify the TagName of the element in the 1st parameter.
  37.  Can be set to ( null | number | string )
  38.  
  39. * 3rd Parameter will be set as the className of the element.
  40.  Can be set ( null or empty ).
  41.  
  42.  Here's an example of a valid syntax :
  43.  
  44.  #1 - $("content") / same as document.getElementById("content")
  45.  
  46.  #2 - $("div", 0) / same as document.getElementsByTagName("div")[0]
  47.  
  48.   #3 - $("content", null, "sample") / same as document.getElementById("content").className = "sample"
  49.  
  50.    #4 - $("div", "0", "sample") / same as document.getElementsByTagName("div")[0].className = "sample" */
  51.  
  52. // A simple demo:
  53.  
  54. radio = $("ediv").getElementsByTagName("input");
  55.    for ( x = 0; x < radio.length; x++ ) {
  56.       radio[x].onclick = function() {
  57.    if ( this.checked ) {
  58.    cookies.set("visibility", ( this.value ), eDate, "/" ); // Save the current state - saves the value of the checked radio button using cookie
  59.  
  60.      $("content", null, cookies.eat("visibility")); // Setting the className to the element. "content" is the element id.
  61.    } else { return false; }
  62.    }
  63.  }      $("content", null, cookies.eat("visibility")); 
  64. // Loading the saved value of the radio button to the element. 
  65. };
  66.  
  67. // ]]>
  68. </script>
  69. </head>
  70. <body>
  71. <div class="hide" id="content">
  72. <h1>Test Page</h1>
  73. </div>
  74. <div id="ediv">
  75. <label>Show DIV <input type="radio" value="show" /></label> <label>Hide DIV <input type="radio" value="hide" /></label>
  76. </div> 
  77. </body>
  78. </html>
Last edited by essential; Apr 30th, 2009 at 5:00 am.
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2009
Posts: 10
Reputation: sgweaver is an unknown quantity at this point 
Solved Threads: 0
sgweaver sgweaver is offline Offline
Newbie Poster

Re: Save form values - show/hide divs depending on values

 
0
  #5
Apr 30th, 2009
That is beautiful, Airshow! Thank you so much for all of your help. I am trying to understand everything that is happening and then meld it with what I already have. I haven't been successful yet, but I will keep at it and report back when i get it working.
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2009
Posts: 10
Reputation: sgweaver is an unknown quantity at this point 
Solved Threads: 0
sgweaver sgweaver is offline Offline
Newbie Poster

Re: Save form values - show/hide divs depending on values

 
0
  #6
Apr 30th, 2009
I will check out the cookie option from Essential as well - just saw it. I need a quiet block of time to think this through. I really do appreciate all of the help. Thanks so much!!!
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2009
Posts: 10
Reputation: sgweaver is an unknown quantity at this point 
Solved Threads: 0
sgweaver sgweaver is offline Offline
Newbie Poster

Re: Save form values - show/hide divs depending on values

 
0
  #7
May 12th, 2009
Thanks for all of the help with this problem. I reorganized the HTML that Airshow wrote for my purposes and it works great! I have a group of radio buttons that first show or hide a drop down list, and then the select option shows the corresponding <div>. I posted the code below. Thanks again!

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <title>Untitled</title>
  5. <style type="text/css">
  6. #controls, #divs { margin-bottom:12px; width:160px; padding:10px; border:1px solid #999999; }
  7. #controls h1, #divs h1 { margin:2px 0; padding:3px 0; font-size:9pt; text-align:center; background-color:#e0e0e0; }
  8. form { margin:0; }
  9. .showHide { display:none; margin:3px 0; padding:3px; text-align:center; }
  10. .red { background-color:#FF9999; }
  11. .green { background-color:#99FF99; }
  12. .blue { background-color:#9999FF; }
  13.  
  14. </style>
  15.  
  16. <script language="JavaScript" type="text/javascript">
  17. function scan(){
  18. 	var inputElements = document.getElementsByTagName('input');
  19. 	for(var i=0; i<inputElements.length; i++){
  20. 		if( inputElements[i].getAttribute('type') == 'radio' && inputElements[i].className == 'scanMe' ){
  21. 			var div = document.getElementById( inputElements[i].getAttribute('divId') );
  22. 			div.style.display = (inputElements[i].checked) ? 'block' : 'none';
  23. 		}
  24. 	}
  25. 	var optionElements = document.getElementsByTagName('option');
  26. 	for(var i=0; i<optionElements.length; i++){
  27. 		if( optionElements[i].className == 'scanMe' ){
  28. 			var div = document.getElementById( optionElements[i].getAttribute('divId') );
  29. 			var selectedOption = optionElements[i].parentNode[optionElements[i].parentNode.selectedIndex];
  30. 			div.style.display = (selectedOption == optionElements[i]) ? 'block' : 'none';
  31. 		}
  32. 	}
  33. 	return false;
  34. }
  35.  
  36. onload = function(){
  37. 	scan();
  38. }
  39. </script>
  40. </head>
  41.  
  42. <body>
  43.  
  44. <div id="controls">
  45. 	<h1>Controls</h1>
  46. 	<form id="myControls">
  47. 	<input id="radio1" type="radio" name="x" class="scanMe" divId="d1" onclick="scan()" checked><label for="radio1">Show d1</label><br>
  48. 	<input id="radio2" type="radio" name="x" class="scanMe" divId="d2" onclick="scan()"><label for="radio2">Show d2</label><br>
  49. 	<input id="radio3" type="radio" name="x" class="scanMe" divId="d3" onclick="scan()"><label for="radio3">Show d3</label><br>
  50. 	<div id="d1" class="showHide red">(d1 new)<br />
  51. 		<select onchange="scan()">
  52. 			<option class="scanMe" divId="d4">Show d4</option>
  53. 			<option class="scanMe" divId="d5" selected>Show d5</option>
  54. 			<option class="scanMe" divId="d6">Show d6</option>
  55. 		</select><br />
  56. 		<div class="showHide red"   id="d4">div id="d4"</div>
  57. 		<div class="showHide green" id="d5">div id="d5"</div>
  58. 		<div class="showHide blue"  id="d6">div id="d6"</div>
  59. 	</div>
  60. 	<div id="d2" class="showHide green">(d2 new)<br />
  61. 		<select onchange="scan()">
  62. 			<option class="scanMe" divId="d7">Show d7</option>
  63. 			<option class="scanMe" divId="d8">Show d8</option>
  64. 			<option class="scanMe" divId="d9" selected>Show d9</option>
  65. 		</select><br />
  66. 		<div class="showHide red"   id="d7">div id="d7"</div>
  67. 		<div class="showHide green" id="d8">div id="d8"</div>
  68. 		<div class="showHide blue"  id="d9">div id="d9"</div>
  69. 	</div>
  70. 	<div id="d3" class="showHide blue">(d3 new)<br />
  71. 		<select onchange="scan()">
  72. 			<option class="scanMe" divId="d10">Show d10</option>
  73. 			<option class="scanMe" divId="d11">Show d11</option>
  74. 			<option class="scanMe" divId="d12" selected>Show d12</option>
  75. 		</select><br />
  76. 		<div class="showHide red"   id="d10">div id="d10"</div>
  77. 		<div class="showHide green" id="d11">div id="d11"</div>
  78. 		<div class="showHide blue"  id="d12">div id="d12"</div>
  79. 	</div>
  80. 	</form>
  81. </div>
  82.  
  83. <div id="divs">
  84. 	<h1>Divs</h1>
  85. 	<p><a href="index.php">Link to index</a></p>
  86. </div>
  87.  
  88.  
  89. </body>
  90. </html>
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:
•
•
•
•



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



acid2 ajax ajaxexample ajaxjspservlets array browser bug captchaformproblem cart checkbox child class close codes createrange() css cursor date debugger decimal dependent design disablefirebug dom dropdown editor element embed engine enter error events explorer ext file firefox focus form forms frameworks getselection google gxt hiddenvalue highlightedword hint html ie7 ie8 iframe images index internet java javascript javascripthelp2020 jquery jsf jsfile jsp jump libcurl listbox maps masterpage math media menu mp4 object onmouseoutdivproblem onmouseover onreadystatechange parent paypal pdf php position post programming progressbar prototype redirect runtime safari scale scriptlets scroll search security session shopping size software toggle unicode variables web wysiwyg \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC