CODEWITHSUNDEEP
jqueryasp.netradiobuttonlist
Melanie
Melanie

Reputation: 584

jQuery Function to get RadioButtonList Value

I have the following HTML code:

<tr>
<td>
    <span>Random question here?</span>
</td>
<td>
    <asp:RadioButtonList ID="someList" runat="server" SelectedValue="<%# Bind('someValue') %>" RepeatDirection="Horizontal" CssClass="radioList">
        <asp:ListItem Text="Yes" Value="1"></asp:ListItem>
        <asp:ListItem Text="No" Value="4"></asp:ListItem>
        <asp:ListItem Text="Don't Know" Value="2"></asp:ListItem>                                        
    </asp:RadioButtonList>
</td>
<td>
    <asp:TextBox ID="txtSomeValue" runat="server" Height="16px" CssClass="someScore" Enabled="false" Text="0"></asp:TextBox>
</td>
</tr>
<tr>
<td>
    <asp:TextBox ID="txtSomeTotal" runat="server" Height="16px" CssClass="someTotal" Enabled="false" Text="0"></asp:TextBox>
    <asp:Label ID="lblTFTotal" runat="server" Font-Bold="true" Font-Italic="true" Text="Your selected value is"></asp:Label>
</td>
</tr>

I need to write a jQuery function that populates the 'txtSomeValue' TextBox with the value selected from the RadioButtonList, and then calculates all the values selected (from about 10 of these RadioButtonLists) into the 'txtSomeTotal' TextBox.

I'm quite new to jQuery. Any help would be awesome.

Thanks

Upvotes: 4

Views: 18112

Answers (6)

hasanaydogar
hasanaydogar

Reputation: 905

  <asp:RadioButtonList ID="rblRequestType">
        <asp:ListItem Selected="True" Value="value1">Value1</asp:ListItem>
        <asp:ListItem Value="Value2">Value2</asp:ListItem>
  </asp:RadioButtonList>

You can reach listitems like this;

var radio0 = $("#rblRequestType_0");
var radio1 = $("#rblRequestType_1");

if (radio0.checked){
// do something
}
if (radio1.checked){
// do something
}

Upvotes: 0

JonK
JonK

Reputation: 622

Ivan almost got it - but there's a quicker way. Use JQuery to select the RBL, then filter by the selected input:

$("#<%# rbRadioButtonListId.ClientID %> input:radio:checked").val();

No need for trapping tables or the Name of the radio buttons.

Upvotes: 6

Ivan Stefanov
Ivan Stefanov

Reputation: 489

I used:

$('#<%= rbRadioButtonListId.ClientID %>').children().children().children().find("input:checked").val();

There are too many "children" selectors, because of the generated html for representing the radiobuttonlist (table > tbody > tr > td > input).

Hope this answer will help somebody else, who couldn't find the appropriate solution about his problem.

Upvotes: 0

Andy Rose
Andy Rose

Reputation: 16974

Your main issue is selecting the radio button as the radiobuttonlist id relates to a table wrapping your radio buttons. Once you've got that it's just a case of getting the fields you want to update. I would suggest assigning a class to the <tr> tag to make this a bit easier:

<tr class="mainRow">
<td>
    <span>Random question here?</span>
</td>
<td> ....

and then using something like this

    <script>
    $(document).ready(function () {
        $('.radioList input').click(function () {
            /* get the value of the radio button that's been clicked */
            var selectedValue = $(this).val();
            /* assign it to the nearest text box with a class of someScore */
            $(this).closest('.mainRow').find('.someScore').val(selectedValue);
            /* calculate the value of all the text boxes with a class of someScore */
            var currentTotal = 0;
            $('.someScore').each(function () {
                if (!isNaN($(this).val())) {
                    currentTotal += Number($(this).val());
                }
            });
            /* assign it to the text box that displays the total */
            $('#<%=txtSomeTotal.ClientID %>').val(currentTotal);
        });
    });
</script>

Upvotes: 2

Malevolence
Malevolence

Reputation: 1857

All of the radio buttons in your list should be rendered with the same name attribute. Look at that, and use that as the selector in your script. Something like this should work:

$('input:radio[name=NameOfRadioButtons]:checked').val();

Upvotes: 3

Mathieu
Mathieu

Reputation: 3083

To populate a textbox with jQuery, you should use the val()-function.

$("#ID").val("Text to put in the textbox").

Because ASP.NET changes the ID's of the .net-objects, you'll have to do this:

$("#<%= txtSomeValue.ClientID %>").val("Text to put in the textbox").

Is this sufficient?

Upvotes: 1

Related Questions