CODEWITHSUNDEEP
javascriptjqueryasp.net
timbck2
timbck2

Reputation: 1066

jQuery handle client side event of ASP.NET RadioButtonList

I want to run some Javascript code when the selected value of an ASP.Net RadioButtonList is changed, using a jQuery event handler; specifically I want to enable/disable a RequiredFieldValidator on a TextBox (depending on the selected value of the RadioButtonList).. But when I click one of the items in the RadioButtonList (changing its value), nothing is happening.

Here's the Javascript code:

var rbAuth = "<%= rbServiceHours.ClientID %>";
var vRespName = "<%= vRespNameReq.ClientID %>";
var vRespTitle = "<%= vRespTitleReq.ClientID %>";
var tbxRespName = "<%= tbxRespName.ClientID %>";
var tbxRespTitle = "<%= tbxRespTitle.ClientID %>";
$('#' + rbAuth + " > input").click(function () {
  if (($('#' + rbAuth).find('input:checked').val()) == 'Yes') {
    $('#' + vRespName).attr('enabled', 'true');
    $('#' + vRespTitle).attr('enabled', 'true');
    $('#' + tbxRespName).addClass("required");
    $('#' + tbxRespTitle).addClass("required");
  }
  else {
    $('#' + vRespName).attr('enabled', 'false');
    $('#' + vRespTitle).attr('enabled', 'false');
    $('#' + tbxRespName).removeClass("required");
    $('#' + tbxRespTitle).removeClass("required");
  }
});

This is, of course, inside $(document).ready( function() {});

Here's the corresponding ASP.Net markup:

<asp:RadioButtonList ID="rbServiceHours" runat="server" RepeatDirection="Horizontal"
  CssClass="required" ValidationGroup="valIncident" TabIndex="31">
    <asp:ListItem Value="Y" Text="Yes"></asp:ListItem>
    <asp:ListItem Value="N" Text="No"></asp:ListItem>
</asp:RadioButtonList>

<asp:TextBox ID="tbxRespName" runat="server" MaxLength="50" TabIndex="29">
</asp:TextBox>
<asp:RequiredFieldValidator ID="vRespNameReq" runat="server" ErrorMessage="<br />Please enter the caregiver's name."
  CssClass="validationError" ControlToValidate="tbxRespName" ForeColor="White"
  BackColor="Red" SetFocusOnError="true" ValidationGroup="valIncident" 
  Display="Dynamic"></asp:RequiredFieldValidator>

<asp:TextBox ID="tbxRespTitle" runat="server" MaxLength="50" TabIndex="29">
</asp:TextBox>
<asp:RequiredFieldValidator ID="vRespTitleReq" runat="server" ErrorMessage="<br />Please enter the caregiver's title."
  CssClass="validationError" ControlToValidate="tbxRespTitle" ForeColor="White"
  BackColor="Red" SetFocusOnError="true" ValidationGroup="valIncident" Display="Dynamic"></asp:RequiredFieldValidator>

Can anyone point me in the right direction? Thanks!

Edit: Here's the rendered HTML:

<input name="ctl00$MainContent$tbxRespName" type="text" maxlength="50" 
  id="ctl00_MainContent_tbxRespName" tabindex="29" />
<span id="ctl00_MainContent_vRespNameReq" class="validationError" 
  style="color:White;background-color:Red;display:none;"><br />Please enter the 
  caregiver's name.</span>
<input name="ctl00$MainContent$tbxRespTitle" type="text" maxlength="50" 
  id="ctl00_MainContent_tbxRespTitle" tabindex="30" /><br />
<span id="ctl00_MainContent_vRespTitleReq" class="validationError" 
  style="color:White;background-color:Red;display:none;"><br />Please enter the 
  caregiver's title.</span>

Upvotes: 1

Views: 2005

Answers (1)

freefaller
freefaller

Reputation: 19963

As per my comment...

The problem is that you're checking for .val() == "Yes" but your RadioButtonList item has Value="Y".

Upvotes: 2

Related Questions