reset list box is not working javascript

Question

ayi_102 0 Light Poster

15 Years Ago

<script type="text/javascript">
function resetLists(){
 document.forms["body"].elements["select1"].selectedIndex = 1;
 document.forms["body"].elements["select2"].selectedIndex = 1;
 }
</script>

</head>

<!--Start the html body-->
<body id="body" onload="isColorSet()">
<form action="" onsubmit="return false;">

<form id="body">


<!--This is where the changes happen-->
<div id="test">This is supposed to be a nice little navbar. Select a new font to change this one's</div>

</br>
</br>
<div id="position" style="visibility:visible;position:absolute;bottom:0px; right:0px">
<center>
<table width="100%" border ="4" background="raindrop.jpg" >

<td>
<select name="select1" onchange="newFont(this.value);">
<option value="">Font Family</option>
<option value="Arial">Arial</option>
<option value="Helvetica">Helvetica</option>
<option value="Tahoma">Tahoma</option>
<option value="Times New Roman">Times New Roman</option>
<option value="Verdana">Verdana</option>
</select>
</td>

<td>
<select name="select2" onchange="newFontColor(this.value);">
<option value="">Font Color</option>
<option value="Black">Black</option>
<option value="Blue">Blue</option>
<option value="Green">Green</option>
<option value="Orange">Orange</option>
<option value="red">Red</option>
<option value="Violet">Violet</option>
<option value="Yellow">Yellow</option>
</select>
</td>

<td>
<button onclick="resetLists()">Reset</button>
</td>

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

javascript

3 Contributors
13 Replies
292 Views
2 Days Discussion Span
Latest Post 15 Years Ago Latest Post by ayi_102

The Dude 944 Nearly a Senior Poster

15 Years Ago

Hmm it says SCRIPT ERROR when i click RESET (Nothing else happens)

Hmmm,looks good though!

essential 84 Posting Shark

15 Years Ago

This will do it...

<script type="text/javascript">
function resetLists(){

 document.forms[0].select1.selectedIndex = 0; 

 document.forms[0].select2.selectedIndex = 0;
 }
</script>

ayi_102 commented: awesome +1

essential 84 Posting Shark

15 Years Ago

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...

<script type="text/javascript">
function resetLists(){

 document.forms[0].select1.selectedIndex = 0; 

 document.forms[0].select2.selectedIndex = 0;
if ((document.forms[0].select1.selectedIndex == 0) && (document.forms[0].select2.selectedIndex == 0)) {
document.body.style.backgroundColor = '#FFF'; };
 }
</script>

essential 84 Posting Shark

15 Years Ago

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.

<script type="text/javascript">

function bakeCookie(name,value){
  args=arguments;argc=args.length;
  expires=(argc>2) ? args[2] : null;
  path=(argc>3) ? args[3] : null;
  domain=(argc>4) ? args[4] : null;
  secure=(argc>5) ? args[5] : false;
  expDate=new Date();day=24*60*60*1000;
  if(expires){expDate.setTime(expDate.getTime()+expires*day);}
  document.cookie=name+"="+escape(value)+
    ((expires===null) ? "" : ("; expires="+expDate.toUTCString()))+
    ((path===null) ? "" : ("; path="+path))+
    ((domain===null) ? "" : ("; domain="+domain))+
    ((secure===true) ? "; secure" : "");
}


function eatCookieVal(name) {
  endstr=document.cookie.indexOf(";",name);
  if(endstr===-1) {endstr=document.cookie.length;}
  return unescape(document.cookie.substring(name,endstr));
}
function eatCookie(name) {
  arg=name+"="; alen=arg.length;
  clen=document.cookie.length; i=0;
    while (i<clen) {
      j=i+alen;
      if(document.cookie.substring(i,j)===arg){
        return eatCookieVal(j);
        }
      i=document.cookie.indexOf(" ",i)+1;
      if(i===0){break;}
   }
}

/* Additional function added for deleting cookies */
 
function deleteCookie(name) {
   document.cookie = name + '=; expires=Thu, 01-Jan-70 00:00:01 GMT' + '; path='; }

function newColor(entry,areaID){ // use DOM method
  bakeCookie("colorSet",entry,7); // save for a week
  if (!areaID){areaID="body";} // default to whole body
  document.getElementById(areaID).style.background=entry;
}

function newFont(entry,areaID){ // use DOM method
  bakeCookie("fontSet",entry,7); // save for a week
  if (!areaID){areaID="body";} // default to whole body
  document.getElementById(areaID).style.fontFamily=entry;
}

