Highlighted

Dynamically Changing Drop Down Form

New Here ,
Mar 02, 2018

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>

Views

290

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Dynamically Changing Drop Down Form

New Here ,
Mar 02, 2018

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>

Views

291

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Mar 02, 2018 0
LEGEND ,
Mar 04, 2018

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 04, 2018 1
LEGEND ,
Mar 04, 2018

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 04, 2018 0
Adobe Community Professional ,
Mar 04, 2018

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.

Queen and Adam Lambert perform at Rod Laver Arena on Friday 2 March 2018. Photo by Ros O'Gorman

Another One Bites the Dust


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 04, 2018 0
LEGEND ,
Mar 04, 2018

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 04, 2018 0
Adobe Community Professional ,
Mar 04, 2018

Copy link to clipboard

Copied

There was an emotional moment while Brian May was playing his guitar and Freddie appeared on screen singing along. 


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 04, 2018 0
osgood_ LATEST
LEGEND ,
Mar 04, 2018

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 04, 2018 0