I have been working on developing a support ticket creation page for my company. I would like there to be a dropdown that displays a different form based on their selection. I was able to get my code to work in JSfiddle.com but it doesn't work when I use it in IE. Any ideas on what could be causing the dropdown not to show any forms?
<!DOCTYPE html>
<html>
<head>
<title>blank</title>
<meta charset="UTF-8">
<script type="text/javascript">
$('#dropdown').on('change', function() {
var val = $(this).val();
$('#headerimage').hide();
$('#repimage').hide();
$('#welcome').hide();
$('#disclaimer').hide();
$('#addimage').hide();
$('#removeimage').hide();
$('#' + val).show();
});
function addFileInput() {
var d = document.createElement("div");
var file = document.createElement("input");
file.setAttribute("type", "file");
file.setAttribute("name", "attachment"+upload_number);
d.appendChild(file);
document.getElementById("moreUploads").appendChild(d);
upload_number++;
}
</script>
<style>
.hidden {display:none};
</style>
</head>
<body>
<select id="dropdown" name="update_type">
<option>Please Make a Selection</option>
<option value="headerimage">Header Image</option>
<option value="repimage">Sales Rep Image</option>
<option value="welcome">Welcome Text</option>
<option value="disclaimer">Disclaimer</option>
<option value="addimage">Add Image</option>
<option value="removeimage">Remove Image</option>
</select>
<form id="headerimage" class="hidden">
<br><br>
Please fill in the following required information.<br><br>
<div class="hide" id="headerimage">
Add Header Image:
<input type="file" name="attachment" id="attachment" onchange="document.getElementById('moreUploadsLink').style.display = 'block';" />
<div id="moreUploads"></div>
<div id="moreUploadsLink" style="display:none;"><a href="javascript:addFileInput();">Attach another File</a></div>
</div>
</form>
<form id="repimage" class="hidden">
<br><br>
Please fill in the following required information.<br><br>
<div class="hide" id="repimage">
Rep Name:
<input type="text"></input><br />
Add Rep Image:
<input type="file" name="attachment" id="attachment" onchange="document.getElementById('moreUploadsLink').style.display = 'block';" />
<div id="moreUploads"></div>
<div id="moreUploadsLink" style="display:none;"><a href="javascript:addFileInput();">Attach another File</a></div>
</div>
</form>
<form id="welcome" class="hidden">
<br><br>
Please fill in the following required information.<br><br>
<div class="hide" id="welcome">
Welcome Text:
<textarea rows="4"></textarea>
</div>
</form>
<form id="disclaimer" class="hidden">
<br><br>
Please fill in the following required information.<br><br>
<div class="hide" id="disclaimer">
Disclaimer Text:
<textarea rows="4"></textarea>
</div>
</form>
<form id="addimage" class="hidden">
<br><br>
Please fill in the following required information.<br><br>
<div class="hide" id="addimage">
Add Image:
<input type="file" name="attachment" id="attachment" onchange="document.getElementById('moreUploadsLink').style.display = 'block';" />
<div id="moreUploads"></div>
<div id="moreUploadsLink" style="display:none;"><a href="javascript:addFileInput();">Attach another File</a></div>
<br><br>
Please specify where you would like us to add this image:
<br><br>
<textarea rows="2"></textarea>
</div>
</form>
<form id="removeimage" class="hidden">
<br><br>
Please fill in the following required information.<br><br>
<div class="hide" id="removeimage">
Please specify which image you would like us to remove:
<textarea rows="2"></textarea>
</div>
</form>
</body>
</html>
