943,633 Members | Top Members by Rank

Web Development > JavaScript / DHTML / AJAX > reset list box is not working javascript
Ad:
You are currently viewing page 1 of this multi-page discussion thread
Permalink
Jan 19th, 2009
0

reset list box is not working javascript

Expand Post »
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <script type="text/javascript">
  2. function resetLists(){
  3.  document.forms["body"].elements["select1"].selectedIndex = 1;
  4.  document.forms["body"].elements["select2"].selectedIndex = 1;
  5.  }
  6. </script>
  7.  
  8. </head>
  9.  
  10. <!--Start the html body-->
  11. <body id="body" onload="isColorSet()">
  12. <form action="" onsubmit="return false;">
  13.  
  14. <form id="body">
  15.  
  16.  
  17. <!--This is where the changes happen-->
  18. <div id="test">This is supposed to be a nice little navbar. Select a new font to change this one's</div>
  19.  
  20. </br>
  21. </br>
  22. <div id="position" style="visibility:visible;position:absolute;bottom:0px; right:0px">
  23. <center>
  24. <table width="100%" border ="4" background="raindrop.jpg" >
  25.  
  26. <td>
  27. <select name="select1" onchange="newFont(this.value);">
  28. <option value="">Font Family</option>
  29. <option value="Arial">Arial</option>
  30. <option value="Helvetica">Helvetica</option>
  31. <option value="Tahoma">Tahoma</option>
  32. <option value="Times New Roman">Times New Roman</option>
  33. <option value="Verdana">Verdana</option>
  34. </select>
  35. </td>
  36.  
  37. <td>
  38. <select name="select2" onchange="newFontColor(this.value);">
  39. <option value="">Font Color</option>
  40. <option value="Black">Black</option>
  41. <option value="Blue">Blue</option>
  42. <option value="Green">Green</option>
  43. <option value="Orange">Orange</option>
  44. <option value="red">Red</option>
  45. <option value="Violet">Violet</option>
  46. <option value="Yellow">Yellow</option>
  47. </select>
  48. </td>
  49.  
  50. <td>
  51. <button onclick="resetLists()">Reset</button>
  52. </td>
  53.  

here is my code

it works when i test it using a blank listbox with no value

but it is not working with the color value

it says Error:document.forms.body.elements is null or not an object

any idea?

thank you

ayi
Reputation Points: 10
Solved Threads: 0
Light Poster
ayi_102 is offline Offline
27 posts
since Nov 2008
Permalink
Jan 19th, 2009
-6
Re: reset list box is not working javascript
Hmm it says SCRIPT ERROR when i click RESET (Nothing else happens)

Hmmm,looks good though!
Last edited by The Dude; Jan 19th, 2009 at 5:34 pm.
Reputation Points: 1054
Solved Threads: 28
Nearly a Senior Poster
The Dude is offline Offline
3,425 posts
since Dec 2005
Permalink
Jan 19th, 2009
0

Re: reset list box is not working javascript

sorry

