A javascripted rembering dropdownbox

@subitOct 30.2008

I want a dropdown box with the names for a couple of radiostations and a “play”-button that connects to the choosen radiostation and i want the dropdown to remember the radiostation last choosed. How do i do? Worth saying is, im still a scriptnewbee ?

I found ~~[url]~~http://www.quirksmode.org/js/cookies.html[/url] wich explained a lot but i need a hint or two on how to make it a “remembering” dropdownbox.

_________________ ____

to post a comment

JavaScript

12 Comments(s) _↴

@subitauthorOct 30.2008 — #Heres the dropdowncode

<code>

<html>

<head>

<script language="JavaScript">

function LinkUp()

{

var number = document.DropDown.DDlinks.selectedIndex;

location.href = document.DropDown.DDlinks.options[number].value;

}

</script>

</head>

<body class="spot_start_body" text=#000000 link=#000000 vlink=#000000 alink=#000000 bgcolor=#ffffff >

<form name="DropDown">

<select name="DDlinks">

<option selected>--Välj en radio--

<option value="http://player.minradio.no/Player.aspx?playerkey=rockklassiker_se&stationkey=rockklassiker_se#"> Rockklassiker

<option value="http://www.rixfm.com/#"> Rixs FM

<option value="http://www.nrj.se/?page=1#"> NRJ

</select>

<input type="button" value="Play" onClick="LinkUp()">

</form>

</body>

</html>

</code>

@subitauthorNov 03.2008 — #Ok, ive done some research and what i understand is that i need to assign a value to each option and then i need a cookiemaker with getCookie and createCookie..

Anyone knows something helpfull? ?

Ill keep researhing on while u pros answear this post ?

@MrNobodyNov 03.2008 — #Yes, you need to find the cookie functions (most anywhere on the Internet). The following are the two additional functions you'll need:

[CODE]function SaveSelection(sel)
 {
 var oneYear = 365 * 24 * 60 * 60 * 1000;
 var expDate = new Date((new Date()).getTime()+oneYear);
 var str = sel.options[sel.selectedIndex].value;
 setCookie(sel.name, str, expDate, "/");
 return true;
 }
 function RestoreSelection(sel)
 {
 var str = getCookie(sel.name);
 if (str)
 {
 var x, len = sel.options.length;
 for (x=0; x<len; ++x)
 {
 if (sel.options[x].value == str)
 {
 sel.selectedIndex = x;
 break;
 }
 }
 }
 return true;
 }[/CODE]

This is the HTML you'll need (fill in the ellipses with your own stuff):

[code=html]<select ... onchange="return SaveSelection(this);">
 ...
 </select>[/code]

Then, after the close of the FORM, do this:

[code=html]</form>
 <script type="text/javascript">
 RestoreSelection(document.forms['formName'].elements['selectName']);
 </script>[/code]

@subitauthorNov 04.2008 — #Hi and thank u alot =)

But i have to admit i find it hard to find out where to fill in the proper info, this is what i have edited:

<code>

<html>

<head>

<script language="JavaScript">

function SaveSelection(sel)

{

var oneYear = 365 * 24 * 60 * 60 * 1000;

var expDate = new Date((new Date()).getTime()+oneYear);

var str = sel.options[sel.selectedIndex].value;

setCookie(DDlinks, str, expDate, "/");

return true;

}

function RestoreSelection(sel)

{

var str = getCookie(DDlinks);

if (str)

{

var x, len = sel.options.length;

for (x=0; x<len; ++x)

{

if (sel.options[x].value == str)

{

sel.selectedIndex = x;

break;

}

}

}

return true;

}

</script>

</head>

<body class="spot_start_body" text=#000000 link=#000000 vlink=#000000 alink=#000000 bgcolor=#ffffff >

<form name="DropDown">

<select name="DDlinks" onchange="return SaveSelection(this);">

<option selected>--Välj en radio--

<option value="http://player.minradio.no/Player.aspx?playerkey=rockklassiker_se&stationkey=rockklassiker_se#">

Rockklassiker</option>

<option value="http://www.rixfm.com/#"> Rixs FM</option>

<option value="http://www.nrj.se/?page=1#"> NRJ</option>

</select>

<input type="button" value="Play" onClick="LinkUp()">

</form>

