locked
C # (aspNet): change the value of a "TextBox" by "RadioButtonList" RRS feed

  • Question

  • User810415940 posted

    Hi,

    I have a RadioButtonList and a textBox on my form, like this :
    The text boxes value is "???" by default :

    <asp:RadioButtonList ID="radioButtonCount" RepeatDirection="Horizontal"  runat="server">
             <asp:ListItem Text="woman" Value="female"></asp:ListItem>
             <asp:ListItem Text="man" Value="male"></asp:ListItem>
             <asp:ListItem Text="child" Value="kid"></asp:ListItem>
    </asp:RadioButtonList>
     
    <asp:TextBox ID="who" runat="server" Enabled="false">???</asp:TextBox>
     
    I would like to change, instantly, the value of this text box when the user click on this list of radio button 
     
    If the user clicks on 'woman' The Tex box is displayed 'female'. If  'man' option is clicked  The Tex Box's value become 'male' or if it is on 'child' this Tex Box is displayed 'kid'.
     
    So I tried this :
    <script type="text/javascript">
     
    	$(document).ready(function () {
    		var $radioList_woman = $("#<%=countRadioButton.female.ClientID%>");
    		var $radioList_man = $("#<%=countRadioButton.male.ClientID%>");
    		var $radioList_child = $("#<%=countRadioButton.kid.ClientID%>");
    		var $textbox_who= $("#<%=who.ClientID %>");
     
    		$radioList_woman.onclick(function () {
    			var value = $radioList_woman.val();
    			$textbox_who.val(value);
    		});
     
    		$radioList_man.onclick(function () {
    			var value = $radioList_man.val();
    			$textbox_who.val(value);
    		});
     
    		$radioList_child.onclick(function () {
    			var value = $radioList_child.val();
    			$textbox_who.val(value);
    		});
    	}
    );		
     
    </script>
    but I have a some error :
    CS1061: 'System.Web.UI.WebControls.RadioButtonList' does not contain a definition for 'female' and no extension method 'female' accepting a first argument of type 'female' could be found (are you missing a using directive or an assembly reference?)
    How could I fix it?
     
     Thanks in advance for your help!
    Monday, January 14, 2019 4:18 PM

Answers

  • User475983607 posted

    How I can change its values ?

    The value does change it just not reflected in the inspector.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="WebFormsDemo._default" %>
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
    </head>
    <body>
        <form runat="server">
            <asp:RadioButtonList ID="radioButtonCount" RepeatDirection="Horizontal" runat="server" CssClass="myRadio">
                <asp:ListItem Text="woman" Value="female"></asp:ListItem>
                <asp:ListItem Text="man" Value="male"></asp:ListItem>
                <asp:ListItem Text="child" Value="kid"></asp:ListItem>
            </asp:RadioButtonList>
            <div>
                <asp:TextBox ID="who" runat="server">???</asp:TextBox>
            </div>
             <div>
                <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
            </div>
            <div>
                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
            </div>
    
    
        </form>
        <script>
            $('.myRadio input:radio').click(function (e) {
                console.log($(this).val());
                
                $('#<%=who.ClientID%>').val($(this).val());
            });
        </script>
    </body>
    </html>
    
    using System;
    using System.Web;
    using System.Web.Services;
    using System.Web.UI;
    
    namespace WebFormsDemo
    {
        public partial class _default : System.Web.UI.Page
        {
    
            protected void Page_Load(object sender, EventArgs e)
            {
    
            }
    
            protected void Button1_Click(object sender, EventArgs e)
            {
                Label1.Text = who.Text;
            }
        }
    }

    If you want to see the DOM update then update the value attribute.

        <script>
            $('.myRadio input:radio').click(function (e) {
                console.log($(this).val());
                $('#<%=who.ClientID%>').attr('value', $(this).val());
            });
        </script>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, January 14, 2019 8:11 PM
  • User839733648 posted

    Hi aspkiddy,

    If you want to change the value of the textbox, I suggest that you could add a button and set the text's value to the textbox.

    The function in the JS code could not affect the true value of textbox.

    Here is my testing code.

    .aspx

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("input[type='radio']").change(function () {
                    if ($(this).is(":checked")) {
                        $("#who").val($(this).val());
                    }
                });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:RadioButtonList ID="radioButtonCount" RepeatDirection="Horizontal" runat="server">
                <asp:ListItem Text="woman" Value="female"></asp:ListItem>
                <asp:ListItem Text="man" Value="male"></asp:ListItem>
                <asp:ListItem Text="child" Value="kid"></asp:ListItem>
            </asp:RadioButtonList>
            <asp:TextBox ID="who" runat="server" Enabled="false" ClientIDMode="Static">???</asp:TextBox>
            <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
    
        </form>
    </body>
    </html>

    Code behind.

            protected void Button1_Click(object sender, EventArgs e)
            {
               //set the text of textbox
                who.Text = radioButtonCount.SelectedItem.Value;
            }

    result:

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, January 15, 2019 7:21 AM

