How to Pass a Radio Button value from Client side to Web Method.

See more:

VB

Javascript

HTML5

Hi,

I have a radiobutton list and a datalist... I am using both of these to form a chart using chart.js...

The chart is created on clicking the link button in the data list based on radio button value provided... I am getting the chart, but the problem is that the data table that is used to form the chart is derived based on the value of the radio button selected... The problem is that the system takes the default value selected in the radio button for binding the chart. Even if I select another value the chart shows data from the default radio button... How to pass the radio button value on loading the page to the web service...??? Also how to clear the chart when the next link button is clicked...???

Regards,

Sajin A

<WebMethod()> _
        Private Shared Function GetZoneSalesData(ByVal rbtlSales As String) As String()
        Dim clsSales As New TS.Corporate.SalesGenerateBarChart
        Dim dTable As New DataTable
        Dim strReportHeading As String = ""

        dTable = clsSales.ZoneSalesValue(rbtlSales)
        Dim resultdata = From d In dTable.AsEnumerable()
        Dim data(dTable.Rows.Count - 1) As String
        For i As Integer = 0 To dTable.Rows.Count - 1
            Dim item As DataRow = dTable.Rows(i)
            data(i) = (String.Format("{0}-{1}", item("zone"), item("zoneTotal")))
        Next
        Return data
    End Function

<script type="text/javascript">
       <script type="text/javascript">
    $(function() {
        $("[id*=dlstZone] [id*=lbtnZone]").click(function() {
            var row = $(this).closest('tr');
            var branchId = $(row).find('[id*=hfBranchId]').val();

            var rbtlSales = document.getElementById("<%= rbtlSales.ClientID%>");

            alert(rbtlSales);
            $.ajax({
                url: '<%=ResolveUrl("~/Corporate/Sales.aspx/GetZoneData") %>',
                data: "{'rbtlSales':'" + rbtlSales + "'}",
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                success: function(data) {
                    var labels = [];
                    var datas = [];
                    $.each(data.d, function(i, item) {
                        var l = item.split('-')[0];
                        var d = item.split('-')[1];
                        labels.push(l);
                        datas.push(d);
                    });
                    var barChartLocData =
            {
                labels: labels,
                datasets:
                [
                    {
                        fillColor: "green",
                        highlightFill: "lightgreen",
                        data: datas
                    }
                ]
            };

                    var ctx = document.getElementById("canvas").getContext("2d");
                    new Chart(ctx).HorizontalBar(barChartLocData, {
                        responsive: true
                    });
                },
                error: function(response) {
                    alert(response.responseText);
                },
                failure: function(response) {
                    alert(response.responseText);
                }
            });
        });
    });
</script>

My radio button is as below...

<asp:radiobuttonlist id="rbtlSales" runat="server" font-bold="True" cellpadding="1" repeatlayout="Flow" xmlns:asp="#unknown">
<asp:listitem value="today" selected="True">Today's Sales</asp:listitem>
<asp:listitem value="yesterday">Yesterday's Sales</asp:listitem>
<asp:listitem value="mtd">MTD</asp:listitem>
<asp:listitem value="prevmonth">Previous Month Sales</asp:listitem>
<asp:listitem value="ytd">YTD</asp:listitem>
</asp:radiobuttonlist>