Hey all I have the following Webapp project structure
And my classregister.html should call my functions in the "scripts" file. However, I dont think it is doing this as I am not able to select from my second dropdown. It does work though if I have the function in the same file using or jsfiddle. Where am I going wrong here please?
calssregister.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" href="styles/style.css" type="text/css" />
</head>
<body>
<form id="classregister" action="#" method="post">
<div>
<p>
<label class="category_div" id="category_div">Please select
Style:
<select name="category" class="required-entry" id="category"
onchange="return dynamicdropdown()">
<option value="">Select Style</option>
<option value="X">X</option>
<option value="Y">Y</option>
<option value="Z">Z</option>
<option value="A">A</option>
</select>
</label>
</p>
<p>
<label class="sub_category_div" id="sub_category_div">Please
select your Level: <select name="subcategory" id="subcategory"
onchange="return dynamicdropdownone()">
<option value="">Please select your Level</option>
</select>
</label>
</p>
<p>
<label class="sub_subcategory_div" id="sub_subcategory_div">Please
select Dance Class: <select name="sub_subcategory"
id="sub_subcategory" multiple>
<option value="">Please select a Dance Class</option>
</select>
</label>
</p>
</div>
</form>
<script src="scripts/myfunctions.js"></script>
</body>
</html>
myfunctions.js looks like so:
function dynamicdropdown() {
var e = document.getElementById("category");
var listindex = e.options[e.selectedIndex].value;
//listindex = this.options[this.selectedIndex].value;
document.getElementById("sub_subcategory").length = 0;
document.getElementById("sub_subcategory").options[0] = new Option("Please select your Level", "");
document.getElementById("subcategory").length = 0;
switch (listindex) {
case "X":
document.getElementById("subcategory").options[0] = new Option("Please select Level", "");
document.getElementById("subcategory").options[1] = new Option("Beginner", "X_Beginner");
document.getElementById("subcategory").options[2] = new Option("Intermediate", "X_Intermediate");
break;
case "Y":
document.getElementById("subcategory").options[0] = new Option("Please select Level", "");
document.getElementById("subcategory").options[1] = new Option("Beginner", "Y_Beginner");
document.getElementById("subcategory").options[2] = new Option("Intermediate", "Y_Intermediate");
break;
case "Z":
document.getElementById("subcategory").options[0] = new Option("Please select Level", "");
document.getElementById("subcategory").options[1] = new Option("Beginner", "Z_Beginner");
document.getElementById("subcategory").options[2] = new Option("Intermediate", "Z_Intermediate");
break;
case "A":
document.getElementById("subcategory").options[0] = new Option("Please select Level", "");
document.getElementById("subcategory").options[1] = new Option("Beginner", "A_Beginner");
document.getElementById("subcategory").options[2] = new Option("Intermediate", "A_Intermediate");
break;
default:
document.getElementById("subcategory").options[0] = new Option("Please select Level", "");
break;
}
return true;
}
function dynamicdropdownone() {
var e = document.getElementById("subcategory");
var listindex = e.options[e.selectedIndex].value;
var selector = document.getElementById("sub_subcategory");
document.getElementById("sub_subcategory").length = 0;
switch (listindex) {
case "X_Beginner":
var monday = 1;
var mondays = getSpecificDayInAMonth(monday).length;
document.getElementById("sub_subcategory").options[0] = new Option("Please select ", "");
for (var i = 1; i < mondays; i++) {
selector.options[i] = new Option(getSpecificDayInAMonth(monday)[i] + " 19:00-20:00 ", "monday_1900_2000");
selector.options[i] = new Option(getSpecificDayInAMonth(monday)[i] + " 20:00-21:00 ", "monday_2000_2100");
}
break;
case "X_Intermediate":
var wednesday = 3;
var wednesdays = getSpecificDayInAMonth(wednesday).length;
document.getElementById("sub_subcategory").options[0] = new Option("Please select ", "");
for (var i = 1; i < wednesdays; i++) {
selector.options[i] = new Option(getSpecificDayInAMonth(wednesday)[i] + " 19:00-20:30 ", "wednesday_1900_2030");
}
break;
case "Y_Beginner":
var thursday = 4;
var thursdays = getSpecificDayInAMonth(thursday).length;
document.getElementById("sub_subcategory").options[0] = new Option("Please select ", "");
for (var i = 1; i < thursdays; i++) {
selector.options[i] = new Option(getSpecificDayInAMonth(thursday)[i] + " 19:00-20:00 ", "thursday_1900_2000");
}
break;
case "Y_Intermediate":
var thursday = 4;
var thursdays = getSpecificDayInAMonth(thursday).length;
document.getElementById("sub_subcategory").options[0] = new Option("Please select ", "");
for (var i = 1; i < thursdays; i++) {
selector.options[i] = new Option(getSpecificDayInAMonth(thursday)[i] + " 20:00-21:00 ", "thursday_2000_2100");
}
break;
case "Z_Beginner":
var tuesday = 4;
var tuesdays = getSpecificDayInAMonth(tuesday).length;
document.getElementById("sub_subcategory").options[0] = new Option("Please select ", "");
for (var i = 1; i < tuesdays; i++) {
selector.options[i] = new Option(getSpecificDayInAMonth(tuesday)[i] + " 19:00-20:00 ", "tuesday_1900_2000");
}
break;
case "Z_Intermediate":
var tuesday = 2;
var tuesdays = getSpecificDayInAMonth(tuesday).length;
document.getElementById("sub_subcategory").options[0] = new Option("Please select ", "");
for (var i = 1; i < tuesdays; i++) {
selector.options[i] = new Option(getSpecificDayInAMonth(tuesday)[i] + " 20:00-21:00 ", "tuesday_2000_2100");
}
break;
case "A_Beginner":
var friday = 5;
var fridays = getSpecificDayInAMonth(friday).length;
document.getElementById("sub_subcategory").options[0] = new Option("Please select ", "");
for (var i = 1; i < fridays; i++) {
selector.options[i] = new Option(getSpecificDayInAMonth(friday)[i] + " 19:00-20:00 ", "friday_1900_2000");
}
break;
case "A_Intermediate":
var friday = 4;
var fridays = getSpecificDayInAMonth(friday).length;
document.getElementById("sub_subcategory").options[0] = new Option("Please select ", "");
for (var i = 1; i < fridays; i++) {
selector.options[i] = new Option(getSpecificDayInAMonth(friday)[i] + " 20:00-21:00 ", "friday_2000_2100");
}
break;
default:
document.getElementById("sub_subcategory").options[0] = new Option("Please select ", "");
break;
}
return true;
}
scripts/myfunction.js is a relative path, so it thinks it would be in the same directory that the HTML file would be in. Instead of
<script src="scripts/myfunctions.js"></script>Try
<script src="http://domain.here/scripts/myfunctions.js"></script>.