</form>

<script type="text/javascript">

RestoreSelection(document.forms['DropDown'].elements['selectName']);

</script>

</body>

</html>

<code>

Am i somewhat close?

Still trying to find a getCookie function i understand and can edit.

Thanks again

@MrNobodyNov 04.2008 — #Leave [B]sel.name[/B] in the two functions. This automatically picks up the name specified on the SELECT. Change [B]selectName[/B] to the name of your SELECT ("DDlinks"). Lastly, you have two closing /FORM tags. Delete one of them. Then, give it a try. If it doesn't work, post a public link to the page so I can check it out live.

@subitauthorNov 05.2008 — #Ive done the changes u wrote, but it wont work. I dont know if this makes a difference but its a custommade sidebar for my work and it lays on my desktop local on disc. Does that make a difference? Ive also tried adding some so the radiochannels opens in a new window.

<code>

<html>

<head>

<script language="JavaScript">

function SaveSelection(sel)

{

var oneYear = 365 * 24 * 60 * 60 * 1000;

var expDate = new Date((new Date()).getTime()+oneYear);

var str = sel.options[sel.selectedIndex].value;

setCookie(sel.name, str, expDate, "/");

return true;

}

function RestoreSelection(sel)

{

var str = getCookie(sel.name);

if (str)

{

var x, len = sel.options.length;

for (x=0; x<len; ++x)

{

if (sel.options[x].value == str)

{

sel.selectedIndex = x;

break;

}

}

}

return true;

}

function RLinkUp(selopt)
   {
   if(selopt!="") // if variable is not empty then open window
   {
   NewWin=window.open(selopt,"win1")
   }
   }

</script>

</head>

<body class="spot_start_body" text=#000000 link=#000000 vlink=#000000 alink=#000000 bgcolor=#ffffff >

<form name="DropDown">

<select name="RadioLinks" onchange="return SaveSelection(this);">

<option selected>--Välj en radio--

<option value="http://player.minradio.no/Player.aspx?playerkey=rockklassiker_se&stationkey=rockklassiker_se#"> Rockklassiker</option>

<option value="http://www.rixfm.com/#"> Rixs FM</option>

<option value="http://www.nrj.se/?page=1#"> NRJ</option>

</select>

<input type="button" value="Play" onClick="RLinkUp()">

</form>

<script type="text/javascript">

RestoreSelection(document.forms['DropDown'].elements['RadioLinks']);

</script>

</body>

</html>

</code>

however i think i need to get this line in somehow:

<code>

<select name="RadioLinks" onChange="RLinkUp(this.options [this.selectedIndex].value)">

</code>

worth saying is that ive been forced to change the names on the DDlinks to RadioLinks cause this is acctually a small part of that sidebar.

But as i said.. it wont work ><

Any idee where i went wrong?

@subitauthorNov 12.2008 — #pushing up topic

@MrNobodyNov 12.2008 — #pushing up topic[/QUOTE]
Hmmm, don't know how I missed your last post...
it wont work ><

Any idee where i went wrong?[/QUOTE]
Yep, first problem is that I don't see where you went and got the cookie functions I mentioned.
however i think i need to get this line in somehow:
[CODE]<select name="RadioLinks" onChange="RLinkUp(this.options [this.selectedIndex].value)">[/CODE][/QUOTE]
OK, change this:
[CODE]<select name="RadioLinks" onchange="return SaveSelection(this);">[/CODE]
to this:
[CODE]<select name="RadioLinks" onchange="SaveSelection(this); return RLinkUp(this);">[/CODE]
And change your RLinkUp function to this:

[CODE]function RLinkUp(sel)
 {
 var selopt = sel.options[sel.selectedIndex].value;
 if(selopt!="") // if variable is not empty then open window
 {
 NewWin=window.open(selopt,"win1");
 }
 return true;
 }[/CODE]

I also notice this -- which won't work:
[CODE]<input type="button" value="Play" onClick="RLinkUp()">[/CODE]
Change that to this:
[CODE]<input type="button" value="Play" onClick="return RLinkUp(RadioLinks);">[/CODE]

@subitauthorNov 13.2008 — #Hihi!

Found the function for set and get cookie, still doesnt work, it complains about line 79 when the radiostation is picked then when i press play it complains about line 85

