Question

I have a TextBox next to a RadioButton, and when someone selects the TextBox it should set the associated RadioButton as Selected.

I was using this code until I noticed it only worked for Chrome:

<asp:RadioButton runat="server" GroupName="SomeGroup" ID="rbOption3" />
<asp:Label runat="server" AssociatedControlID="rbOption3">
    <asp:Label runat="server" Text="Pay other amount" />
    <asp:TextBox runat="server" ID="txtOtherAmount" CssClass="money-text" />
    <div class="align-with-radiobutton small-text">
        The minimum amount for web payments is <asp:Label runat="server" ID="lblMinPayment" />. If you are looking to pay a lower
        amount, please <a href="Contact.aspx">contact us</a> and speak with a representative.
    </div>
</asp:Label>

It behaves differently in all 3 major browsers

IE: Selection does not change at all when TextBox is selected

FireFox: Selection changes on MouseUp, which means anytime you select the TextBox, the focus will change to the RadioButton, which makes it seem like the TextBox is not selectable

Chrome: Works fine since the selection changes on MouseDown

My requirement is that users can select any part of the Text, or the TextBox, and it will select the Radio Button.

How can I select an associated RadioButton whenever a TextBox gains focus, either from mouse or keyboard navigation?

Edit

The solution posted by rsbarro works for IE and Chrome, however it is still failing for FireFox. When you select the TextBox in FireFox, the RadioButton steals focus on MouseUp, which makes it look like the TextBox cannot be selected.

I tried using some jQuery, however the .changed() and .focus() don’t get fired when selecting the TextBox (they get fired when selecting the Label though), and I can’t seem to stop the event.

Answer 1

The following approach worked for me in the latest versions of IE, Firefox, and Chrome:

<script type="text/javascript">
    function selectRadio3() {
        var rb = document.getElementById('<%= rbOption3.ClientID %>');
        rb.checked = true;
    }

    function selectOtherAmount() {
        var txt = document.getElementById('<%= txtOtherAmount.ClientID %>');
        txt.focus();
    }
</script>

<asp:RadioButton runat="server" GroupName="SomeGroup" ID="rbOption3" onclick="javascript:selectOtherAmount()" />
<asp:Label ID="Label1" runat="server" AssociatedControlID="txtOtherAmount" Text="Pay other amount" />
<asp:TextBox runat="server" ID="txtOtherAmount" onfocus="javascript:selectRadio3()" CssClass="money-text" />
<div class="align-with-radiobutton small-text" onclick="javascript:selectOtherAmount()">
    The minimum amount for web payments is <asp:Label runat="server" ID="lblMinPayment" />. If you are looking to pay a lower
    amount, please <a href="Contact.aspx">contact us</a> and speak with a representative.
</div>

I associated the Label with the TextBox, and I added javascript to set the checked property of the RadioButton when the TextBox gets the focus. I also added and onclick event on the RadioButton to set the focus to the TextBox.

EDIT
Using your original HTML and adding a little javascript worked for me as well. I added an onclick event to the RadioButton to set the focus to the TextBox, and an onfocus event on the TextBox to set the checked property of the RadioButton.

<script type="text/javascript">
    function selectRadio3() {
        var rb = document.getElementById('<%= rbOption3.ClientID %>');
        rb.checked = true;
    }

    function selectOtherAmount() {
        var txt = document.getElementById('<%= txtOtherAmount.ClientID %>');
        txt.focus();
    }
</script>

<asp:RadioButton runat="server" GroupName="SomeGroup" ID="rbOption3" onclick="javascript:selectOtherAmount();" />
<asp:Label ID="Label1" runat="server" AssociatedControlID="rbOption3">
    <asp:Label ID="Label2" runat="server" Text="Pay other amount" />
    <asp:TextBox runat="server" ID="txtOtherAmount" CssClass="money-text" onfocus="javascript:selectRadio3();" />
    <div class="align-with-radiobutton small-text">
        The minimum amount for web payments is <asp:Label runat="server" ID="lblMinPayment" />. If you are looking to pay a lower
        amount, please <a href="Contact.aspx">contact us</a> and speak with a representative.
    </div>
</asp:Label>