I'm trying to make a webpage form where you see a select drop-down list, and if you select one of the values from the drop-down list, a modal form that is unique to the value you selected will open up and you can fill it out. From my understanding, this is considered Cascading Dropdown lists.
The problem I'm facing is trying to find a way to create different modal forms for each unique value from the drop-down list. Let's say if my select list is a bunch of fruits, I want a modal form for "apples" to open if I select "apples" from the drop-down list, as well as a modal form for "oranges" to open if I select "oranges" from the drop-down list.
The function I'm using to get the modal to appear after there is an onChange()
Here's my head element:
<title>Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Here is my body element with the select drop-down, and two modal forms for "Apples" and "Oranges":
<div>
<select id="fruitlist">
<option value="main">Select Fruit:</option>
<option value="apples">Apples</option>
<option value="oranges">Oranges</option>
<option value="pineapples">Pineapples</option>
<option value="strawberries">Strawberries</option>
</select>
</div>
<div class="modal fade" id="appleModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" style="padding:35px 50px;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4><span class="glyphicon glyphicon-apple"></span> Fruit - Apples</h4>
</div>
<div class="modal-body" style="padding:40px 50px;">
<form role="form">
<div class="form-group">
<label for="appleName"><span class="glyphicon glyphicon-user"></span> Name</label>
<input type="text" class="form-control" id="appleName" placeholder="Enter your name">
</div>
<div class="form-group">
<label for="appleAddress"><span class="glyphicon glyphicon-home"></span> Address</label>
<input type="text" class="form-control" id="appleAddress" placeholder="Enter your address">
</div>
<div class="form-group">
<label for="appleTelephone"><span class="glyphicon glyphicon-earphone"></span> Telephone Number</label>
<input type="text" class="form-control" id="appleTelephone" placeholder="Enter your telephone number">
</div>
<div class="form-group">
<label for="appleAmount"><span class="glyphicon glyphicon-tasks"></span> How many?</label>
<input type="text" class="form-control" id="appleAmount" placeholder="Enter the amount of fruits you wish to purchase">
</div>
<button type="submit" class="btn btn-success btn-block"><span class="glyphicon glyphicon-check"></span> Submit</button>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="orangeModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" style="padding:35px 50px;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4><span class="glyphicon glyphicon-apple"></span> Fruit - Oranges</h4>
</div>
<div class="modal-body" style="padding:40px 50px;">
<form role="form">
<div class="form-group">
<label for="orangeName"><span class="glyphicon glyphicon-user"></span> Name</label>
<input type="text" class="form-control" id="orangeName" placeholder="Enter your name">
</div>
<div class="form-group">
<label for="orangeAddress"><span class="glyphicon glyphicon-home"></span> Address</label>
<input type="text" class="form-control" id="orangeAddress" placeholder="Enter your address">
</div>
<div class="form-group">
<label for="orangeTelephone"><span class="glyphicon glyphicon-earphone"></span> Telephone Number</label>
<input type="text" class="form-control" id="orangeTelephone" placeholder="Enter your telephone number">
</div>
<div class="form-group">
<label for="orangeAmount"><span class="glyphicon glyphicon-tasks"></span> How many?</label>
<input type="text" class="form-control" id="orangeAmount" placeholder="Enter the amount of fruits you wish to purchase">
</div>
<button type="submit" class="btn btn-success btn-block"><span class="glyphicon glyphicon-check"></span> Submit</button>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
</div>
</div>
</div>
</div>
Here's the script I'm using to execute the function after there is an onChange() on the select dropdown list:
<script>
$(document).ready(function(){
$("#fruitlist").change(function(){
$("#appleModal").modal();
});
});
</script>
As you can see, if you plug in the code and run it, no matter what selection you make on the dropdown, it'll only execute the "Apples" modal. For clarity, I want to display an "Apples" modal for an "Apples" select value, an "Orange" modal for an "Orange" select value, a "Pineapples" modal for a "Pineapples" select value and so on. I was trying to think of different ways to tackle this problem, such as an if-statement where if the apples select value was selected, display the apples modal form, or some sort of loop where for every int value assigned to each select value, display the corresponding modal form. I tried to do this, but was unsuccessful. I may be approaching this the wrong way.
I spent about 15 minutes trying to find suggested threads to make sure I wasn't asking a duplicate question before submitting this, I was unable to come across one that could help me specifically enough for my issue. I'm new to using cascading dropdown lists and could really use some assistance. Thank you very much!
