PDA

View Full Version : Need help to get selected values of <select> tag to stay...



ShadowIce
06-04-2009, 07:52 PM
Hi all, I figured out a way to have different cookie names for different parts of a website. Now I have but 1 small problem. the name of the cookie that my code should be returning is index[0], index[1], etc... PROBLEM is that index[0] SHOULD = whatever number the selected index is, and should load it when u refresh the page, thus displaying the value of that index that was selected the 1st time.

here's the code:


<html><head><title>bgchanger</title></head>
<body onload="loadall();">

<script type="text/javascript">
showfile("?");

function showfile() {
var pathname = location.href;
var filename = pathname.substr(pathname.lastIndexOf("/")+1,pathname.length);
var filename = filename.substr(filename,filename.lastIndexOf(".") );
if(filename == ""){
var filename = pathname.substr(pathname.lastIndexOf("/")+1,pathname.length);
var filename = filename.substr(filename,filename.lastIndexOf(".") )+"?";
}
return filename;
}
function showpath() {
var pathname = location.pathname;
pathname = pathname.substr(1,pathname.length);
}

var backgroundImages =
[ "",
"images/CrystalForest_Sky.jpg" ];
var backgroundNames =
[ "Default",
"Crystal Forest" ];
var backgroundColors =
[ "red",
"green",
"blue" ];
var backgroundColornames =
[ "red",
"green",
"blue" ];
var backgroundPositions =
[ "top Left",
"top Center",
"top Right",
"Left",
"Center",
"Right",
"bottom Left",
"bottom Center",
"bottom Right" ];
var backgroundPositionnames =
[ "top Left",
"top Center",
"top Right",
"Left",
"Center",
"Right",
"bottom Left",
"bottom Center",
"bottom Right" ];

function loadall(){
getDivBG("image"+"_"+showfile());
loadOptions(document.TheForm.favSelect);
loadpositionopt(document.TheForm.favSelect2);
setDiv("position"+"_"+showfile(),"repeat"+"_"+showfile());
setIndex();
alert(document.cookie);
}

function loadOptions( into )
{
for ( var b = 0; b < backgroundImages.length; ++b )
{
into.options[into.options.length] =
new Option( backgroundNames[b], backgroundImages[b] );
}
}

function loadpositionopt( into1 )
{
for ( var c1 = 0; c1 < backgroundPositions.length; ++c1 )
{
into1.options[into1.options.length] =
new Option( backgroundPositionnames[c1], backgroundPositions[c1] );
}
}

function loadcoloropt( into2 )
{
for ( var b1 = 0; b1 < backgroundColors.length; ++b1 )
{
into2.options[into2.options.length] =
new Option( backgroundColornames[b1], backgroundColors[b1] );
}
}

function saveindex(){
var favIndex = document.TheForm.favSelect.selectedIndex;
var favIndex2 = document.TheForm.favSelect2.selectedIndex;
if(favIndex != "" || favIndex != ""){
if(favIndex){
DeleteCookie("index"+"["+favIndex+"]"+"_"+showfile()+"["+favIndex+"]");
}else if(favIndex2){
DeleteCookie("index"+"["+favIndex2+"]"+"_"+showfile()+"["+favIndex2+"]");
}
}
SetCookie("index"+"["+favIndex+"]"+"_"+showfile()+"["+favIndex+"]", favIndex, exp);
SetCookie("index"+"["+favIndex+"]"+"_"+showfile()+"["+favIndex2+"]", favIndex2, exp);
}

function savepos(){
var favPos = document.forms.TheForm.favSelect2.value;
if ( favPos == "" ) return;
SetCookie("position"+"_"+showfile(), favPos, exp);
location.href = location.href;
}

function savecolor(){
var favColor = document.forms.TheForm.favSelect3.value;
if ( favColor == "" ) return;
SetCookie("color"+"_"+showfile(), favColor, exp);
}

function saverep(rep){
var favrep = rep;
if ( favrep == "" ) return;
SetCookie("repeat"+"_"+showfile(), favrep, exp);
}

function setColor(cookie){
document.getElementById("about").style.backgroundColor=GetCookie(cookie);
}