<code>

<html>

<head>

<script language="JavaScript">

function Set_Cookie( Rmlight, SaveSelection, 365,'/',domain,secure )

{

var today = new Date();

today.setTime( today.getTime() );

if ( expires )

{

expires = expires * 365 * 24 * 60 * 60 * 1000;

}

var expires_date = new Date( today.getTime() + (expires) );

document.cookie = Rmlight + "=" +escape( value ) +

( ( expires ) ? ";expires=" + expires_date.toGMTString() : "" ) +

( ( path ) ? ";path=" + path : "" ) +

( ( domain ) ? ";domain=" + domain : "" ) +

( ( secure ) ? ";secure" : "" );

}

function Get_Cookie( Rmlight ) {

var start = document.cookie.indexOf( name + "=" );

var len = start + name.length + 1;

if ( ( !start ) &&

( name != document.cookie.substring( 0, name.length ) ) )

{

return null;

}

if ( start == -1 ) return null;

var end = document.cookie.indexOf( ";", len );

if ( end == -1 ) end = document.cookie.length;

return unescape( document.cookie.substring( len, end ) );

}

function SaveSelection(sel)

{

var oneYear = 365 * 24 * 60 * 60 * 1000;

var expDate = new Date((new Date()).getTime()+oneYear);

var str = sel.options[sel.selectedIndex].value;

setCookie(sel.name, str, expDate, "/");

return true;

}

function RestoreSelection(sel)

{

var str = getCookie(sel.name);

if (str)

{

var x, len = sel.options.length;

for (x=0; x<len; ++x)

{

if (sel.options[x].value == str)

{

sel.selectedIndex = x;

break;

}

}

}

return true;

}

function RLinkUp(sel) //line 64

{

var selopt = sel.options[sel.selectedIndex].value;

if(selopt!="") // if variable is not empty then open window

{

NewWin=window.open(selopt,"win1");

}

return true;

}

</script>

</head>

<body class="spot_start_body" text=#000000 link=#000000 vlink=#000000 alink=#000000 bgcolor=#ffffff >

<form name="DropDown">

<select name="RadioLinks" onchange="SaveSelection(this); return RLinkUp(this);">

<option selected>--Välj en radio--

<option value="http://player.minradio.no/Player.aspx?playerkey=rockklassiker_se&stationkey=rockklassiker_se#"> Rockklassiker</option>

<option value="http://www.rixfm.com/#"> Rixs FM</option>

<option value="http://www.nrj.se/?page=1#"> NRJ</option>

</select>

<input type="button" value="Play" onClick="return RLinkUp(RadioLinks);">

</form>

<script type="text/javascript">

RestoreSelection(document.forms['DropDown'].elements['RadioLinks']);

</script>

</body>

</html>

</code>

So now i have the following javacommand:

function set_cookie

function get_cookie

function SaveSelection

function RestoreSelection

function RLinkUp

Still doenst work but i guess uve figured that out already =D The codes are taken from 2 different websites plus your modifictions, guess ive mixed those wrong somehow.

@MrNobodyNov 13.2008 — #I copied your page, replaced the cookie functions with better ones, and the page worked perfectly first time out. Here are the cookie functions I used:

[CODE]// ---------------------------------------- //
 function getCookie(name) {
 var arg = name + "=";
 var alen = arg.length;
 var clen = document.cookie.length;
 var i = 0;
 while (i < clen) {
 var j = i + alen;
 if (document.cookie.substring(i, j) == arg)
 return getCookieVal (j);
 i = document.cookie.indexOf(" ", i) + 1;
 if (i == 0) break;
 }
 return null;
 }
 function getCookieVal(offset) {
 var endstr = document.cookie.indexOf (";", offset);
 if (endstr == -1)
 endstr = document.cookie.length;
 return unescape(document.cookie.substring(offset, endstr)).replace(/+/g, " ");
 }
 function setCookie(name, value) {
 var argv = setCookie.arguments;
 var argc = setCookie.arguments.length;
 var expires = (argc > 2) ? argv[2] : null;
 var path = (argc > 3) ? argv[3] : null;
 var domain = (argc > 4) ? argv[4] : null;
 var secure = (argc > 5) ? argv[5] : false;
 document.cookie = name + "=" + escape(value.replace(/ /g, "+")) + 
 ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) + 
 ((path == null) ? "" : ("; path=" + path)) + 

 ((domain == null) ? "" : ("; domain=" + domain)) + 

 ((secure == true) ? "; secure" : "");
 }
 function delCookie(name) {
 exp = new Date();
 exp.setTime(exp.getTime() - (24*60*60*1000));
 var cval = getCookie(name);
 cval = (cval == null) ? "" : cval;
 document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
 }
 // ---------------------------------------- //[/CODE]

