I know that this question is asked many times and I actually got the answer from another post, however now I have written the code to suit my needs it is not showing the div at all when clicking on the specific dropdown choice. I really liked this method as the code made more sense to me but am not sure what I am doing wrong. I am setting up a form and want to have a few questions where the user will choose an option and then a specific question will then show below asking one or more specific questions. I did this with Yes/No radio buttons elsewhere which is working, but I need to do this with three options that will lead to three separate inquiries to get more information, and another choice where they have the option to just leave it as is and not answer.
The code for the javascript is as follows:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>">
<script>
function landaccessfunction(){
getValue = document.getElementById("access").value;
if(getValue == "road"){
document.getElementById("roaddetails").style.display = "block";
document.getElementById("easementdetails").style.display = "none";
document.getElementById("noaccessdetails").style.display = "none";
}
if(getValue == "easement"){
document.getElementById("roaddetails").style.display = "none";
document.getElementById("easementdetails").style.display = "block";
document.getElementById("noaccessdetails").style.display = "none";
}
if(getValue == "noaccess"){
document.getElementById("roaddetails").style.display = "none";
document.getElementById("easementdetails").style.display = "none";
document.getElementById("noaccessdetails").style.display = "block";
}
if(getValue == "selectaccess"){
document.getElementById("roaddetails").style.display = "block";
document.getElementById("easementdetails").style.display = "block";
document.getElementById("noaccessdetails").style.display = "block";
}
}
</script>
Then this is the part of the code which is placed within the body tags and the form itself:
How is the land accessed?
<select style="height:24px;font-size:12pt; name="access" id="access" onchange="landaccessfunction" class="form-control" form="landform">
<option value="selectaccess">Select One</option>
<option value="road">Direct road access</option>
<option value="easement">A legally deeded easement</option>
<option value="noaccess">No legal access</option>
</select>
<div class=text" id="roaddetails" style="display:none;">
Who owns the road?<br><input style="height:20px;font-size:12pt; name="roadowner" type="text" id="roadowner" form="landform" size="50">
</div>
<div class=text" id="easementdetails" style="display:none;">
Describe easement<br><input style="height:20px;font-size:12pt; name="easedescr" type="text" id="easedescr" form="landform" size="50">
</div>
<div class=text" id="noaccessdetails" style="display:none;">
How do you access the land at this time?<br><input style="height:20px;font-size:12pt; name="howaccess" type="text" id="howaccess" form="landform" size="50">
</div>
My apologies if it is something stupid that I am not seeing. Also note that the questions that show up may include text boxes or other form field types but for now I have just put simple short entry fields.
Thank you so much.
Your code has some issues. Below is the running code:
function landaccessfunction(){
getValue = document.getElementById("access").value;
if(getValue == "road"){
document.getElementById("roaddetails").style.display = "block";
document.getElementById("easementdetails").style.display = "none";
document.getElementById("noaccessdetails").style.display = "none";
}
if(getValue == "easement"){
document.getElementById("roaddetails").style.display = "none";
document.getElementById("easementdetails").style.display = "block";
document.getElementById("noaccessdetails").style.display = "none";
}
if(getValue == "noaccess"){
document.getElementById("roaddetails").style.display = "none";
document.getElementById("easementdetails").style.display = "none";
document.getElementById("noaccessdetails").style.display = "block";
}
if(getValue == "selectaccess"){
document.getElementById("roaddetails").style.display = "block";
document.getElementById("easementdetails").style.display = "block";
document.getElementById("noaccessdetails").style.display = "block";
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
How is the land accessed?
<select style="height:24px;font-size:12pt;" name="access"
id="access"
onChange="landaccessfunction()"
class="form-control"
form="landform">
<option value="selectaccess">Select One</option>
<option value="road">Direct road access</option>
<option value="easement">A legally deeded easement</option>
<option value="noaccess">No legal access</option>
</select>
<div class="text" id="roaddetails" style="display:none;">
Who owns the road?<br><input style="height:20px;font-size:12pt;" name="roadowner" type="text" id="roadowner" form="landform" size="50">
</div>
<div class="text" id="easementdetails" style="display:none;">
Describe easement<br><input style="height:20px;font-size:12pt;" name="easedescr" type="text" id="easedescr" form="landform" size="50">
</div>
<div class="text" id="noaccessdetails" style="display:none;">
How do you access the land at this time?<br><input style="height:20px;font-size:12pt;" name="howaccess" type="text" id="howaccess" form="landform" size="50">
</div>