function setIndex(){

for (var x = 0; x < document.TheForm.favSelect.length; x++) {

document.TheForm.favSelect.selectedIndex = GetCookie("index"+"_"+showfile()+"["+x+"]");

}

for (var x = 0; x < document.TheForm.favSelect2.length; x++) {

document.TheForm.favSelect2.selectedIndex = GetCookie("index"+"["+x+"]"+"_"+showfile()+"["+x+"]");

}

alert("document.TheForm.favSelect.selectedIndex="+document.TheForm.favSelect.selectedIndex);
alert("document.TheForm.favSelect2.selectedIndex="+document.TheForm.favSelect2.selectedIndex);

}

function setDiv(cookie,cookie2){
document.getElementById("about").style.backgroundPosition=GetCookie(cookie);
document.getElementById("about").style.backgroundRepeat=GetCookie(cookie2);
}

function saveImage()
{
var favImage = document.forms.TheForm.favSelect.value;
if (favImage == "") DeleteCookie("position"+"_"+showfile());
SetCookie("image"+"_"+showfile(), favImage, exp);
getDivBG("image"+"_"+showfile());
location.href = location.href;
}

function menu(){
document.write('<form name="TheForm">\n'
+'<td valign="top" style="width: 25%; height: 100%;"><br><hr><Center><span id="menutitle">News Menu</span></Center><hr><br>\n'
+'<span id="opt1">Background Image: </span><select style="width: 100%; height: 10;" name="favSelect" onchange="getDivsBG(this); saveImage(); saveindex();">\n'
+' <option value="">--choose--</option>\n'
+' </select></font>\n'
+'<span id="opt2">Background Position: </span><select style="width: 100%; height: 10;" name="favSelect2" onchange="getPosBG(this); savepos(); saveindex();">\n'
+' <option value="">--choose--</option>\n'
+' </select></td>\n'
+'</form>\n');
}

var expDays = 365;
var exp = new Date();
exp.setTime(exp.getTime() + (expDays*24*60*60*1000));

function GetCookie(name)
{
var cookies = document.cookie.split(/; /g);
var arg = name + "=";
for ( var c = 0; c < cookies.length; ++c )
{
var ck = cookies[c];
if ( ck.indexOf(arg) == 0 )
{
var temp = ck.split(/=/);
return unescape(temp[1]);
}
}
return "";
}

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) +
((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
((path == null) ? "" : ("; path=" + path)) +
((domain == null) ? "" : ("; domain=" + domain)) +
((secure == true) ? "; secure" : "");
}

function DeleteCookie (name)
{
var exp = new Date();
exp.setTime (exp.getTime() - 1);
var cval = GetCookie (name);
document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}

function getBodyBG(cookie,cookie2,cookie3)
{
document.body.style.backgroundImage="url('" + GetCookie(cookie) + "')";
document.body.style.backgroundPosition=GetCookie(cookie2);
document.body.style.backgroundRepeat=GetCookie(cookie3);
}

function getColorBG(bgcolor){
if(bgcolor != null){
document.getElementById("about").style.backgroundColor=GetCookie(bgcolor);
}
}

function getPosBG(bg){
if(bg != null){
document.getElementById("about").style.backgroundPosition=GetCookie(bg);
}
}

function getDivsBG(pic)
{
if ( pic != ""){
document.getElementById("about").style.backgroundImage="url('" + pic + "')";
//document.getElementById("blahnews").style.backgroundImage="url('" + pic + "')";
//document.getElementById("blahnews").style.backgroundImage="url('" + pic + "')";
}
}

function getDivBG(cookie)
{
document.getElementById("about").style.backgroundImage="url('" + GetCookie(cookie) + "')";
//document.getElementById("blahnews").style.backgroundImage="url('" + GetCookie(cookie) + "')";
}

function getnews(newsbody,newsdata){

checkxmlhttprequest();

var txtFile = new XMLHttpRequest();
txtFile.open("GET", newsdata, true);
txtFile.onreadystatechange = function() {
if (txtFile.readyState === 4) { // Makes sure the document is ready to parse.
if (txtFile.status === 200) { // Makes sure it's found the file.
allText = txtFile.responseText;
//lines = txtFile.responseText.split(/\r?\n/g); // Will separate each line into an array
document.getElementById(newsbody).innerHTML = allText;
} else {
document.getElementById(newsbody).innerHTML = 'News file not found';
}
}
}
txtFile.send();

}

function gettitle(newstitle,title_data){

var txtFile = new XMLHttpRequest();
txtFile.open("GET", title_data, true);
txtFile.onreadystatechange = function() {
if (txtFile.readyState === 4) { // Makes sure the document is ready to parse.
if (txtFile.status === 200) { // Makes sure it's found the file.
allText = txtFile.responseText;
lines = txtFile.responseText.split("\n"); // Will separate each line into an array
document.getElementById(newstitle).innerHTML = lines;
} else {
document.getElementById(newstitle).innerHTML = '<span id=\"newsnotfound\">News file not found</span>';
}
}
}
txtFile.send();
}

function checkxmlhttprequest(){
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
} else {
alert('Sorry, your browser doesn\'t support XMLHTTPRequests');
return null;
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
} else {
alert('Sorry, your browser doesn\'t support XMLHTTPRequests');
return null;
}
}
</script>