All replies

  • User475983607 posted

    Try this...

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="WebFormsDemo._default" %>
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
    </head>
    <body>
        <form runat="server">
            <asp:RadioButtonList ID="radioButtonCount" RepeatDirection="Horizontal" runat="server" CssClass="myRadio">
                <asp:ListItem Text="woman" Value="female"></asp:ListItem>
                <asp:ListItem Text="man" Value="male"></asp:ListItem>
                <asp:ListItem Text="child" Value="kid"></asp:ListItem>
            </asp:RadioButtonList>
    
            <asp:TextBox ID="who" runat="server" Enabled="false">???</asp:TextBox>
        </form>
        <script>
            $('.myRadio input:radio').click(function (e) {
                console.log($(this).val());
                $('#<%=who.ClientID%>').val($(this).val());
            });
        </script>
    </body>
    </html>
    
    
    
    

    Monday, January 14, 2019 4:34 PM
  • User810415940 posted

    Hi Mgebhard,

    It works thanks

    But I have another problem by this way.

    That is to say,  text box display is right but I need also change value of this text box.

    But always it is '???' even if I click on 'child' or 'woman' or 'man',. like this : 

    When I check by developer tools (inspector) I see this :

    <input name="who" type="text" value="???" id="who">

    How I can change its values ?

    Monday, January 14, 2019 7:50 PM
  • User475983607 posted

    How I can change its values ?

    The value does change it just not reflected in the inspector.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="WebFormsDemo._default" %>
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
    </head>
    <body>
        <form runat="server">
            <asp:RadioButtonList ID="radioButtonCount" RepeatDirection="Horizontal" runat="server" CssClass="myRadio">
                <asp:ListItem Text="woman" Value="female"></asp:ListItem>
                <asp:ListItem Text="man" Value="male"></asp:ListItem>
                <asp:ListItem Text="child" Value="kid"></asp:ListItem>
            </asp:RadioButtonList>
            <div>
                <asp:TextBox ID="who" runat="server">???</asp:TextBox>
            </div>
             <div>
                <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
            </div>
            <div>
                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
            </div>
    
    
        </form>
        <script>
            $('.myRadio input:radio').click(function (e) {
                console.log($(this).val());
                
                $('#<%=who.ClientID%>').val($(this).val());
            });
        </script>
    </body>
    </html>
    
    using System;
    using System.Web;
    using System.Web.Services;
    using System.Web.UI;
    
    namespace WebFormsDemo
    {
        public partial class _default : System.Web.UI.Page
        {
    
            protected void Page_Load(object sender, EventArgs e)
            {
    
            }
    
            protected void Button1_Click(object sender, EventArgs e)
            {
                Label1.Text = who.Text;
            }
        }
    }

    If you want to see the DOM update then update the value attribute.

        <script>
            $('.myRadio input:radio').click(function (e) {
                console.log($(this).val());
                $('#<%=who.ClientID%>').attr('value', $(this).val());
            });
        </script>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, January 14, 2019 8:11 PM
  • User839733648 posted

    Hi aspkiddy,

    If you want to change the value of the textbox, I suggest that you could add a button and set the text's value to the textbox.

    The function in the JS code could not affect the true value of textbox.

    Here is my testing code.

    .aspx

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("input[type='radio']").change(function () {
                    if ($(this).is(":checked")) {
                        $("#who").val($(this).val());
                    }
                });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:RadioButtonList ID="radioButtonCount" RepeatDirection="Horizontal" runat="server">
                <asp:ListItem Text="woman" Value="female"></asp:ListItem>
                <asp:ListItem Text="man" Value="male"></asp:ListItem>
                <asp:ListItem Text="child" Value="kid"></asp:ListItem>
            </asp:RadioButtonList>
            <asp:TextBox ID="who" runat="server" Enabled="false" ClientIDMode="Static">???</asp:TextBox>
            <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
    
        </form>
    </body>
    </html>

    Code behind.

            protected void Button1_Click(object sender, EventArgs e)
            {
               //set the text of textbox
                who.Text = radioButtonCount.SelectedItem.Value;
            }

    result:

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, January 15, 2019 7:21 AM
  • User810415940 posted

    Hi AgaveJoe and Jenifer Jiang,smile
    both your solution are working correctly
    Many Thanks laughing

    Tuesday, January 15, 2019 8:08 PM