Many times in web development we want to show or hide control or change the particular control or change the text or value of particular control without reloading the page.
For smiler scenario we can write simple JavaScript function for the same.
In this tutorial we will learn how to to hide or show ASP.Net web page controls based on radio button’s onClick event using JavaScript. We will take two asp:radioButton and one asp:Button control. When we click second radio button i.e., rbtnHideButton, the asp:Button should not be displayed and when I click the first radio button i.e., rbtnShowButton, the asp:Button should be displayed. Let us see how this example works.
Below is the sample demo for this tutorial:
<body> <form id="form1" runat="server"> <div> <p> <asp:RadioButton ID="rbtnShowButton" runat="server" Text="Show Button" GroupName="grpShowHide" onClick="showHide(this.value)" Checked="true" /> <asp:RadioButton ID="rbtnHideButton" runat="server" Text="Hide Button" GroupName="grpShowHide" onClick="showHide(this.value)" Checked="false" /> </p> <asp:Button ID="button1" runat="server" Text="Button" /> </div> </form> </body>
<script language="javascript" type="text/javascript"> function showHide(obj) { if (obj == 'rbtnShowButton') { document.getElementById('<%=button1.ClientID %>').style.display = ''; } else if (obj == 'rbtnHideButton') { document.getElementById('<%=button1.ClientID %>').style.display = 'none'; } } </script>