<div id="about" style="width: 400px; height: 300px; background-Color: #44CFFC;">
</div>
<script type="text/javascript">menu();</script>
</table></td>
</div>
</body>
</html>

ANY help is GREATLY appreciated! :)

~SI~

forum_amnesiac
06-05-2009, 07:18 AM
I hope I'm not off the mark here but the problem is that when a page is refreshed all variables get reset.

A possible way round this is to have a general cookie that records what the last index number, favindex?, was. So each time you write another index[] cookie you also update the general cookie. eg if the last index number was 17 then in cookie "indexrecord" will be recorded 17.

When page is refreshed you open this cookie and use that as your start point.

However, you must remember at some point to destroy or reset that cookie when you have finished with the page, or else you will always start at the last number stored in there.

ShadowIce
06-05-2009, 03:17 PM
Yes, I understand that. But in order to learn, I need to see an example. Thats the only way I was taught to learn.

Thanks! :)

ANY help is GREATLY appreciated :) any criticism is greatly IGNORED ;)

~SI~

ShadowIce
06-05-2009, 06:51 PM
Guys. please. could you help a guy out? I have until wednesday, otherwise I'm gonna have to shutdown my site. :( And I don't want that. I promise this is the last question in Javascript i'll have for quite a while.

ANY help is GREATLY appreciated! :)

Thanks!

~SI~

forum_amnesiac
06-06-2009, 11:06 AM
You probably already have functions like these to write your cookies but I am showing them here in case you don't. They are for session cookies and are self explanatory in what they do. A session cookie exists as long as the browser window is open.

nam is the name of the cookie and val is the value. The readCookie function returns the value of the cookie if it exists, or null if it doesn't.


function readCookie(nam) {
var tC = document.cookie.split('; ');
for (var i = tC.length - 1; i >= 0; i--) {
var x = tC[i].split('=');
if (nam = x[0]) return unescape(x[1]);}
return null;}

function writeCookie(nam,val) {
document.cookie = nam + '=' + escape(val);}

At the start of your code you need to read from the value from the cookie, if it doesn't exist then use the first of your "index" numbers.

As you use each "index" number then you need to write that number to the cookie, using the writeCookie function.

This way you should always be able to retrieve the last "index" that you were in if the page gets refreshed.

The final act of your code should be to reset the session cookie, using the writeCookie function. This will enable the code to start from the first "index" next time round.

ShadowIce
06-06-2009, 05:53 PM
Ok, ALLS i need is a fixed version of saveindex() and setindex() NOTHING more. :) I learn by example, not by PARTIAL code.

ALLS i need is the name of each index file to be equal to the selected index value and i need it to ALWAYS load and change the selected option of the dropdown to whatever the selectedIndex value is.

For example, if I selected:

"myimage" in the drop down, if i refreshed OR left the page, and came back to the page later, it would automatically select "myimage" again, and change the background of the div i select to "myimage.jpg"

also, the name of the index[x] (x = a number), it should have a different name for EVERY page. So simply use something like: "index'['+showfile()+']'" that way, it will name the cookie "index['index'] instead of "index".

here's the code:

