Solved

determine which radio button is selected from group.

Posted on 2013-06-05
7
255 Views
Last Modified: 2013-06-05
I'm trying to determine which radiobutton in a group is selected. I preselect one of the choices. In my debug mode the only thing ever passed is the one preselected. It doesn't send the current one selected.What am I doing wrong?

 <script type="text/javascript">
        $(document).ready(function () {
            $("#<%=txtSearch.ClientID%>").autocomplete("Search.ashx?type=" + $("input:radio[name='toggle']:checked").val(), {
             width: 200,
             formatItem: function(data, i, n, value) {
                 return "<img style = 'width:50px;height:50px' src='Images/doctypes/" + value.split(",")[1] + ".png'/> " + value.split(",")[0];
             },
             formatResult: function (data, value) {
                 $("#<%=hfCustomerId.ClientID %>").val(value.split(",")[2]);
                 return value.split(",")[0];

             }
           
         });
     });
   </script>

Open in new window

0
Comment
Question by:NickMalloy
  • 3
  • 3
7 Comments
 
LVL 7

Expert Comment

by:Alex_W
ID: 39222072
You could get the currently selected radio buttons id:

var id = $("input[@name=RadioButtonGroup]:checked").attr('id');

or get the value's if they are unique:

var value = $("input[@name=RadioButtonGroup]:checked").val();
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39222135
Try this :
	$(document).ready(function () {
		$.ajaxSetup({ data: { "type":$("input:radio[name='toggle']:checked").val() } }); // ADD this param to every jQuery ajax call
		$("#<%=txtSearch.ClientID%>").autocomplete("Search.ashx", {
			width: 200,
			formatItem: function(data, i, n, value) {
				return "<img style = 'width:50px;height:50px' src='Images/doctypes/" + value.split(",")[1] + ".png'/> " + value.split(",")[0];
			},
			formatResult: function (data, value) {
				$("#<%=hfCustomerId.ClientID %>").val(value.split(",")[2]);
				return value.split(",")[0];
			}
		});
	});

Open in new window

0
 

Author Comment

by:NickMalloy
ID: 39222261
I tried the code above and it still is sending the same radiobutton name everytime. I call the button using this code.

 public void ProcessRequest (HttpContext context)
    {
        string searchText = context.Request.QueryString["q"];
        string Filters = context.Request.QueryString["type"];
       
    }

Open in new window

0
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 

Author Comment

by:NickMalloy
ID: 39222619
when I debug the jquery it never hits this code again. Only on first load.

 $.ajaxSetup({ data: { "type": $("input:radio[name='toggle']:checked").val() } });

How can I change that?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39222749
I tried the code above and it still is sending the same radiobutton name everytime. I call the button using this code.
Did you notice I remove the param line 3?

when I debug the jquery it never hits this code again. Only on first load.

 $.ajaxSetup({ data: { "type": $("input:radio[name='toggle']:checked").val() } });

How can I change that?
Don't change it, read the comment line 2

Any live link to see your implementation?
0
 

Author Comment

by:NickMalloy
ID: 39222767
Complete code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="testsearch.aspx.cs" Inherits="testsearch" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="css/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
    <script src="Jquery1/jquery-1.5.1.min.js"></script>
    <script src="scripts/jquery.autocomplete.js" type="text/javascript"></script>
     <script type="text/javascript">
         $(document).ready(function () {
             $.ajaxSetup({ data: { "type": $("input:radio[name='toggle']:checked").val() } });
             $("#<%=txtSearch.ClientID%>").autocomplete("Search.ashx", {
                 width: 200,
                 formatItem: function (data, i, n, value) {
                     return "<img style = 'width:50px;height:50px' src='Images/doctypes/" + value.split(",")[1] + ".png'/> " + value.split(",")[0];
                 },
                 formatResult: function (data, value) {
                     $("#<%=hfCustomerId.ClientID %>").val(value.split(",")[2]);
		        return value.split(",")[0];
		    }
             });
         });
   </script>
</head>
<body>
    <form id="form1" runat="server">
    Search<br /> <asp:TextBox ID="txtSearch" runat="server"></asp:TextBox><asp:HiddenField ID="hfCustomerId" runat="server" /><br /><br />Filters<br />
    <label class="lightgrey"><asp:RadioButton ID="rdbAll" GroupName="toggle" runat="server"  /><span>All</span></label><br />
    <label class="lightgrey"><asp:RadioButton ID="rdbTest1" GroupName="toggle" runat="server" /><span>Test 1</span></label><br />
    <label class="lightgrey"><asp:RadioButton ID="rdbTest2" GroupName="toggle" runat="server" /><span>Test 2</span></label><br />
    <label class="lightgrey"><asp:RadioButton ID="rdbTest3" GroupName="toggle" runat="server" /><span>Test 3</span></label><br />
    </form>
</body>
</html>

Open in new window


Search file.

<%@ WebHandler Language="C#" Class="Search" %>
using System;
using System.Data.SqlClient;
using System.Text;
using System.Web;
using System.Web.UI;

public class Search : IHttpHandler {
    
    public void ProcessRequest (HttpContext context)
    {
        string searchText = context.Request.QueryString["q"];
        string Filters = context.Request.QueryString["type"];
 
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

Open in new window

0
 
LVL 82

Accepted Solution

by:
leakim971 earned 350 total points
ID: 39223038
Thank you, it will work with :
     <script type="text/javascript">
         $(document).ready(function () {
             $("#<%=txtSearch.ClientID%>").autocomplete("Search.ashx", {
                 extraParams: { "type": function () { return $("input:radio[name='toggle']:checked").val(); } },
                 width: 200,
                 formatItem: function (data, i, n, value) {
                     return "<img style = 'width:50px;height:50px' src='Images/doctypes/" + value.split(",")[1] + ".png'/> " + value.split(",")[0];
                 },
                 formatResult: function (data, value) {
                     $("#<%=hfCustomerId.ClientID %>").val(value.split(",")[2]);
                     return value.split(",")[0];
                 }
             });
         });
   </script>

Open in new window

0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

820 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question