javascript in asp.net

Question

<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 the TextBox by clicking on the RadioButtonList, without using autopostback=true. How can I do this with JavaScript?

eugeneK · Accepted Answer · 2010-05-31 11:12:03Z

1

You can use jQuery to manipulate input's enabled state (HTML translation for TextBox) or you can use ASP.NET Ajax so you can set both controls inside of update panel in this case you won't see page being reloaded on postback which must happen in order for you to change status of TextBox on some other event. Tbh i would go with ASP.NET Ajax because my experience shows that jQuery does not work that well with ASP.NET controls when it comes to complex stuff ie. ASP.NET uses javascript for event activation which can cause either jQuery or ASP.NET not to work as you may expected.

Good luck with update panels...

answered May 31, 2010 at 11:12

eugeneK

11.2k20 gold badges71 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ilowe · Accepted Answer · 2010-06-02 15:59:00Z

1

Using jQuery, you can have a fairly custom result by hooking in to the changes on the radio buttons...


$("#<%= RdoBtnHasNotified.ClientID %> > input[type=radio]").change(function(){
  // this function is called whenever one of the radio button list's control's 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);
  }
});

answered Jun 2, 2010 at 15:59

ilowe

561 silver badge3 bronze badges

Comments

Brian Mains · Accepted Answer · 2010-05-31 11:18:59Z

0

Each ListItem renders a radio button with the same name parameter; I would suggest running the app and looking at the generated source to get an idea of what you need to do to listen for the radio button events. Essentially the ID of the radio button list is the name parameter, so you can get the group of radio buttons as (using JQuery):

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

HTH.

answered May 31, 2010 at 11:18

Brian Mains

50.8k35 gold badges155 silver badges260 bronze badges

Comments

MK. · Accepted Answer · 2010-05-31 15:27:22Z

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>

Jayaraj · Accepted Answer · 2010-06-02 08:38:49Z

0

Write the code in the following way

<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 textbox (Enabled="false") since initialy the value of the "RdoBtnHasNotified" is "No".

answered Jun 2, 2010 at 8:38

Jayaraj

69610 silver badges20 bronze badges

Comments

Deviprasad Das · Accepted Answer · 2010-06-03 17:56:14Z

0

$('#<%= 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 will not fire in IE.

answered Jun 3, 2010 at 17:56

Deviprasad Das

4,3738 gold badges39 silver badges51 bronze badges

Collectives™ on Stack Overflow

javascript in asp.net

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related