ONLY pay attention to saveindex(), setindex(), and load_all()


<html>

<head><title>bgchanger</title></head>

<body onload="loadall();">

<script type="text/javascript">
showfile();

function showfile() {
var pathname = location.href;
var filename = pathname.substr(pathname.lastIndexOf("/")+1,pathname.length);
var filename = filename.substr(filename,filename.lastIndexOf(".") );
if(filename == ""){
var filename = pathname.substr(pathname.lastIndexOf("/")+1,pathname.length);
var filename = filename.substr(filename,filename.lastIndexOf(".") )+"?";
}
return filename;
}
function showpath() {
var pathname = location.pathname;
pathname = pathname.substr(1,pathname.length);
}

var backgroundImages =
[ "",
"myimage.jpg" ];
var backgroundNames =
[ "Default",
"My Image" ];
var backgroundColors =
[ "red",
"green",
"blue" ];
var backgroundColornames =
[ "red",
"green",
"blue" ];
var backgroundPositions =
[ "top Left",
"top Center",
"top Right",
"Left",
"Center",
"Right",
"bottom Left",
"bottom Center",
"bottom Right" ];
var backgroundPositionnames =
[ "top Left",
"top Center",
"top Right",
"Left",
"Center",
"Right",
"bottom Left",
"bottom Center",
"bottom Right" ];

function loadall(){
getDivBG("image"+"_"+showfile());
loadOptions(document.TheForm.favSelect);
loadpositionopt(document.TheForm.favSelect2);
setDiv("position"+"_"+showfile(),"repeat"+"_"+showfile());
setIndex();
}

function loadOptions( into )
{
for ( var b = 0; b < backgroundImages.length; ++b )
{
into.options[into.options.length] =
new Option( backgroundNames[b], backgroundImages[b] );
}
}

function loadpositionopt( into1 )
{
for ( var c1 = 0; c1 < backgroundPositions.length; ++c1 )
{
into1.options[into1.options.length] =
new Option( backgroundPositionnames[c1], backgroundPositions[c1] );
}
}

function loadcoloropt( into2 )
{
for ( var b1 = 0; b1 < backgroundColors.length; ++b1 )
{
into2.options[into2.options.length] =
new Option( backgroundColornames[b1], backgroundColors[b1] );
}
}

function saveindex(){
var favIndex = document.TheForm.favSelect.selectedIndex;
var favIndex2 = document.TheForm.favSelect2.selectedIndex;
SetCookie("index"+"["+favIndex+"]"+"_"+showfile()+"["+favIndex+"]", favIndex, exp);
SetCookie("index_2"+"["+favIndex2+"]"+"_"+showfile()+"["+favIndex2+"]", favIndex2, exp);
}

function savepos(){
var favPos = document.forms.TheForm.favSelect2.value;
if ( favPos == "" ) return;
SetCookie("position"+"_"+showfile(), favPos, exp);
location.href = location.href;
}

function savecolor(){
var favColor = document.forms.TheForm.favSelect3.value;
if ( favColor == "" ) return;
SetCookie("color"+"_"+showfile(), favColor, exp);
}

function saverep(rep){
var favrep = rep;
if ( favrep == "" ) return;
SetCookie("repeat"+"_"+showfile(), favrep, exp);
}

function setColor(cookie){
document.getElementById("about").style.backgroundColor=GetCookie(cookie);
}

