Home/ Questions/Q 6723425
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T09:34:02+00:00

I have a query i hope you can help with, i have searched but

  • 0

I have a query i hope you can help with, i have searched but cant find an answer to my exact question.

I have a drop down (select) menu that depending on selection needs to show 2 extra fields
Every other question I have seen depends on different selections showing different fields.

<select  id="idhere" name="namehere" title="Mortgage Type">

<option value="First Time Buyer">First Time Buyer</option> 
<option value="Moving Home">Moving Home</option>
<option value="Remortgage">Remortgage</option>
<option value="Buy To Let Purchase">Buy To Let Purchase</option>
<option value="Buy To Let Remortgage">Buy To Let Remortgage</option>
</select>

The following need to show 2 extra form fields (held within a div below)

First Time Buyer
Moving Home
Buy To Let Purchase

These both do not need to show the extra fields

Remortgage
Buy To Let Remortgage

Finally The Extra Fields are:

<p>Have You Found A Property</p>
<input  id="foundpropery" type="checkbox" value="0" />
<br />
<br />

<p>Have You Made An Offer</p>
<input  id="foundproperty" type="checkbox" value="0" />

Using javascript? How do i show the extra fields depending on selection

In advance thanks for any help!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I think this can be a starting point for what you’re trying to do, you use the div’s “display” property to show/hide it depending on what’s selected in the dropdown:

    <html>
<head>
<script type="text/javascript">
function toggle() {
var e = document.getElementById("selectList");
var strMortgageType = e.options[e.selectedIndex].value;
var divToHide1 = document.getElementById("foundproperty");
var divToHide2 = document.getElementById("madeoffer");
if(strMortgageType == "Remortgage" || strMortgageType == "BuyToLetRemortgage")
{
divToHide1.style.display = "none";
divToHide2.style.display = "none";
}
else
{
divToHide1.style.display = "block";
divToHide2.style.display = "block";
}
} 
</script>
</head>
<body>
<select  id="selectList" name="namehere" title="Mortgage Type" onchange="toggle()">
<option value="FirstTimeBuyer">First Time Buyer</option> 
<option value="MovingHome">Moving Home</option>
<option value="Remortgage">Remortgage</option>
<option value="BuyToLetPurchase">Buy To Let Purchase</option>
<option value="BuyToLetRemortgage">Buy To Let Remortgage</option>
</select>
<div id="foundproperty">
<p>Have You Found A Property</p>
<input  id="foundpropery" type="checkbox" value="0" />
<br />
<br />
</div>
<div id="madeoffer">
<p>Have You Made An Offer</p>
<input  id="madeofferInput" type="checkbox" value="0" />
</div>
</body>
</html>

    If you’re using jquery, this post may be helpful:

    Jquery : If select has option 1 show div

    • 0