function isColorSet(areaID) { // points at color element
  
  colorSet=null;
  if(!(colorSet=eatCookie("colorSet"))){colorSet=null;}
  if(colorSet!==null){newColor2(colorSet,areaID);}
  
  fontSet=null;
  if(!(fontSet=eatCookie("fontSet"))){fontSet=null;}
  if(fontSet!==null){newFont(fontSet,areaID);}
  
}

function resetLists(){
document.forms[0].select1.options[0].selected = true;
document.forms[0].select2.options[0].selected = true;

if ((document.forms[0].select1.selectedIndex == 0) && (document.forms[0].select2.selectedIndex == 0)) { 
deleteCookie('colorSet');
deleteCookie('fontSet');
document.body.setAttribute('style','font:normal 80% Arial, sans-serif;background:#fff;color:#000;'); }
}
</script>

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

ayi_102 0 Light Poster · Answer 1 · 2009-01-20T03:54:36+00:00

sorry

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

<html>

<head>

<script type="text/javascript">
function bakeCookie(name,value){
  args=arguments;argc=args.length;
  expires=(argc>2) ? args[2] : null;
  path=(argc>3) ? args[3] : null;
  domain=(argc>4) ? args[4] : null;
  secure=(argc>5) ? args[5] : false;
  expDate=new Date();day=24*60*60*1000;
  if(expires){expDate.setTime(expDate.getTime()+expires*day);}
  document.cookie=name+"="+escape(value)+
    ((expires===null) ? "" : ("; expires="+expDate.toUTCString()))+
    ((path===null) ? "" : ("; path="+path))+
    ((domain===null) ? "" : ("; domain="+domain))+
    ((secure===true) ? "; secure" : "");
}
</script>

<script type="text/javascript">
function eatCookieVal(name) {
  endstr=document.cookie.indexOf(";",name);
  if(endstr===-1) {endstr=document.cookie.length;}
  return unescape(document.cookie.substring(name,endstr));
}
function eatCookie(name) {
  arg=name+"="; alen=arg.length;
  clen=document.cookie.length; i=0;
    while (i<clen) {
      j=i+alen;
      if(document.cookie.substring(i,j)===arg){
        return eatCookieVal(j);
        }
      i=document.cookie.indexOf(" ",i)+1;
      if(i===0){break;}
   }
}
</script>

<script type="text/javascript">
function newColor(entry,areaID){ // use DOM method
  bakeCookie("colorSet",entry,7); // save for a week
  if (!areaID){areaID="body";} // default to whole body
  document.getElementById(areaID).style.background=entry;
}
</script>

<script type="text/javascript">
function newFont(entry,areaID){ // use DOM method
  bakeCookie("fontSet",entry,7); // save for a week
  if (!areaID){areaID="body";} // default to whole body
  document.getElementById(areaID).style.fontFamily=entry;
}
</script>

<script type="text/javascript">
function isColorSet(areaID) { // points at color element
  
  colorSet=null;
  if(!(colorSet=eatCookie("colorSet"))){colorSet=null;}
  if(colorSet!==null){newColor2(colorSet,areaID);}
  
  fontSet=null;
  if(!(fontSet=eatCookie("fontSet"))){fontSet=null;}
  if(fontSet!==null){newFont(fontSet,areaID);}
  
}
</script>

<script type="text/javascript">
function resetLists(){
 document.forms["body"].elements["select1"].selectedIndex = 1;
 document.forms["body"].elements["select2"].selectedIndex = 1;
 }
</script>



</head>

<!--Start the html body-->
<body id="body" onload="isColorSet()">
<form action="" onsubmit="return false;">

<select name="select1" onchange="newColor(this.value);">
<option value="">Background Color</option>
<option value="Blue">Blue</option>
<option value="Green">Green</option>
<option value="Orange">Orange</option>
<option value="Red">Red</option>
<option value="Violet">Violet</option>
<option value="Yellow">Yellow</option>
</select>

<select name="select2" onchange="newFont(this.value);">
<option value="">Font Family</option>
<option value="Arial">Arial</option>
<option value="Helvetica">Helvetica</option>
<option value="Tahoma">Tahoma</option>
<option value="Times New Roman">Times New Roman</option>
<option value="Verdana">Verdana</option>
</select>



</br>
</br>

BLA BLA BLA BLA BLABLA BLA BLA BLA

</form>

<button onclick="resetLists()">Reset</button>

</body>

</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

ayi_102 0 Light Poster · Answer 2 · 2009-01-20T06:37:44+00:00

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

function resetLists(){
 document.forms[0].select1.selectedIndex = 1; 

 document.forms[0].select2.selectedIndex = 1;
 }

function resetLists(){
document.getElementById('select1').selectedIndex = 1;
document.getElementById('select2').selectedIndex = 1;
document.getElementById('select3').selectedIndex = 1;
document.getElementById('select4').selectedIndex = 1;
}

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