function setIndex(){

/*for (var x = 0; x < document.TheForm.favSelect.length; x++) {

document.TheForm.favSelect.selectedIndex = GetCookie("index"+"["+x+"]"+"_"+showfile()+"["+x+"]");

}

for (var x1 = 0; x1 < document.TheForm.favSelect2.length; x1++) {

document.TheForm.favSelect2.selectedIndex = GetCookie("index_2"+"["+x1+"]"+"_"+showfile()+"["+x1+"]");

}
*/

var favIndex = document.TheForm.favSelect.selectedIndex;
var favIndex2 = document.TheForm.favSelect2.selectedIndex;

alert("index"+"["+document.TheForm.favSelect.selectedIndex+"]"+"_"+showfile()+"["+document.TheForm.favSelect.selectedIndex+"]"+"="+GetCookie("index"+"["+document.TheForm.favSelect.selectedIndex+"]"+"_"+showfile()+"["+document.TheForm.favSelect.selectedIndex+"]"));
alert("index_2"+"["+document.TheForm.favSelect.selectedIndex+"]"+"_"+showfile()+"["+document.TheForm.favSelect2.selectedIndex+"]"+"="+GetCookie("index_2"+"["+document.TheForm.favSelect2.selectedIndex+"]"+"_"+showfile()+"["+document.TheForm.favSelect2.selectedIndex+"]"));

document.TheForm.favSelect.selectedIndex = GetCookie("index"+"["+favIndex+"]"+"_"+showfile()+"["+favIndex+"]");
document.TheForm.favSelect2.selectedIndex = GetCookie("index_2"+"["+favIndex2+"]"+"_"+showfile()+"["+favIndex2+"]");

}

function setDiv(cookie,cookie2){
document.getElementById("about").style.backgroundPosition=GetCookie(cookie);
document.getElementById("about").style.backgroundRepeat=GetCookie(cookie2);
}

function saveImage()
{
var favImage = document.forms.TheForm.favSelect.value;
if (favImage == "") DeleteCookie("position"+"_"+showfile());
SetCookie("image"+"_"+showfile(), favImage, exp);
getDivBG("image"+"_"+showfile());
location.href = location.href;
}

function menu(){
document.write('<form name="TheForm">n'
+'<td valign="top" style="width: 25%; height: 100%;"><br><hr><Center><span id="menutitle">News Menu</span></Center><hr><br>n'
+'<span id="opt1">Background Image: </span><select style="width: 100%; height: 10;" name="favSelect" onchange="getDivsBG(this); saveImage(); saveindex();">n'
+' <option value="">--choose--</option>n'
+' </select></font>n'
+'<span id="opt2">Background Position: </span><select style="width: 100%; height: 10;" name="favSelect2" onchange="getPosBG(this); savepos(); saveindex();">n'
+' <option value="">--choose--</option>n'
+' </select></td>n'
+'</form>n');
}

var expDays = 365;
var exp = new Date();
exp.setTime(exp.getTime() + (expDays*24*60*60*1000));

function GetCookie(name)
{
var cookies = document.cookie.split(/; /g);
var arg = name + "=";
for ( var c = 0; c < cookies.length; ++c )
{
var ck = cookies[c];
if ( ck.indexOf(arg) == 0 )
{
var temp = ck.split(/=/);
return unescape(temp[1]);
}
}
return "";
}

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) +
((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
((path == null) ? "" : ("; path=" + path)) +
((domain == null) ? "" : ("; domain=" + domain)) +
((secure == true) ? "; secure" : "");
}

function DeleteCookie (name)
{
var exp = new Date();
exp.setTime (exp.getTime() - 1);
var cval = GetCookie (name);
document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}

function getBodyBG(cookie,cookie2,cookie3)
{
document.body.style.backgroundImage="url('" + GetCookie(cookie) + "')";
document.body.style.backgroundPosition=GetCookie(cookie2);
document.body.style.backgroundRepeat=GetCookie(cookie3);
}

function getColorBG(bgcolor){
if(bgcolor != null){
document.getElementById("about").style.backgroundColor=GetCookie(bgcolor);
}
}

function getPosBG(bg){
if(bg != null){
document.getElementById("about").style.backgroundPosition=GetCookie(bg);
}
}

function getDivsBG(pic)
{
if ( pic != ""){
document.getElementById("about").style.backgroundImage="url('" + pic + "')";
//document.getElementById("blahnews").style.backgroundImage="url('" + pic + "')";
//document.getElementById("blahnews").style.backgroundImage="url('" + pic + "')";
}
}

function getDivBG(cookie)
{
document.getElementById("about").style.backgroundImage="url('" + GetCookie(cookie) + "')";
//document.getElementById("blahnews").style.backgroundImage="url('" + GetCookie(cookie) + "')";
}
</script>

<div id="about" style="width: 400px; height: 300px; background-Color: #44CFFC;">
</div>
<script type="text/javascript">menu();</script>
</table></td>
</div>
</body>
</html>

Thanks! :)

~SI~