Copy link to clipboard
Copied
Hello,
I am trying to create a form that changes on the fly when I select from a list in a drop down feature. I have three different drop down fields that I need to change when someone fills out the form. This is for registering with a gymnastics school so an example of the drop down criteria:
Drop down 1 Drop down 2 Drop down 3
Select Class Select Day Select Time
Class 1 Monday Time1
Class 2 Tuesday Time2
Class 3 Wednesday Time3
Thursday Time4
Friday
Saturday
Sunday
So when the customer fills out the form, I would like for them to select from one of the classes, then based on the class they select, it brings up the days that are available for that class, then based on the day they select, they can select the time that is available for those classes on that specific day.
I was able to achieve the first half of this by selecting the class and then the day did change on the fly, but I can't figure out how to get that third drop down to select the times.
Below is the code that I have so far:
<!doctype html>
<html>
<head>
<script type="text/javascript">
function populate(s1,s2){
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
s2.innerHTML="";
if(s1.value == "PreSchoolJuniorGym"){
var optionArray = ["|","monday|Monday","tuesday|Tuesday","wednesday|Wednesday","thursday|Thursday","friday|Friday","saturday|Saturday","sunday|Sunday"];
}else if(s1.value == "Girls Recreational"){
var optionArray = ["|","monday|Monday","tuesday|Tuesday","wednesday|Wednesday","thursday|Thursday","saturday|Saturday","sunday|Sunday"];
}else if(s1.value == "Boys Recreational"){
var optionArray = ["|","monday|Monday","wednesday|Wednesday","saturday|Saturday"];
}
for(var option in optionArray){
var pair = optionArray[option].split("|");
var newOption = document.createElement("option");
newOption.value = pair[0];
newOption.innerHTML = pair[1];
s2.options.add(newOption);
}
}
</script>
</head>
<body>
Select Class:
<select id="select1" name="select1" onchange="populate('select1','select2')">
<option value=""></option>
<option value="PreSchoolJuniorGym">PreSchoolJuniorGym</option>
<option value="Girls Recreational">Girls Recreational</option>
<option value="Boys Recreational">Boys Recreational</option>
</select>
<hr/>
Select Class Day:
<select id="select2" name="select2">
</select>
<hr/>
Select Class Time:
<select id="select3" name="select3>
</select>
<hr/>
</body>
</html>
Copy link to clipboard
Copied
If you already haven't found an answer consider the below solution. The only issue I can think of is the Times may be different depending on which Day and Class combination is chosen, then you have problems and will have to start asking a few more questions in the code. If all classes start at the same time regardless of which Class and Day combination is chosen, then no problem.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>onchange Class/Day/Time</title>
</head>
<body>
<select name="class" class="classSelected">
<option value="Choose Class" selected>Choose Class</option>
<option value="Class 1">Class 1</option>
<option value="Class 2">Class 2</option>
<option value="Class 3">Class 3</option>
</select>
<select name="classDays" class="classDays">
<option value="Choose Day" selected>Choose Day</option>
<option value="">Please select a Class</option>
</select>
<select name="classTime" class="classTime">
<option value="Choose Time" selected>Choose Time</option>
<option value="">Please select a Class/Day</option>
</select>
<div class="test"></div>
<script>
var classSelected = document.querySelector('.classSelected');
var classDays = document.querySelector('.classDays');
var classTime = document.querySelector('.classTime');
classSelected.onchange = function() {
if(classSelected.value === "Class 1") {
classDays.innerHTML =
'<option value="Choose Day" selected>Choose Day</option>' +
'<option value="Monday">Monday</option>' +
'<option value="Tuesday">Tuesday</option>' +
'<option value="Friday">Friday</option>' +
'<option value="Saturday">Saturday</option>'
;
}
if(classSelected.value === "Class 2") {
classDays.innerHTML =
'<option value="Choose Day" selected>Choose Day</option>' +
'<option value="Sunday">Sunday</option>' +
'<option value="Monday">Monday</option>' +
'<option value="Wednesday">Wednesday</option>' +
'<option value="Friday">Friday</option>'
;
}
if(classSelected.value === "Class 3") {
classDays.innerHTML =
'<option value="Choose Day" selected>Choose Day</option>' +
'<option value="Wednesday">Wednesday</option>' +
'<option value="Thursday">Thursday</option>' +
'<option value="Saturday">Saturday</option>' +
'<option value="Sunday">Sunday</option>'
;
}
}
classDays.onchange = function() {
if(classDays.value === "Monday") {
classTime.innerHTML =
'<option value="Choose Time" selected>Choose Time</option>' +
'<option value="10.00am">10.00am</option>' +
'<option value="1.00pm">1.00pm</option>' +
'<option value="3.00pm">3.00pm</option>' +
'<option value="5.00pm">5.00pm</option>' +
'<option value="7.00pm">7.00pm</option>'
;
}
if(classDays.value === "Tuesday") {
classTime.innerHTML =
'<option value="Choose Time" selected>Choose Time</option>' +
'<option value="8.00am">8.00am</option>' +
'<option value="10.00am">10.00am</option>' +
'<option value="1.00pm">1.00pm</option>' +
'<option value="2.30pm">2.30pm</option>' +
'<option value="5.30pm">5.30pm</option>'
;
}
}
</script>
</body>
</html>
Copy link to clipboard
Copied
Hello is any moderator awake? There's an answer waiting fo this OP. Please do tell why that is being held up in the moderation bin and this post gets through.
Copy link to clipboard
Copied
Sorry, I fell asleep this evening. Felt a bit tired after having had a great time at the Queen/Adam Lambert concert last night.
Another One Bites the Dust
Copy link to clipboard
Copied
Not the same, Freddie is NOT replacable.........should have knocked it on the head after he passed away....he WAS Queen.
Copy link to clipboard
Copied
There was an emotional moment while Brian May was playing his guitar and Freddie appeared on screen singing along.
Copy link to clipboard
Copied
Queen are my all time favorite rock band. I saw them live at live-aid in 1985 (I think) and a year or two later at the same venue, Wembley. Queen died when Freddie died in my eyes. John Deacon took the right path and gracefully accepted it was over.