By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,131 Members | 1,437 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,131 IT Pros & Developers. It's quick & easy.

storing expanded menu options in javascript

P: 57
I am trying to save a users selection when toggle a hidden field between forms.
So far, the toggle works great but the action between forms does not. I could use some assistance with my js. thanks


Expand|Select|Wrap|Line Numbers
  1.  (css)
  2.  
  3. toggle-list{
  4.     display:none;
  5.                 }
  6.  
  7.  

Expand|Select|Wrap|Line Numbers
  1.  (html) 
  2.  
  3. <body>
  4.  
  5. <form 
  6.     id="form"
  7.     method="get"
  8.     name="form" 
  9.     action="index.jsp" 
  10.     onsubmit="return checkform(this)"  
  11.    >
  12.  
  13.  
  14. <div class="advOps">
  15.    <input
  16.       id="ADVTOGGLE"
  17.       type="hidden"
  18.       name="adv_toggle"
  19.       value="c"
  20.      />
  21.  
  22. <div
  23.      class="toggle"
  24.      onclick="Toggle( 'ADVTOGGLE', 'ADVANCED', 'ADVTOGGLEIMG' )"
  25.      >
  26.   <img
  27.      id="ADVTOGGLEIMG"
  28.      src="common/img/toggle_blue_closed.gif"
  29.      />
  30.   Advanced Options:
  31. </div>
  32.  
  33. <div id="ADVANCED" class="toggle-list">
  34.  
  35. Date Range: <br /> 
  36.     Start Date (field)
  37. <br />
  38.     End Date (field)   
  39. <br />
  40.  
  41. </div>
  42. <script type="text/javascript">
  43.     <!-- 
  44.     document.getElementById('ADVANCED').style.display = "none";
  45.     // -->
  46. </script>
  47.  
  48. </div>
  49.  
  50.  
  51.  

Expand|Select|Wrap|Line Numbers
  1.  (javascript)
  2.  
  3. function Toggle ( togInputId, togListId, togImgId ){
  4.     var togInput = document.getElementById( togInputId );
  5.     var listDiv = document.getElementById( togListId );
  6.     var imgObj  = document.getElementById( togImgId );
  7.     if( listDiv.style.display == "block" ){
  8.         listDiv.style.display = "none";
  9.         imgObj.src = "img/toggle_blue_closed.gif";
  10.         togInput.value = 'c';
  11.     } else {
  12.         listDiv.style.display = "block";
  13.         imgObj.src = "img/toggle_blue_open.gif";
  14.         togInput.value = 'o';
  15.     }
  16. }
  17.  
  18. function BuildMenuToggle ( toggle_id, id ){
  19.     var toggle_open   = "img/toggle_open.gif";
  20.     var toggle_closed = "img/toggle_closed.gif";
  21.     if( document.getElementById(toggle_id).src.match(toggle_open) )
  22.     {
  23.         document.getElementById(id).style.display = "none";
  24.         document.getElementById(toggle_id).src = toggle_closed;
  25.     } else {
  26.         document.getElementById(id).style.display = "block";
  27.         document.getElementById(toggle_id).src = toggle_open;
  28.     }
  29.     return( true );
  30. }
  31.  
  32. var hide_elements = new Array(
  33.     "ADVANCED",
  34.     "CATLIST"
  35. );
  36.  
  37. function HidePageElements () {
  38.     for( i in hide_elements )
  39.     {
  40.     window.status = hide_elements[i];
  41.     document.getElementById( hide_elements[i] ).style.visibility = "hidden";
  42.     }
  43.     return( true );
  44. }
  45.  
  46. function ShowPageElements () {
  47.     for( i in hide_elements )
  48.     {
  49.     window.status = hide_elements[i];
  50.     document.getElementById( hide_elements[i] ).style.visibility = "visible";
  51.     }
  52.     return( true );
  53. }
  54.  
  55. }
  56.  
Jan 8 '08 #1
Share this Question
Share on Google+
7 Replies


acoder
Expert Mod 15k+
P: 16,027
I am trying to save a users selection when toggle a hidden field between forms.
So far, the toggle works great but the action between forms does not.
So you want the hidden input value set to 'o' when the menu is expanded? Does it show up as 'c' instead?
Jan 9 '08 #2

P: 57
Yes, onload the form defaults to "c" or closed.
During toggle, the dropdown menu option works but not on reload.
Jan 9 '08 #3

acoder
Expert Mod 15k+
P: 16,027
On reload, all changes will be lost unless you use cookies. Use a cookie to save the changes - see this article and/or this one.
Jan 9 '08 #4

P: 57
Both links have been useful in the past as well. thanks for the suggestion.

Are there no other ways of storing that value between reload/different forms?
The reason I ask is, a while back I reviewed a website that had similar functionality but the cookie only retained language information. So maybe the site used the URL or something to pass the data.
Jan 9 '08 #5

acoder
Expert Mod 15k+
P: 16,027
Are there no other ways of storing that value between reload/different forms?
The reason I ask is, a while back I reviewed a website that had similar functionality but the cookie only retained language information. So maybe the site used the URL or something to pass the data.
Yes, you can use the URL or even hidden form fields, but the reason why I suggested cookies was that you asked about a reload. I thought by reload you meant pressing the refresh button or F5. In that case, the URL wouldn't change, so unless a cookie was set before the page was reloaded, the information would be lost.
Jan 10 '08 #6

P: 57
Returning to defaults on refresh would be ok.
Can you further discuss updating the hidden field idea with javascript.

I already have the hidden input field containing the "c" or "o" value. So the question is how to update the javascript to it updates that value and retains it on paging...
Jan 10 '08 #7

acoder
Expert Mod 15k+
P: 16,027
When you submit the form using the GET method, hidden form field value pairs will automatically be added to the URL. Then you can either use a server-side language to get the values or use location.search to get the query string which you will need to parse with JavaScript.
Jan 11 '08 #8

Post your reply

Sign in to post your reply or Sign up for a free account.