I am trying to make a Word Doc form into an online form so that we can guarantee the results and for the convenience of our users. When I test the javascript out on jsfiddle it works perfect, but when I upload it to our server and access it, it doesn't work.
Here's the jsfiddle: http://jsfiddle.net/b4avkn9q/8/
And here's the code behind the page:
<!doctype html>
<html>
<head>
<title>BUILDER Building Add Request (DHA)</title>
<!-- JavaScript -->
<style>
function Org1Pick() {
var Org1 = document.getElementById("OrgDHA").value;
document.getElementById("OrgDHA2").style.visibility = "visible";
document.getElementById("OrgChoice").innerHTML = Org1+" selected";
switch (Org1) {
case "AFMS":
alert(Org1);
document.getElementById("OrgDHA2").list = "ORG-DHA-AFMS";
document.getElementById("OrgDHA2").placeholder = "DHA-AFMS";
break;
case "BUMED":
alert(Org1);
document.getElementById("OrgDHA2").list = "ORG-DHA-BUMED";
document.getElementById("OrgDHA2").placeholder = "DHA-BUMED";
break;
case "MEDCOM":
alert(Org1);
document.getElementById("OrgDHA2").list = "ORG-DHA-MEDCOM";
document.getElementById("OrgDHA2").placeholder = "DHA-MEDCOM";
break;
case "NCR":
alert(Org1);
document.getElementById("OrgDHA2").list = "ORG-DHA-NCR";
document.getElementById("OrgDHA2").placeholder = "DHA-NCR";
break;
default:
alert(Org1);
document.getElementById("OrgDHA2").style.visibility = "hidden";
document.getElementById("OrgAFMS").style.visibility = "hidden";
document.getElementById("OrgBUMED").style.visibility = "hidden";
document.getElementById("OrgMEDCOM").style.visibility = "hidden";
document.getElementById("OrgNCR").style.visibility = "hidden";
}
}
</style>
<!-- CSS -->
<style>
.form_desc {
text-align: right;
vertical-align: top;
}
.form_input {
text-align: left;
vertical-align: top;
font-style: italic;
}
</style>
</head>
<body>
<div>
<input type="text" list="ORG-DHA" id="OrgDHA" placeholder="Select an Organization" onchange="Org1Pick()" />
<input type="text" list="ORG-DHA" id="OrgDHA2" placeholder="" onchange="Org2Pick()" style="visibility:hidden" />
<div id="OrgChoice" >No Organization(s) seleceted.</div>
</div>
<!-- ORG datalists -->
<datalist id="ORG-DHA">
<option value="AFMS">
<option value="BUMED">
<option value="MEDCOM">
<option value="NCR">
</datalist>
<datalist id="ORG-DHA-AFMS">
<option value="ACC">
<option value="AETC">
<option value="AFDW">
<option value="AFGSC">
<option value="AFMC">
<option value="AFSOC">
<option value="AFSPC">
<option value="AMC">
<option value="PACAF">
<option value="USAFE">
</datalist>
<datalist id="ORG-DHA-BUMED">
<option value="DET JAX">
<option value="NME">
<option value="NMW">
</datalist>
<datalist id="ORG-DHA-MEDCOM">
<option value="ERMC">
<option value="MRMC">
<option value="NRMC">
<option value="PRMC">
<option value="SRMC">
<option value="USAPHC">
<option value="WRMC">
</datalist>
<datalist id="ORG-DHA-NCR">
<option value="UHUHS">
<option value="WRNMMC Bethesda">
</datalist>
</body>
</html>
What am I missing? I am sure it's something really simple, but I'm just not seeing it.
UPDATE: By "not working" I meant that nothing happened once I selected the option from the dropdown menu.
You've put the script in a
<style>element instead of a<script>element.