@subitauthorNov 13.2008 — #Damn =D Thank u a lot =D I really appriciate it, uve been most kind. =) It works perfect and now ill try to implement it in my sidebar project ^{^^{^}}

Thank u again =)

This is the full code for all u other who needs these:

<code>

<html>

<head>

<script language="JavaScript">

function getCookie(name) {

var arg = name + "=";

var alen = arg.length;

var clen = document.cookie.length;

var i = 0;

while (i < clen) {

var j = i + alen;

if (document.cookie.substring(i, j) == arg)

return getCookieVal (j);

i = document.cookie.indexOf(" ", i) + 1;

if (i == 0) break;

}

return null;

}

function getCookieVal(offset) {

var endstr = document.cookie.indexOf (";", offset);

if (endstr == -1)

endstr = document.cookie.length;

return unescape(document.cookie.substring(offset, endstr)).replace(/+/g, " ");

}

function setCookie(name, value) {

var argv = setCookie.arguments;

var argc = setCookie.arguments.length;

var expires = (argc > 2) ? argv[2] : null;

var path = (argc > 3) ? argv[3] : null;

var domain = (argc > 4) ? argv[4] : null;

var secure = (argc > 5) ? argv[5] : false;

document.cookie = name + "=" + escape(value.replace(/ /g, "+")) +

((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +

((path == null) ? "" : ("; path=" + path)) +

((domain == null) ? "" : ("; domain=" + domain)) +

((secure == true) ? "; secure" : "");

}

function delCookie(name) {

exp = new Date();

exp.setTime(exp.getTime() - (24*60*60*1000));

var cval = getCookie(name);

cval = (cval == null) ? "" : cval;

document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();

}

function SaveSelection(sel)

{

var oneYear = 365 * 24 * 60 * 60 * 1000;

var expDate = new Date((new Date()).getTime()+oneYear);

var str = sel.options[sel.selectedIndex].value;

setCookie(sel.name, str, expDate, "/");

return true;

}

function RestoreSelection(sel)

{

var str = getCookie(sel.name);

if (str)

{

var x, len = sel.options.length;

for (x=0; x<len; ++x)

{

if (sel.options[x].value == str)

{

sel.selectedIndex = x;

break;

}

}

}

return true;

}

function RLinkUp(sel)

{

var selopt = sel.options[sel.selectedIndex].value;

if(selopt!="") // if variable is not empty then open window

{

NewWin=window.open(selopt,"win1");

}

return true;

}

</script>

</head>

<body class="spot_start_body" text=#000000 link=#000000 vlink=#000000 alink=#000000 bgcolor=#ffffff >

<form name="DropDown">

<select name="RadioLinks" onchange="SaveSelection(this); return RLinkUp(this);">

<option selected>--Välj en radio--

<option value="http://player.minradio.no/Player.aspx?playerkey=rockklassiker_se&stationkey=rockklassiker_se#">

Rockklassiker</option>

<option value="http://www.rixfm.com/#"> Rixs FM</option>

<option value="http://www.nrj.se/?page=1#"> NRJ</option>

</select>

<input type="button" value="Play" onClick="return RLinkUp(RadioLinks);">

</form>

<script type="text/javascript">

RestoreSelection(document.forms['DropDown'].elements['RadioLinks']);

</script>

</body>

</html>

</code>

And once again Thank u very much MrNobody. =)

@subitauthorNov 22.2008 — #...

Also in #JavaScript _↴

How do I end an onClick event?Difference between month & year AJAX request problem

Success!

Help @subit spread the word by sharing this article on Twitter...

Tweet This

A javascripted rembering dropdownbox

12 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

A javascripted rembering dropdownbox

12 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

12 Comments(s) _↴

Also in #JavaScript _↴