For my business options form, I am working on a feature where the user selects an Entity Type (such as Corporation, LLC, LLP) from a dropdown menu and then a new form appears. Here is what I have attempted:
HTML FILE
<head>
<link rel="stylesheet" type="text/css" href="hide.css">
<script src="//code.jquery.com/jquery-1.10.2.js">
function getEntityType(sel) {
var openingEntityType = sel.value;
$("#basicOpeningEntityInformation").show();
}
</script>
</head>
<body>
<select id="oet" onchange="getEntityType(this)">
<option value="">Select an Option</option>
<option value="inc">Corporation</option>
<option value="llc">Limited Liability Company</option>
<option value="llp">Limited Liability Partnership</option>
<option value="lp">Limited Partnership</option>
<option value="gp">General Partnership</option>
<option value="jv">Joint Venture</option>
<option value="dba">Sole Proprietorship</option>
</select>
<br/>
<br/>
<form id="basicOpeningEntityInformation">
Entity Name:
<input type="text" id="openingEntityName">
<br/>
</form>
</body>
CSS FILE:
#basicOpeningEntityInformation {
display: none;
}
Upon loading the page, the #basicOpeningEntityInformation form is hidden. My goal is to reveal it once an option from the select menu is chosen. The console confirms that the selected value is being passed to the variable openingEntityType correctly, but the form is not appearing. I tried targeting both .basicOpeningEntityInformation and #basicOpeningEntityInformation in the CSS and script, but neither implementation seems to be working.
Thank you!