Is there a way to dynamically show/hide a textbox or an entire div section based on a user's selection from a dropdown menu? Can this be achieved using client-side HTML controls instead of server controls? Would utilizing jQuery provide the best solution for this task? Also, is there a method to hide the Div by default and then display it when the user chooses an option from the drop down?
<div id="divLimitPrice">Limit Price<br />
<asp:TextBox ID="txtLimitPrice" runat="server" ValidationGroup="ValidationGroupOrder"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvLimitPrice" runat="server" ControlToValidate="txtLimitPrice" ErrorMessage="This is a required field."></asp:RequiredFieldValidator>
</div>
<script type="text/javascript">
$(function () {
$('[id*="ddPriceType"]').on('change', function () {
var val = this.value,
$divLimitPrice = $('[id*="divLimitPrice"]');
if (val === 1 || val === 2) {
// Hide div group
$divLimitPrice.hide();
} else {
// Show div group
$divLimitPrice.show();
}
});
});
</script>
Price Type<br />
<asp:DropDownList ID="ddPriceType" runat="server" ValidationGroup="ValidationGroupOrder">
<asp:ListItem Value="" Text ="Select a Price Type" />
<asp:ListItem Value="2" text="Type 2" />
<asp:ListItem Value="3" text="Type 3" />
<asp:ListItem Value="4" text="Type 4" />
</asp:DropDownList>
<asp:RequiredFieldValidator ID="rfvPriceType" runat="server" ControlToValidate="ddPriceType" ErrorMessage="This is a required field."></asp:RequiredFieldValidator>
<div id="divLimitPrice">Limit Price<br />
<asp:TextBox ID="txtLimitPrice" runat="server" ValidationGroup="ValidationGroupOrder"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvLimitPrice" runat="server" ControlToValidate="txtLimitPrice" ErrorMessage="This is a required field."></asp:RequiredFieldValidator>
</div>`
I've tried implementing the code but seem to have missed something. Any suggestions on what might be missing? Your assistance is greatly appreciated!