The Dude
Nearly a Senior Poster
3,485 posts since Dec 2005
Reputation Points: 1,054
Solved Threads: 31
Have something to say? Contribute New Article Reply to this Article
reset list box is not working javascript
<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
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
This will do it...
<script type="text/javascript">
function resetLists(){
document.forms[0].select1.selectedIndex = 0;
document.forms[0].select2.selectedIndex = 0;
}
</script>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
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>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
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
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>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
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
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>If this doesnt work. Then i suggest that you try things with PHP--its more precise and reliable than using cookies...
This question has already been solved
You
© 2012 DaniWeb® LLC
