Participant

Question

Dynamically Changing Drop Down Form

Forum|Forum|7 years ago
March 3, 2018
1 reply
495 views

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>

function populate(s1,s2){

var s1 = document.getElementById(s1);

var s2 = document.getElementById(s2);

s2.innerHTML="";

if(s1.value == "PreSchoolJuniorGym"){

}else if(s1.value == "Girls Recreational"){

}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:

<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>

<hr/>

Select Class Time:

</select>

<hr/>

</body>

</html>

This topic has been closed for replies.

O

osgood_

Legend

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>

<title>onchange Class/Day/Time</title>

</head>

<body>

<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>

<option value="Choose Day" selected>Choose Day</option>

<option value="">Please select a Class</option>

</select>

<option value="Choose Time" selected>Choose Time</option>

<option value="">Please select a Class/Day</option>

</select>

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>

O

osgood_

Legend

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.