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

  • Question

  • User-373571878 posted

    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>

    Friday, September 23, 2016 2:51 PM

Answers

  • User-707554951 posted

    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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, September 23, 2016 5:01 PM

All replies

  • User-707554951 posted

    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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, September 23, 2016 5:01 PM
  • User2117486576 posted

    Cathy Zou provides a good solution except that I would recommend using the jQuery .on() method instead of .live().

    Per the jQuery docs as of jQuery 1.7, the .live() method is deprecated.

    http://api.jquery.com/live/

    Saturday, September 24, 2016 1:04 AM