Geek Answers Handbook

Javascript on asp.net

<asp:RadioButtonList ID="RdoBtnHasNotified" runat="server" RepeatDirection="Horizontal" AutoPostBack="True" OnSelectedIndexChanged="RdoBtnHasNotified_SelectedIndexChanged"> <asp:ListItem Value="1">Yes</asp:ListItem> <asp:ListItem Value="0" Selected="True">No</asp:ListItem> </asp:RadioButtonList> <asp:TextBox ID="TxtHowNotified" runat="server" TextMode="MultiLine" MaxLength="100"></asp:TextBox>

I want to enable a TextBox by clicking RadioButtonList without using autopostback=true . How can I do this using JavaScript?

+6
javascript
source share
6 answers

You can use jQuery to control the enabled input state (HTML translation for TextBox), or you can use ASP.NET Ajax so that you can install both controls inside the update panel, in this case you will not see the page reload on postback, which should happen so that you can change the status of the TextBox to some other event. Tbh I would go with ASP.NET Ajax because my experience shows that jQuery doesn't work so well with ASP.NET controls when it comes to complicated things, i.e. ASP.NET uses javascript to trigger an event, which could cause jQuery or ASP.NET to not work as you might expect.

Good luck with the update panels ...

+1
source share

Using jQuery, you can get a pretty custom result by connecting to the changes on the switches ...

 $("#<%= RdoBtnHasNotified.ClientID %> > input[type=radio]").change(function(){ // this function is called whenever one of the radio button list control change // the $(this) variable refers to the input control that triggered the event var txt = $("#<%= TxtHowNotified.ClientID %>"); if($(this).val()=="1") { txt.removeAttr("disabled"); } else { txt.attr("disabled", true); } });
+1
source share

Each ListItem displays a radio button with the same name; I would suggest starting the application and looking at the generated source to get an idea of ​​what you need to do in order to listen to the switch events. Essentially, the radio button list id is a name parameter, so you can get a group of radio buttons like (using jQuery):

 $("input[name='<%= rbl.ClientID%>']").click(function() { var tb = $("#textboxid"); //do something here; this points to the radio button });

NTN.

0
source share

Here you go:

 <%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> protected void RdoBtnHasNotified_PreRender(object sender, EventArgs e) { foreach (ListItem item in RdoBtnHasNotified.Items) item.Attributes.Add("onclick", string.Format("toggleTextBox(this,'{0}');", TxtHowNotified.ClientID)); } </script> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script type="text/javascript"> function toggleTextBox(radioButton, textBoxId) { document.getElementById(textBoxId).disabled = radioButton.value != "1"; } </script> </head> <body> <form id="form1" runat="server"> <div> <asp:RadioButtonList ID="RdoBtnHasNotified" OnPreRender="RdoBtnHasNotified_PreRender" runat="server" RepeatDirection="Horizontal"> <asp:ListItem Value="1">Yes</asp:ListItem> <asp:ListItem Value="0" Selected="True">No</asp:ListItem> </asp:RadioButtonList> <asp:TextBox ID="TxtHowNotified" runat="server" TextMode="MultiLine" MaxLength="100" Enabled="false"></asp:TextBox> </div> </form> </body> </html>
0
source share

Enter the code as follows

 <script type="text/javascript"> $(document).ready(function() { $("input[name='RdoBtnHasNotified']").change(function() { $("input[name='RdoBtnHasNotified']:checked").val() == '1' ? $('#TxtHowNotified').removeAttr("disabled") : $('#TxtHowNotified').attr('disabled', 'true'); }); }); </script>

and also disable the text box (Enabled = "false"), because the value of "RdoBtnHasNotified" is equal to "No".

0
source share
 $('#<%= RdoBtnHasNotified.ClientID %> > input[type=radio]').click(function() { var txtbox = $('#<%= TxtHowNotified.ClientID %>'); if($(this).val() == '1') { document.getElementById('#<%= TxtHowNotified.ClientID %>').disabled = false; } else { document.getElementById('#<%= TxtHowNotified.ClientID %>').disabled = true; } });

I think using change event does not fire in IE.

0
source share

More articles:


All Articles