i forget to attach the function to get the value to the listbox

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <html>
  2.  
  3. <head>
  4.  
  5. <script type="text/javascript">
  6. function bakeCookie(name,value){
  7.   args=arguments;argc=args.length;
  8.   expires=(argc>2) ? args[2] : null;
  9.   path=(argc>3) ? args[3] : null;
  10.   domain=(argc>4) ? args[4] : null;
  11.   secure=(argc>5) ? args[5] : false;
  12.   expDate=new Date();day=24*60*60*1000;
  13.   if(expires){expDate.setTime(expDate.getTime()+expires*day);}
  14.   document.cookie=name+"="+escape(value)+
  15.     ((expires===null) ? "" : ("; expires="+expDate.toUTCString()))+
  16.     ((path===null) ? "" : ("; path="+path))+
  17.     ((domain===null) ? "" : ("; domain="+domain))+
  18.     ((secure===true) ? "; secure" : "");
  19. }
  20. </script>
  21.  
  22. <script type="text/javascript">
  23. function eatCookieVal(name) {
  24.   endstr=document.cookie.indexOf(";",name);
  25.   if(endstr===-1) {endstr=document.cookie.length;}
  26.   return unescape(document.cookie.substring(name,endstr));
  27. }
  28. function eatCookie(name) {
  29.   arg=name+"="; alen=arg.length;
  30.   clen=document.cookie.length; i=0;
  31.     while (i<clen) {
  32.       j=i+alen;
  33.       if(document.cookie.substring(i,j)===arg){
  34.         return eatCookieVal(j);
  35.         }
  36.       i=document.cookie.indexOf(" ",i)+1;
  37.       if(i===0){break;}
  38.    }
  39. }
  40. </script>
  41.  
  42. <script type="text/javascript">
  43. function newColor(entry,areaID){ // use DOM method
  44.   bakeCookie("colorSet",entry,7); // save for a week
  45.   if (!areaID){areaID="body";} // default to whole body
  46.   document.getElementById(areaID).style.background=entry;
  47. }
  48. </script>
  49.  
  50. <script type="text/javascript">
  51. function newFont(entry,areaID){ // use DOM method
  52.   bakeCookie("fontSet",entry,7); // save for a week
  53.   if (!areaID){areaID="body";} // default to whole body
  54.   document.getElementById(areaID).style.fontFamily=entry;
  55. }
  56. </script>
  57.  
  58. <script type="text/javascript">
  59. function isColorSet(areaID) { // points at color element
  60.  
  61.   colorSet=null;
  62.   if(!(colorSet=eatCookie("colorSet"))){colorSet=null;}
  63.   if(colorSet!==null){newColor2(colorSet,areaID);}
  64.  
  65.   fontSet=null;
  66.   if(!(fontSet=eatCookie("fontSet"))){fontSet=null;}
  67.   if(fontSet!==null){newFont(fontSet,areaID);}
  68.  
  69. }
  70. </script>
  71.  
  72. <script type="text/javascript">
  73. function resetLists(){
  74.  document.forms["body"].elements["select1"].selectedIndex = 1;
  75.  document.forms["body"].elements["select2"].selectedIndex = 1;
  76.  }
  77. </script>
  78.  
  79.  
  80.  
  81. </head>
  82.  
  83. <!--Start the html body-->
  84. <body id="body" onload="isColorSet()">
  85. <form action="" onsubmit="return false;">
  86.  
  87. <select name="select1" onchange="newColor(this.value);">
  88. <option value="">Background Color</option>
  89. <option value="Blue">Blue</option>
  90. <option value="Green">Green</option>
  91. <option value="Orange">Orange</option>
  92. <option value="Red">Red</option>
  93. <option value="Violet">Violet</option>
  94. <option value="Yellow">Yellow</option>
  95. </select>
  96.  
  97. <select name="select2" onchange="newFont(this.value);">
  98. <option value="">Font Family</option>
  99. <option value="Arial">Arial</option>
  100. <option value="Helvetica">Helvetica</option>
  101. <option value="Tahoma">Tahoma</option>
  102. <option value="Times New Roman">Times New Roman</option>
  103. <option value="Verdana">Verdana</option>
  104. </select>
  105.  
  106.  
  107.  
  108. </br>
  109. </br>
  110.  
  111. BLA BLA BLA BLA BLABLA BLA BLA BLA
  112.  
  113. </form>
  114.  
  115. <button onclick="resetLists()">Reset</button>
  116.  
  117. </body>
  118.  
  119. </html>

this is the code

try it

i want the reset button set the value back to index 1 for every listbox

but i cannot do that
any suggestion?

thank you
Reputation Points: 10
Solved Threads: 0
Light Poster
ayi_102 is offline Offline
27 posts
since Nov 2008
Permalink
Jan 19th, 2009
1

Re: reset list box is not working javascript

This will do it...

javascript Syntax (Toggle Plain Text)
  1. <script type="text/javascript">
  2. function resetLists(){
  3.  
  4.  document.forms[0].select1.selectedIndex = 0; 
  5.  
  6.  document.forms[0].select2.selectedIndex = 0;
  7.  }
  8. </script>
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Permalink
Jan 19th, 2009
0

Re: reset list box is not working javascript

your code is just reset the listbox but not reset the background color, font type and font size to default

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. function resetLists(){
  2.  document.forms[0].select1.selectedIndex = 1; 
  3.  
  4.  document.forms[0].select2.selectedIndex = 1;
  5.  }

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. function resetLists(){
  2. document.getElementById('select1').selectedIndex = 1;
  3. document.getElementById('select2').selectedIndex = 1;
  4. document.getElementById('select3').selectedIndex = 1;
  5. document.getElementById('select4').selectedIndex = 1;
  6. }

your code and this code do the same thing
just focused the listbox to the selected index
but not change the background color back to the default color

well, i still trying to do it now

but any help would be great

thank you

ayi
Reputation Points: 10
Solved Threads: 0
Light Poster
ayi_102 is offline Offline
27 posts
since Nov 2008
Permalink
Jan 19th, 2009
0

Re: reset list box is not working javascript

Sorry, but you didnt mention anything about changing the background back to normal.
I've just based it on the code you've provided and fixed it...

Ok this one should do it...
javascript Syntax (Toggle Plain Text)
  1. <script type="text/javascript">
  2. function resetLists(){
  3.  
  4.  document.forms[0].select1.selectedIndex = 0; 
  5.  
  6.  document.forms[0].select2.selectedIndex = 0;
  7. if ((document.forms[0].select1.selectedIndex == 0) && (document.forms[0].select2.selectedIndex == 0)) {
  8. document.body.style.backgroundColor = '#FFF'; };
  9.  }
  10. </script>
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Permalink
Jan 19th, 2009
0

Re: reset list box is not working javascript

thank you so much for the help

but when i refresh the page, it not saved to the cookie

so the color still like the one without default background
Reputation Points: 10
Solved Threads: 0
Light Poster
ayi_102 is offline Offline
27 posts
since Nov 2008
Permalink
Jan 19th, 2009
0

Re: reset list box is not working javascript

how do you save the cookie when someone click on reset button?

i am totally confuse now

coz i still cant save the reset value in the cookie

any help would be good
Reputation Points: 10
Solved Threads: 0
Light Poster
ayi_102 is offline Offline
27 posts
since Nov 2008
Permalink
Jan 20th, 2009
0

Re: reset list box is not working javascript

