how to get selectedvalue of radiobuttonlist in Javascript?

Discussion in 'ASP .Net Web Controls' started by Arnold, Nov 12, 2006.

  1. Arnold

    Arnold Guest

    Hi,

    I need the SelectedValue of a radiobuttonlist in a Javascript variable. The
    radiobuttonlist is only used in a form for inputting data into a database.
    Before sending it to the database, i check the inputted values in
    Javascript.
    (By the way there is also a dropdownlist in the form, and i have no problem
    with getting its SelectedValue with the same javascript code). With the
    radiobuttonlist, i get "undefined" as value.

    Thanks for helping me
    Arnold

    The radiobuttonlist is created in the code-behind like this:

    Dim rb As RadioButtonList
    Dim frm As HtmlForm = Me.FindControl("form1")
    Dim rbl(2) As ListItem
    rb = New RadioButtonList
    rbl(1) = New ListItem("option 1", 1)
    rb.Items.Add(rbl(1))
    rbl(2) = New ListItem("option 2", 2).
    rb.Items.Add(rbl(2))
    rb.ID = "radio1"
    frm.Controls.Add(rb)

    The code in the aspx file:
    <form id="form1" runat="server">
    <input id="Sub1" type="button" value="submit" onclick="checkvalue()"/>
    </form>
    <script type="text/javascript">
    var antw
    function checkvalue()
    {
    antw=document.getElementById("radio1").value
    alert(antw) // this gives: undefined
    .....
    .....
    }
    </script>
     
    Arnold, Nov 12, 2006
    #1
    1. Advertising

  2. Arnold wrote:
    > Hi,
    >
    > I need the SelectedValue of a radiobuttonlist in a Javascript
    > variable. The radiobuttonlist is only used in a form for inputting
    > data into a database. Before sending it to the database, i check the
    > inputted values in Javascript.
    > (By the way there is also a dropdownlist in the form, and i have no
    > problem with getting its SelectedValue with the same javascript
    > code). With the radiobuttonlist, i get "undefined" as value.
    >
    > Thanks for helping me
    > Arnold
    >
    > The radiobuttonlist is created in the code-behind like this:
    >
    > Dim rb As RadioButtonList
    > Dim frm As HtmlForm = Me.FindControl("form1")
    > Dim rbl(2) As ListItem
    > rb = New RadioButtonList
    > rbl(1) = New ListItem("option 1", 1)
    > rb.Items.Add(rbl(1))
    > rbl(2) = New ListItem("option 2", 2).
    > rb.Items.Add(rbl(2))
    > rb.ID = "radio1"
    > frm.Controls.Add(rb)
    >
    > The code in the aspx file:
    > <form id="form1" runat="server">
    > <input id="Sub1" type="button" value="submit" onclick="checkvalue()"/>
    > </form>
    > <script type="text/javascript">
    > var antw
    > function checkvalue()
    > {
    > antw=document.getElementById("radio1").value
    > alert(antw) // this gives: undefined
    > ....
    > ....
    > }
    > </script>



    Run the page then View Source to see the radio buttons generated by the .Net
    control. This will reveal their IDs at which point it should be a simple
    matter to to use getElementById to get the value.

    --
    Microsoft MVP - ASP/ASP.NET
    Please reply to the newsgroup. This email account is my spam trap so I
    don't check it very often. If you must reply off-line, then remove the
    "NO SPAM"
     
    Bob Barrows [MVP], Nov 12, 2006
    #2
    1. Advertising

  3. Arnold

    johns221b Guest

    "Arnold" wrote:

    > Hi,
    >
    > I need the SelectedValue of a radiobuttonlist in a Javascript variable. The
    > radiobuttonlist is only used in a form for inputting data into a database.
    > Before sending it to the database, i check the inputted values in
    > Javascript.
    > (By the way there is also a dropdownlist in the form, and i have no problem
    > with getting its SelectedValue with the same javascript code). With the
    > radiobuttonlist, i get "undefined" as value.
    >
    > Thanks for helping me
    > Arnold


    RadionList value can be processed in server side before sending to database.
    radio1.SelectedItem.Text
    For javascript you will have to loop through the collection of radio
    buttons and check whether its checked or not, then take cchecked value.

    thanks,
    John Chacko





    >
    > The radiobuttonlist is created in the code-behind like this:
    >
    > Dim rb As RadioButtonList
    > Dim frm As HtmlForm = Me.FindControl("form1")
    > Dim rbl(2) As ListItem
    > rb = New RadioButtonList
    > rbl(1) = New ListItem("option 1", 1)
    > rb.Items.Add(rbl(1))
    > rbl(2) = New ListItem("option 2", 2).
    > rb.Items.Add(rbl(2))
    > rb.ID = "radio1"
    > frm.Controls.Add(rb)
    >
    > The code in the aspx file:
    > <form id="form1" runat="server">
    > <input id="Sub1" type="button" value="submit" onclick="checkvalue()"/>
    > </form>
    > <script type="text/javascript">
    > var antw
    > function checkvalue()
    > {
    > antw=document.getElementById("radio1").value
    > alert(antw) // this gives: undefined
    > .....
    > .....
    > }
    > </script>
    >
    >
    >
    >
    >
     
    johns221b, Nov 12, 2006
    #3
  4. Arnold

    MikeS Guest

    Since a RadioButton list doesn't have a OnClientClick property you can
    add something like it and save the selected value.

    <%@ Page Language="VB" %>

    <script runat="server">
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As
    System.EventArgs)
    InitList()
    End Sub
    Private Sub InitList()
    For Each li As ListItem In RadioButtonList1.Items
    li.Attributes.Add("onclick", "rb_click(this)")
    Next
    TextBox1.Text = RadioButtonList1.SelectedValue
    End Sub
    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As
    System.EventArgs)
    End Sub
    </script>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>

    <script type="text/javascript">
    function rb_click(el) {
    document.getElementById("<%=TextBox1.ClientID%>").value =
    el.value;
    }
    </script>

    </head>
    <body>
    <form id="form1" runat="server">
    <div>
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br
    />
    <asp:RadioButtonList ID="RadioButtonList1" runat="server">
    <asp:ListItem Selected="True">A</asp:ListItem>
    <asp:ListItem>B</asp:ListItem>
    <asp:ListItem>C</asp:ListItem>
    </asp:RadioButtonList>
    <asp:Button ID="Button1" runat="server"
    OnClick="Button1_Click" Text="Button" />
    </div>
    </form>
    </body>
    </html>
     
    MikeS, Nov 12, 2006
    #4
  5. Arnold

    Arnold Guest

    Thanks to all

    "Arnold" <> schreef in bericht
    news:...
    > Hi,
    >
    > I need the SelectedValue of a radiobuttonlist in a Javascript variable.
    > The radiobuttonlist is only used in a form for inputting data into a
    > database. Before sending it to the database, i check the inputted values
    > in Javascript.
    > (By the way there is also a dropdownlist in the form, and i have no
    > problem with getting its SelectedValue with the same javascript code).
    > With the radiobuttonlist, i get "undefined" as value.
    >
    > Thanks for helping me
    > Arnold
    >
    > The radiobuttonlist is created in the code-behind like this:
    >
    > Dim rb As RadioButtonList
    > Dim frm As HtmlForm = Me.FindControl("form1")
    > Dim rbl(2) As ListItem
    > rb = New RadioButtonList
    > rbl(1) = New ListItem("option 1", 1)
    > rb.Items.Add(rbl(1))
    > rbl(2) = New ListItem("option 2", 2).
    > rb.Items.Add(rbl(2))
    > rb.ID = "radio1"
    > frm.Controls.Add(rb)
    >
    > The code in the aspx file:
    > <form id="form1" runat="server">
    > <input id="Sub1" type="button" value="submit" onclick="checkvalue()"/>
    > </form>
    > <script type="text/javascript">
    > var antw
    > function checkvalue()
    > {
    > antw=document.getElementById("radio1").value
    > alert(antw) // this gives: undefined
    > ....
    > ....
    > }
    > </script>
    >
    >
    >
    >
     
    Arnold, Nov 12, 2006
    #5
  6. Arnold

    MikeS Guest

    Or I guess you could change your script a little.

    function checkvalue()
    {
    var col = document.getElementsByName("radio1")
    for (i = 0 ; i < col.length ; i++) {
    var el = col;
    if (el.type == "radio" && el.checked) {
    alert(el.value);
    break;
    }
    }
    }
     
    MikeS, Nov 12, 2006
    #6
  7. Arnold

    MikeS Guest

    My using it it there is not strictly required but is there in case
    ASP.NET decides to mangle the name.

    You can use ClientID for controls that get repeated and their id's
    generated in a databound control when you want to do something with
    them in client script.

    <%@ Page Language="VB" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <script runat="server">

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As
    System.EventArgs)
    If IsPostBack = False Then InitForm()
    End Sub
    Private Sub InitForm()
    Dim dt As New Data.DataTable
    dt.Columns.Add("ID", GetType(Integer))
    dt.Columns.Add("Text")
    For i As Integer = 1 To 10
    dt.Rows.Add(i, "Item " & i)
    Next
    GridView1.DataSource = dt
    GridView1.DataBind()
    End Sub
    Protected Function GetOptions(ByVal ID As Integer) As
    Data.DataTable
    Dim dt As New Data.DataTable
    dt.Columns.Add("Text")
    dt.Columns.Add("Value", GetType(Integer))
    dt.Rows.Add("Even", ID * 2)
    dt.Rows.Add("Odd", (ID * 2) - 1)
    Return dt
    End Function

    Protected Sub RadioButtonList1_DataBound(ByVal sender As Object,
    ByVal e As System.EventArgs)
    Dim rbl As RadioButtonList = sender
    Dim tb As TextBox = rbl.Parent.FindControl("TextBox1")
    For Each li As ListItem In rbl.Items
    Dim s As String = String.Format("doit('{0}',this)",
    tb.ClientID)
    li.Attributes.Add("onclick", s)
    Next
    End Sub
    </script>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title>Untitled Page</title>

    <script type="text/javascript">
    function doit(id,el) {
    document.getElementById(id).value = el.value;
    }
    </script>

    </head>
    <body>
    <form id="form1" runat="server">
    <div>
    <asp:GridView ID="GridView1" runat="server"
    AutoGenerateColumns="False">
    <Columns>
    <asp:BoundField DataField="ID" HeaderText="ID" />
    <asp:BoundField DataField="Text" HeaderText="Text"
    />
    <asp:TemplateField HeaderText="Options">
    <ItemTemplate>
    <div>
    <asp:TextBox runat="server"
    ID="TextBox1"></asp:TextBox></div>
    <asp:RadioButtonList ID="RadioButtonList1"
    runat="server" DataSource='<%# GetOptions(Eval("ID")) %>'
    DataTextField="Text"
    DataValueField="Value" OnDataBound="RadioButtonList1_DataBound">
    </asp:RadioButtonList>
    </ItemTemplate>
    </asp:TemplateField>
    </Columns>
    </asp:GridView>
    </div>
    </form>
    </body>
    </html>
     
    MikeS, Nov 12, 2006
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. thinkmast

    RadioButtonList SelectedValue

    thinkmast, May 7, 2006, in forum: .NET
    Replies:
    0
    Views:
    3,508
    thinkmast
    May 7, 2006
  2. Jeff
    Replies:
    2
    Views:
    2,313
  3. Arnold

    how to get selectedvalue of radiobuttonlist in Javascript?

    Arnold, Nov 12, 2006, in forum: ASP .Net Datagrid Control
    Replies:
    4
    Views:
    2,249
    Arnold
    Nov 12, 2006
  4. Replies:
    0
    Views:
    160
  5. Replies:
    1
    Views:
    194
    nandha
    Mar 29, 2005
Loading...

Share This Page