ayi_102 0 Light Poster · Answer 3 · 2009-01-20T07:40:15+00:00

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

ayi_102 0 Light Poster · Answer 4 · 2009-01-20T09:31:04+00:00

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

ayi_102 0 Light Poster · Answer 5 · 2009-01-20T14:14:22+00:00

i made changes in here in the resetLists

function resetLists(){
document.forms[0].select1.options[1].selected = true;
document.forms[0].select2.options[1].selected = true;

if ((document.forms[0].select1.selectedIndex == 1) && (document.forms[0].select2.selectedIndex == 1)) { 
deleteCookie('colorSet');
deleteCookie('fontSet');
document.body.setAttribute('style','font:normal 80% Arial, sans-serif;background:#fff;color:#000;'); }
}
</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

<script type="text/javascript">
function resetLists(){

 document.forms[0].select1.selectedIndex = 0; 

 document.forms[0].select2.selectedIndex = 0;
if ((document.forms[0].select1.selectedIndex == 0) && (document.forms[0].select2.selectedIndex == 0)) {
document.body.style.backgroundColor = '#FFF'; };
 }
</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

ayi_102 0 Light Poster · Answer 6 · 2009-01-20T14:19:36+00:00

this is the code that i got from you

give it a try

<html>

<head>

<script type="text/javascript">

function bakeCookie(name,value){
  args=arguments;argc=args.length;
  expires=(argc>2) ? args[2] : null;
  path=(argc>3) ? args[3] : null;
  domain=(argc>4) ? args[4] : null;
  secure=(argc>5) ? args[5] : false;
  expDate=new Date();day=24*60*60*1000;
  if(expires){expDate.setTime(expDate.getTime()+expires*day);}
  document.cookie=name+"="+escape(value)+
    ((expires===null) ? "" : ("; expires="+expDate.toUTCString()))+
    ((path===null) ? "" : ("; path="+path))+
    ((domain===null) ? "" : ("; domain="+domain))+
    ((secure===true) ? "; secure" : "");
}


function eatCookieVal(name) {
  endstr=document.cookie.indexOf(";",name);
  if(endstr===-1) {endstr=document.cookie.length;}
  return unescape(document.cookie.substring(name,endstr));
}
function eatCookie(name) {
  arg=name+"="; alen=arg.length;
  clen=document.cookie.length; i=0;
    while (i<clen) {
      j=i+alen;
      if(document.cookie.substring(i,j)===arg){
        return eatCookieVal(j);
        }
      i=document.cookie.indexOf(" ",i)+1;
      if(i===0){break;}
   }
}

/* Additional function added for deleting cookies */
 
function deleteCookie(name) {
   document.cookie = name + '=; expires=Thu, 01-Jan-70 00:00:01 GMT' + '; path='; }

function newColor(entry,areaID){ // use DOM method
  bakeCookie("colorSet",entry,7); // save for a week
  if (!areaID){areaID="body";} // default to whole body
  document.getElementById(areaID).style.background=entry;
}

function newFont(entry,areaID){ // use DOM method
  bakeCookie("fontSet",entry,7); // save for a week
  if (!areaID){areaID="body";} // default to whole body
  document.getElementById(areaID).style.fontFamily=entry;
}

function isColorSet(areaID) { // points at color element
  
  colorSet=null;
  if(!(colorSet=eatCookie("colorSet"))){colorSet=null;}
  if(colorSet!==null){newColor(colorSet,areaID);}
  
  fontSet=null;
  if(!(fontSet=eatCookie("fontSet"))){fontSet=null;}
  if(fontSet!==null){newFont(fontSet,areaID);}
  
}

function resetLists(){
document.forms[0].select1.options[1].selected = true;
document.forms[0].select2.options[1].selected = true;

if ((document.forms[0].select1.selectedIndex == 1) && (document.forms[0].select2.selectedIndex == 1)) { 
deleteCookie('colorSet');
deleteCookie('fontSet');
document.body.setAttribute('style','font:normal 80% Arial, sans-serif;background:#fff;color:#000;'); }
}
</script>


</head>

<!--Start the html body-->
<body id="body" onload="isColorSet()">
<form action="" onsubmit="return false;">

<select name="select1" onchange="newColor(this.value);">
<option value="">Background Color</option>
<option value="Blue">Blue</option>
<option value="Green">Green</option>
<option value="Orange">Orange</option>
<option value="Red">Red</option>
<option value="Violet">Violet</option>
<option value="Yellow">Yellow</option>
</select>

<select name="select2" onchange="newFont(this.value);">
<option value="">Font Family</option>
<option value="Arial">Arial</option>
<option value="Helvetica">Helvetica</option>
<option value="Tahoma">Tahoma</option>
<option value="Times New Roman">Times New Roman</option>
<option value="Verdana">Verdana</option>
</select>



