Executing a javascript from a option/select box??

[JSDNUK]

Can anybody help me with this??

Been attempting to use an old nav script to execute a script which should switch the active style sheet of the document. Not the best at JS, so any help would be greatly appreciated.

Many Thanks!!

Script below...

function surfto(form) {
var myindex=form.dest.selectedIndex
if (myindex == "")
{}
else {
// document.location.href = (form.dest.options[myindex].value);
setActiveStyleSheet(form.dest.options[myindex].value);
}
}

function displayColorPreferenceControls(){
/* Check if this will work before displaying controls */
if(navigator.cookieEnabled && document.styleSheets && (document.styleSheets[0].addRule || document.styleSheets[0].insertRule)){
document.write(
"<form id='userColorpref' style='margin-bottom:0px' name='userColorpref'>"+
"<label for='colorChooser'>Theme: </label>"+
"<select name='colorChooser' id='colorChooser' onchange='surfto(this.form)'>"+
"<option value='default'>Default</option>"+
"<option value='highvis'>High Visability</option>"+
"</select>"+
"</form>"
);
}else{
/* if their browser supports JavaScript but not some of the functions or cookies are disabled then you can output alternative content here.*/
document.write('Javascript and Cookies need to be enabled for this functionality');
}
}

 

[theniteowl]

If you only want to show the select box when javascript is enabled you do not really have to use a function, just place this code in the body of the page where you want it to appear. The code is contained between the comment tags <!-- //--> so if the browser does not have javascript enabled the code will not appear on the page.

<SCRIPT type="text/JavaScript">
<!--
  if(document.styleSheets){
    document.write(                       
      "<form id='userColorpref' style='margin-bottom:0px' name='userColorpref'>"+
      "<label for='colorChooser'>Theme: </label>"+
      "<select name='colorChooser' id='colorChooser' onchange='chgStyle(this)'>"+
      "<option value='default'>Default</option>"+
      "<option value='highvis'>High Visability</option>"+
      "</select>"+        
      "</form>"                
    );
  }
//-->
</SCRIPT>

I removed all testing except for document.styleSheets, it did not seem necessary for what you are doing and never evaluated true in IE. It is also no longer a function, just straight javascript. If javascript is enabled then the select appears, otherwise it does not so no real need for a message either. If javascript was not enabled the message would never display anyway.

Note also that I changed the select box to use this instead of this.form. It was not working with this.form and was really unnecessary since "this" sends the select box object anyway, no need to drill down further.

For the other function I changed the name to something more appropriate and removed the if statement. I assume that if someone changes the page style and decide they want to go back they are going to select the default option which should set them back to default. This if statement would cause it to NOT change if the first option was selected.

Put this function into the head of the page:

function chgStyle(which) {
  var myindex=which.selectedIndex;
  setActiveStyleSheet(which.options[which.selectedIndex].value);
}

Of course, this script relies on you having another function called setActiveStyleSheet which you did not post above. If you do not have a function for that you can use this version of the above function instead:

function chgStyle(which) {
  var myindex=which.selectedIndex;
  document.body.className = which.options[which.selectedIndex].value;
}

Google, you're my hero!

 

[JSDNUK]

Thanks for your help NiteOwl!! Tried something very similar earlier but with no luck, this version (on the other hand) works brilliantly