Change background color of a text field when radio button clicked to yes

Reply

Member

483 Points

Change background color of a text field when radio button clicked to yes

Sep 23, 2016 02:51 PM|StrangerMike|LINK

Can anyone help me with some script that when a radiobutton (No/Yes) is clicked to 'yes' the background of a text field is turned purple?

(And if clicked back to 'No', the textbox background goes back to white)?

Thank you!

 <td>
                            <asp:RadioButtonList ID="RadioButtonList2" runat="server" RepeatDirection="Horizontal">
                                <asp:ListItem Value="Y">Yes</asp:ListItem>
                                <asp:ListItem Value="N">No</asp:ListItem>
                            </asp:RadioButtonList>
                        </td>
                        <td style="width: 100px">
                        </td>
                          <td>
                            <asp:TextBox ID="txtExistingDescription" runat="server" TextMode="MultiLine" Height="50px"
                                Width="400px"></asp:TextBox>

Thanks

Reply

Cathy Zou

Star

8670 Points

2882 Posts

Re: Change background color of a text field when radio button clicked to yes

Sep 23, 2016 05:01 PM|Cathy Zou|LINK

Hi strangermike, From your description, I suggest you could use jquery. I make an example according to your code, you could refer to it.

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $("[id*=RadioButtonList2] input").live("click", function () {
            var selectedValue = $(this).val();
            var selectedText = $(this).next().html();
            if (selectedText == "Yes") {
                $("#txtExistingDescription").css("background-color", "purple");
            }
            else {
                $("#txtExistingDescription").css("background-color", "white");
            }
        });

    </script>

 <asp:RadioButtonList ID="RadioButtonList2" runat="server" RepeatDirection="Horizontal">
        <asp:ListItem Text="Yes" Value="Y" />
        <asp:ListItem Text="No" Value="Y" />      
    </asp:RadioButtonList>
         <asp:TextBox ID="txtExistingDescription" runat="server" TextMode="MultiLine" Height="50px"
                                Width="400px"></asp:TextBox>

Hope this can help you. If you have any question and confusion about the problem. Please don't hesitate to let me know.

Best regards
Cathy

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.