</br>
</br>

BLA BLA BLA BLA BLABLA BLA BLA BLA

</form>

<button onclick="resetLists()">Reset</button>

</body>

</html>

this is a better explanation than my english lol

it shows u what problem that i have

reset is not working properly

essential 84 Posting Shark Featured Poster · Answer 7 · 2009-01-20T16:50:43+00:00

Just create another file, that say's (testpage.html) and bring up the codes in here into that document.
This is a working script tested and working in IE and Opera--

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<script type="text/javascript">
<!--
function bakeCookie(name,value){
  args=arguments;argc=args.length;
  expires=(argc>2) ? args[2] : null;
  path=(argc>3) ? args[3] : null;
  domain=(argc>4) ? args[4] : null;
  secure=(argc>5) ? args[5] : false;
  expDate=new Date();day=24*60*60*1000;
  if(expires){expDate.setTime(expDate.getTime()+expires*day);}
  document.cookie=name+"="+escape(value)+
    ((expires===null) ? "" : ("; expires="+expDate.toUTCString()))+
    ((path===null) ? "" : ("; path="+path))+
    ((domain===null) ? "" : ("; domain="+domain))+
    ((secure===true) ? "; secure" : "");
}


function eatCookieVal(name) {
  endstr=document.cookie.indexOf(";",name);
  if(endstr===-1) {endstr=document.cookie.length;}
  return unescape(document.cookie.substring(name,endstr));
}
function eatCookie(name) {
  arg=name+"="; alen=arg.length;
  clen=document.cookie.length; i=0;
    while (i<clen) {
      j=i+alen;
      if(document.cookie.substring(i,j)===arg){
        return eatCookieVal(j);
        }
      i=document.cookie.indexOf(" ",i)+1;
      if(i===0){break;}
   }
}

/* Additional function added for deleting cookies */
 
function deleteCookie(name) {
   document.cookie = name + '=; expires=Thu, 01-Jan-70 00:00:01 GMT' + '; path='; }

function newColor(entry,areaID){ // use DOM method
  bakeCookie("colorSet",entry,7); // save for a week
  if (!areaID){areaID="body";} // default to whole body
  document.getElementById(areaID).style.background=entry;
}

function newFont(entry,areaID){ // use DOM method
  bakeCookie("fontSet",entry,7); // save for a week
  if (!areaID){areaID="body";} // default to whole body
  document.getElementById(areaID).style.fontFamily=entry;
}

function isColorSet(areaID) { // points at color element
  
  colorSet=null;
  if(!(colorSet=eatCookie("colorSet"))){colorSet=null;}
  if(colorSet!==null){newColor2(colorSet,areaID);}
  
  fontSet=null;
  if(!(fontSet=eatCookie("fontSet"))){fontSet=null;}
  if(fontSet!==null){newFont(fontSet,areaID);}
  
}

function resetLists(){
document.forms[0].select1.selectedIndex = 0;
document.forms[0].select2.selectedIndex = 0;
if ((document.forms[0].select1.selectedIndex == 0) && (document.forms[0].select2.selectedIndex == 0)) { 
deleteCookie('colorSet');
deleteCookie('fontSet');
document.body.style.backgroundColor = '#FFF'; 
document.body.style.color = '#000'; 
document.body.style.fontSize = '80%';
alert(document.cookie); }

}
//-->
</script>
</head>
<!--Start the html body-->
<body id="body" onload="isColorSet()">
<h3>Sample</h3>
<form action="#" onsubmit="return false;">

<select name="select1" onchange="newColor(this.value);">
<option value="">Background Color</option>
<option value="Blue">Blue</option>
<option value="Green">Green</option>
<option value="Orange">Orange</option>
<option value="Red">Red</option>
<option value="Violet">Violet</option>
<option value="Yellow">Yellow</option>
</select>

<select name="select2" onchange="newFont(this.value);">
<option value="">Font Family</option>
<option value="Arial">Arial</option>
<option value="Helvetica">Helvetica</option>
<option value="Tahoma">Tahoma</option>
<option value="Times New Roman">Times New Roman</option>
<option value="Verdana">Verdana</option>
</select>



</br>
</br>

BLA BLA BLA BLA BLABLA BLA BLA BLA

</form>

<button onclick="resetLists()">Reset</button>

</body>

</html>

essential 84 Posting Shark Featured Poster · Answer 8 · 2009-01-20T16:52:05+00:00

If this doesnt work. Then i suggest that you try things with PHP--its more precise and reliable than using cookies...

ayi_102 0 Light Poster · Answer 9 · 2009-01-22T04:19:51+00:00

thank you for the help essential

regards,

ayi