We dont actually need to save any values in the cookie, since we know that we are dealing with theRESET button. So we definitely want to clear everything what we have and have it cleaned!
Here's the code and ive fixed it and removed unnecessary script blocks.
javascript Syntax (Toggle Plain Text)
  1. <script type="text/javascript">
  2.  
  3. function bakeCookie(name,value){
  4.   args=arguments;argc=args.length;
  5.   expires=(argc>2) ? args[2] : null;
  6.   path=(argc>3) ? args[3] : null;
  7.   domain=(argc>4) ? args[4] : null;
  8.   secure=(argc>5) ? args[5] : false;
  9.   expDate=new Date();day=24*60*60*1000;
  10.   if(expires){expDate.setTime(expDate.getTime()+expires*day);}
  11.   document.cookie=name+"="+escape(value)+
  12.     ((expires===null) ? "" : ("; expires="+expDate.toUTCString()))+
  13.     ((path===null) ? "" : ("; path="+path))+
  14.     ((domain===null) ? "" : ("; domain="+domain))+
  15.     ((secure===true) ? "; secure" : "");
  16. }
  17.  
  18.  
  19. function eatCookieVal(name) {
  20.   endstr=document.cookie.indexOf(";",name);
  21.   if(endstr===-1) {endstr=document.cookie.length;}
  22.   return unescape(document.cookie.substring(name,endstr));
  23. }
  24. function eatCookie(name) {
  25.   arg=name+"="; alen=arg.length;
  26.   clen=document.cookie.length; i=0;
  27.     while (i<clen) {
  28.       j=i+alen;
  29.       if(document.cookie.substring(i,j)===arg){
  30.         return eatCookieVal(j);
  31.         }
  32.       i=document.cookie.indexOf(" ",i)+1;
  33.       if(i===0){break;}
  34.    }
  35. }
  36.  
  37. /* Additional function added for deleting cookies */
  38.  
  39. function deleteCookie(name) {
  40.    document.cookie = name + '=; expires=Thu, 01-Jan-70 00:00:01 GMT' + '; path='; }
  41.  
  42. function newColor(entry,areaID){ // use DOM method
  43.   bakeCookie("colorSet",entry,7); // save for a week
  44.   if (!areaID){areaID="body";} // default to whole body
  45.   document.getElementById(areaID).style.background=entry;
  46. }
  47.  
  48. function newFont(entry,areaID){ // use DOM method
  49.   bakeCookie("fontSet",entry,7); // save for a week
  50.   if (!areaID){areaID="body";} // default to whole body
  51.   document.getElementById(areaID).style.fontFamily=entry;
  52. }
  53.  
  54. function isColorSet(areaID) { // points at color element
  55.  
  56.   colorSet=null;
  57.   if(!(colorSet=eatCookie("colorSet"))){colorSet=null;}
  58.   if(colorSet!==null){newColor2(colorSet,areaID);}
  59.  
  60.   fontSet=null;
  61.   if(!(fontSet=eatCookie("fontSet"))){fontSet=null;}
  62.   if(fontSet!==null){newFont(fontSet,areaID);}
  63.  
  64. }
  65.  
  66. function resetLists(){
  67. document.forms[0].select1.options[0].selected = true;
  68. document.forms[0].select2.options[0].selected = true;
  69.  
  70. if ((document.forms[0].select1.selectedIndex == 0) && (document.forms[0].select2.selectedIndex == 0)) { 
  71. deleteCookie('colorSet');
  72. deleteCookie('fontSet');
  73. document.body.setAttribute('style','font:normal 80% Arial, sans-serif;background:#fff;color:#000;'); }
  74. }
  75. </script>
Last edited by essential; Jan 20th, 2009 at 3:45 am.
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Permalink
Jan 20th, 2009
0

Re: reset list box is not working javascript

i made changes in here in the resetLists

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. function resetLists(){
  2. document.forms[0].select1.options[1].selected = true;
  3. document.forms[0].select2.options[1].selected = true;
  4.  
  5. if ((document.forms[0].select1.selectedIndex == 1) && (document.forms[0].select2.selectedIndex == 1)) { 
  6. deleteCookie('colorSet');
  7. deleteCookie('fontSet');
  8. document.body.setAttribute('style','font:normal 80% Arial, sans-serif;background:#fff;color:#000;'); }
  9. }
  10. </script>

the selected index goes to number 1 which is mean arial font and blue background color

when push reset button, the listbox is set to the default but the color and the font is not reset to the default

eg. i choose red background and helvetica font

then i press reset button

the background color and the font should be change into blue background and arial font

but it is not changing, just the listbox that reset to default
the page is still the same

the previous code you gave me

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <script type="text/javascript">
  2. function resetLists(){
  3.  
  4.  document.forms[0].select1.selectedIndex = 0; 
  5.  
  6.  document.forms[0].select2.selectedIndex = 0;
  7. if ((document.forms[0].select1.selectedIndex == 0) && (document.forms[0].select2.selectedIndex == 0)) {
  8. document.body.style.backgroundColor = '#FFF'; };
  9.  }
  10. </script>

it works it change the background color and font to the default setting

but the problem is that when i refresh the page, the page is not default but it goes to the previous setting

eg. i choose red background and helvetica font

then i press reset button

the background color and the font change into blue background and arial font

but when i refresh the page, the background back to red and helvetica font where it should be blue background and arial

I hope you can understand my english

thank you

sorry for troubling you

it is confusing to understand with my bad english
Reputation Points: 10
Solved Threads: 0
Light Poster
ayi_102 is offline Offline
27 posts
since Nov 2008

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: need to include a listbox from one html page to another
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Geolocation API





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC