how to get selectedvalue of radiobuttonlist in Javascript?

12 Nov 2006 12:16 PM

Arnold

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>

12 Nov 2006 1:02 PM

Bob Barrows [MVP]

Arnold wrote:
Show quoteHide quote

> 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"

12 Nov 2006 1:13 PM

johns221b

Show quote Hide quote

"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

Show quoteHide quote

>
> 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>
>
>
>
>
>

12 Nov 2006 3:01 PM

MikeS

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>

12 Nov 2006 3:35 PM

MikeS

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[i];
        if (el.type == "radio" && el.checked) {
            alert(el.value);
            break;
        }
    }
}

12 Nov 2006 3:51 PM

Beemer Biker

Hi Mike! I am jumping on this thread because I have almost the same problem
except I am working with a gridview

Show quoteHide quote

"MikeS" <michael.spen***@gmail.com> wrote in message
news:1163343704.915356.307980@e3g2000cwe.googlegroups.com...
> 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)")

can I assume "this" would also work with a gridview where at bindtime I
added my lists?

Show quoteHide quote

>        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;

I am a newbie and have never seen the code "<%=TextBox1.ClientID%>" used
like that in getElementByID. What if each each row in the grid had the same
TextBox1 in a templated grid. Would that work also?

Show quoteHide quote

>    }
>    </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>
>

12 Nov 2006 5:36 PM

MikeS

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>

13 Nov 2006 4:10 PM

Beemer Biker

Thanks Mike, this worked (almost) perfectly. My original code added the
htmlbutton to the bound cell before adding the htmlselect. I had to change
the order because the ClientID is not set until the
e.Row.Cells[0].Controls.Add(thisSelect) is executed. The layout I wanted
was <operator><operand> and now the button (operator) and the
select(operand) are reversed in the templated column. I assume I can
specify position to re-arrange the order back where I had it. Possibly
could "find" the control and backfit the ClientID. For now I am going to
leave the display with the htmlselect first and the button second since it
is working and this is just a prototype page I am working on.

I tried setting the position and ran into problems as the cell did not
expand to where those controls fit in like I thought. I suspect I will have
to add a panel to set the size of the Row.Cell[0] since I cant seem to set
it to any width using header style or item style.

Show quoteHide quote

"MikeS" <michael.spen***@gmail.com> wrote in message
news:1163352967.454197.300880@m73g2000cwd.googlegroups.com...
> 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>
>

12 Nov 2006 3:24 PM

Arnold

Thanks to all

Show quoteHide quote

"Arnold" <a*@nold.cv> schreef in bericht
news:OvZJRRlBHHA.3536@TK2MSFTNGP03.phx.gbl...
> 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>
>
>
>
>