CODEWITHSUNDEEP
asp.netjavascript
user354488
user354488

Reputation: 61

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

Upvotes: 6

Views: 540

Answers (6)

Deviprasad Das
Deviprasad Das

Reputation: 4353

$('#<%= 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.

Upvotes: 0

ilowe
ilowe

Reputation: 56

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);
  }
});

Upvotes: 1

Jayaraj
Jayaraj

Reputation: 696

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".

Upvotes: 0

MK.
MK.

Reputation: 5149

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>

Upvotes: 0

Brian Mains
Brian Mains

Reputation: 50728

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.

Upvotes: 0

eugeneK
eugeneK

Reputation: 11116

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...

Upvotes: 1

Related Questions