reset list box is not working javascript

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

•
•
Join Date: Nov 2008
Posts: 27
Reputation: ayi_102 is an unknown quantity at this point 
Solved Threads: 0
ayi_102 ayi_102 is offline Offline
Light Poster

reset list box is not working javascript

 
0
  #1
Jan 19th, 2009
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
Reply With Quote Quick reply to this message  
•
•
Join Date: Dec 2005
Posts: 3,251
Reputation: The Dude will become famous soon enough The Dude will become famous soon enough 
Solved Threads: 25
The Dude's Avatar
The Dude The Dude is offline Offline
Nearly a Senior Poster
 
-6
  #2
Jan 19th, 2009
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.
Reply With Quote Quick reply to this message  
•
•
Join Date: Nov 2008
Posts: 27
Reputation: ayi_102 is an unknown quantity at this point 
Solved Threads: 0
ayi_102 ayi_102 is offline Offline
Light Poster

Re: reset list box is not working javascript

 
0
  #3
Jan 19th, 2009
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
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: reset list box is not working javascript

 
1
  #4
Jan 19th, 2009
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>
Dev.Opera — FOLLOW THE STANDARDS, BREAK THE RULES...
Reply With Quote Quick reply to this message  
•
•
Join Date: Nov 2008
Posts: 27
Reputation: ayi_102 is an unknown quantity at this point 
Solved Threads: 0
ayi_102 ayi_102 is offline Offline
Light Poster

Re: reset list box is not working javascript

 
0
  #5
Jan 19th, 2009
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
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: reset list box is not working javascript

 
0
  #6
Jan 19th, 2009
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>
Reply With Quote Quick reply to this message  
•
•
Join Date: Nov 2008
Posts: 27
Reputation: ayi_102 is an unknown quantity at this point 
Solved Threads: 0
ayi_102 ayi_102 is offline Offline
Light Poster

Re: reset list box is not working javascript

 
0
  #7
Jan 19th, 2009
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
Reply With Quote Quick reply to this message  
•
•
Join Date: Nov 2008
Posts: 27
Reputation: ayi_102 is an unknown quantity at this point 
Solved Threads: 0
ayi_102 ayi_102 is offline Offline
Light Poster

Re: reset list box is not working javascript

 
0
  #8
Jan 19th, 2009
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
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: reset list box is not working javascript

 
0
  #9
Jan 20th, 2009
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.
Reply With Quote Quick reply to this message  
•
•
Join Date: Nov 2008
Posts: 27
Reputation: ayi_102 is an unknown quantity at this point 
Solved Threads: 0
ayi_102 ayi_102 is offline Offline
Light Poster

Re: reset list box is not working javascript

 
0
  #10
Jan 20th, 2009
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
Reply With Quote Quick reply to this message  
Reply
1 2

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


Views: 2591 | Replies: 13
Thread Tools Search this Thread



Tag cloud for JavaScript / DHTML / AJAX
acid2 ajax ajaxcode ajaxhelp animate array automatically autoplay beta boarder box bug button calendar captcha card cart codes column cookies createrange() css cursor date debugger decimal design developer dom download dropdown element enter error events firefox firehose flash focus form frameworks getselection google gwt html htmlform iframe image() index java javascript javascripts jawascriptruntimeerror jquery jsp listbox maps marquee masterpage menu microsoft mimic mp3 mp4 offline onmouseover parameters php player post problem programming progressbar prototype rating redirect regex safari scale scriptlets search select size sources sql starrating text textarea toggle twitter validation variables w3c web website window windowofwords windowsxp xml xspf
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC