• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 930
  • Last Modified:

Get Values of Radio buttons/Checkboxes - ajax/javascript.

I have a form with a number of radio buttons / checkboxes on it.  
When they are clicked on the results are displayed on the main part of the page.

each radio button has an onclick event:

onClick="updateItems(this.form);return false;"

My function receiving this is below.  

To get the values of the radio buttons I tried the document.getElementsByName but it doesn't work, they return as undefined.

How can I get the values of the radio buttons / checkboxes?

occasion and onoffer are checkboxes, the rest are radio buttons.
function updateItems(formElement)
{	
show_progressbar('shopdiv');

	
xmlhttp2=GetXmlHttpObject();
if (xmlhttp2==null)
  {
  alert ("Your browser does not support AJAX!");
  return;
  }
var url="/shop/includes/updateitems.asp";
var i=0;
url=url+"?cmd=1";

var catid=document.getElementsByName('category').value;
url=url+"&catid="+catid;
var brandid=document.getElementsByName('brand').value;
url=url+"&brandid="+brandid;
var rangeid=document.getElementsByName('range').value;
url=url+"&rangeid="+rangeid;
var occid=document.getElementsByName('occasion').value;
url=url+"&occid="+occid;
var priceid=document.getElementsByName('price').value;
url=url+"&priceid="+priceid;
var onoffer=document.getElementsByName('onoffer').value;
url=url+"&offer="+onoffer;


url=url+"&sid="+Math.random();
xmlhttp2.onreadystatechange=showShopitems;
xmlhttp2.open("GET",url,true);
xmlhttp2.send(null);

}

Open in new window

0
harris9999
Asked:
harris9999
1 Solution
 
Avinash ZalaWeb ExpertCommented:
try getElementById and assign unique Ids

Hope this helps
Addy
0
 
harris9999Author Commented:
Each radio button in a group does have a unique ID.  I need to get the checked one.  

Currently working with something like:

var formitem = document.getElementsByName("category");
for (i = 0; i < formitem.length; i++) {
 if (formitem[i].checked) catid = formitem[i].value;
}
url=url+"&catid="+catid;

Might be working

0
 
leakim971PluritechnicianCommented:
Hello harris9999,

Please have a look to the following :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript">
	function updateItems(formElement) {
		var rb = document.getElementsByTagName("input");
		for(var i=0;i<rb.length;i++)
			try { if( (rb[i].name == "volume") && rb[i].checked) alert(rb[i].value); } catch(e) {}

	}
</script>
</head>
<body>
<input type="radio" value="value radio1" id="id1" name="volume" onclick="updateItems(this.form);" />I'm only a text behind radio1 not it's value<br />
<input type="radio" value="value radio2" id="id2" name="volume" onclick="updateItems(this.form);" />I'm only a text behind radio2 not it's value<br />
<input type="radio" value="value radio3" id="id3" name="volume" onclick="updateItems(this.form);" />I'm only a text behind radio3 not it's value<br />
<input type="radio" value="value radio4" id="id4" name="volume" onclick="updateItems(this.form);" />I'm only a text behind radio4 not it's value<br />
</body>
</html>

Open in new window

0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
ddayx10Commented:
When using the document.getElementsByName method the method returns an array of elements.

So var catid=document.getElementsByName('category').value is undefined because document.getElementsByName('category') is an array.

catid=document.getElementsByName('category')[0].value will return the value of the first checkbox with a name attribute of "category".

This brings you to a new issue. If you have more than one checkbox with each individual name and you want to know which in each bunch are checked then after you get the array of elements by name you have to loop through them to see which are checked and which are not.

EX.
var cat=document.getElementsByName('category');

for(i=0;i<cat.length;i++)
{
    if(cat[i].checked)
    {
        url=url+"&catid="+cat[i].value;
    }
}

This in turn is possibly going to lead you to rethink how you manage the querystring...

So manybe you build a delimited list of values for each querystringID, or maybe you modify something else. This should at least tell you where you are struggling with the initial problem and maybe get you working toward a new solution.

If you get more going and need more help please post a a sample of html that will work with your javascript to make it easier to help with a solution. It doesn't have to be your entire html (god forbid), just enough inputs etc with the attributes set for testing.
0
 
DmitryVasilievCommented:
I would recommend you use jQuery in your projects. Here is solution written using jQuery

var _name = $("input[@name='radio_name']:checked").val();

0
 
harris9999Author Commented:
The jquery method doesn't seem to work.  
It looks the simplest but it passes the same value for the catid and brandid.

var catid = $("input[@name='category']:checked").val();
url=url+"&catid="+catid;

var brandid = $("input[@name='brand']:checked").val();
url=url+"&brandid="+brandid;


But with this javascript it seems to work ok:

formitem = document.getElementsByName("category");
for (i = 0; i < formitem.length; i++) {
 if (formitem[i].checked) catid = formitem[i].value;
}

url=url+"&catid="+catid;

formitem = document.getElementsByName("brand");
for (i = 0; i < formitem.length; i++) {
 if (formitem[i].checked) brandid = formitem[i].value;
}
url=url+"&brandid="+brandid;
0
 
leakim971PluritechnicianCommented:
Hello harris9999,

Do you need something else ?

Regards.
0
 
harris9999Author Commented:
Solution using doesn't seem to work with checkboxes:

formitem = document.getElementsByName("onoffer");
for (i = 0; i < formitem.length; i++) {
 if (formitem[i].checked) onoffer = formitem[i].value;
}
url=url+"&offer="+onoffer;

Works fine for the radio buttons but not the checkboxes
0
 
harris9999Author Commented:
Sorry in the checkboxes it only passes the id of the box that was checked instead if there was multiple checked.
0
 
leakim971PluritechnicianCommented:
With Jquery :

checkbox and radio "run" fine :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" src="jquery.js"></script>
<script language="javascript">
        function updateItems(formElement) {
			var url = "";
			$(".url:checked").each(function () {
				url += $(this).val();
			});                
			alert(url)
        }
</script>
</head>
<body>
<input type="radio" value="value radio1" id="id1" class="url" name="volume" onclick="updateItems();" /><br />
<input type="radio" value="value radio2" id="id2" class="url" name="volume" onclick="updateItems();" /><br />
<input type="radio" value="value radio3" id="id3" class="url" name="volume" onclick="updateItems();" /><br />
<input type="radio" value="value radio4" id="id4" class="url" name="volume" onclick="updateItems();" /><br />
<input type="checkbox" value="value checkbox 1" id="id5" class="url" name="volume" onclick="updateItems();"  />1
<input type="checkbox" value="value checkbox 2" id="id6" class="url" name="volume" onclick="updateItems();"  />2
<input type="checkbox" value="value checkbox 3" id="id7" class="url" name="volume" onclick="updateItems();"  />3
<input type="checkbox" value="value checkbox 4" id="id8" class="url" name="volume" onclick="updateItems();"  />4
</body>
</html>

Open in new window

0
 
leakim971PluritechnicianCommented:
Did I miss something ?
0
 
harris9999Author Commented:
No, your code works fine in its own example. I can't seem to get it applied to my code.

All my js/ajax code is in an external file.

Typical checkbox which is inside a loop is:

<input type="checkbox" name="occasion" id="radoccasion<%=i%>" onClick="updateItems(this.form);return false;" value="<%=rsB("Id")%>" <%if cint(occasionid)=rsB("Id") then response.Write("checked=""checked""") end if%> /><label for="radoccasion<%=i%>"><%=rsB("Feature")%></label>

My code for the updateIitems is in the box below:
bit messy now with the code for each set of radio buttons/checkboxes. Could probably be tidied up.

The the occasion element is a number of checkboxes.

Also when I click on the radio buttons or checkboxes on the page they do not show as checked, they run the function in the onclick event but don't actually check the box.
function updateItems(formElement)
{	
show_progressbar('shopdiv');

	
xmlhttp2=GetXmlHttpObject();
if (xmlhttp2==null)
  {
  alert ("Your browser does not support AJAX!");
  return;
  }
var url="/shop/includes/updateitems.asp";
var i=0;
url=url+"?cmd=1";

var formitem
var brandid
var rangeid
var occid
var priceid
var onoffer


         



formitem = document.getElementsByName("category"); 
for (i = 0; i < formitem.length; i++) { 
 if (formitem[i].checked) catid = formitem[i].value; 
} 

//var catid = $("input[@name='category']:checked").val();

url=url+"&catid="+catid;

formitem = document.getElementsByName("brand"); 
for (i = 0; i < formitem.length; i++) { 
 if (formitem[i].checked) brandid = formitem[i].value; 
} 


//var brandid = $("input[@name='brand']:checked").val();

url=url+"&brandid="+brandid;

formitem = document.getElementsByName("range"); 
for (i = 0; i < formitem.length; i++) { 
 if (formitem[i].checked) rangeid = formitem[i].value; 
} 

url=url+"&rangeid="+rangeid;

formitem = document.getElementsByName("occasion"); 
for (i = 0; i < formitem.length; i++) { 
 if (formitem[i].checked) occid = formitem[i].value; 
} 

url=url+"&occid="+occid;

formitem = document.getElementsByName("price"); 
for (i = 0; i < formitem.length; i++) { 
 if (formitem[i].checked) priceid = formitem[i].value; 
} 

url=url+"&priceid="+priceid;


formitem = document.getElementsByName("onoffer"); 
for (i = 0; i < formitem.length; i++) { 
 if (formitem[i].checked) onoffer = formitem[i].value; 
} 

url=url+"&offer="+onoffer;
/**/

url=url+"&sid="+Math.random();
xmlhttp2.onreadystatechange=showShopitems;
xmlhttp2.open("GET",url,true);
xmlhttp2.send(null);

}

function showShopitems()
{
if (xmlhttp2.readyState==4)
{
	replace_html("shopdiv", xmlhttp2.responseText);

}
}

Open in new window

0
 
harris9999Author Commented:
I have been trying with the jquery but can't get it to work so just left code as was.
0
 
leakim971PluritechnicianCommented:
The jquery one work with a class  :

class="url"

so in jquery we use the class name (and not the id) : .url

$(".url:checked")

So try :


<input type="checkbox" class="url" name="occasion" id="radoccasion<%=i%>" onClick="updateItems();" value="<%=rsB("Id")%>" <%if cint(occasionid)=rsB("Id") then response.Write("checked=""checked""") end if%> /><label for="radoccasion<%=i%>"><%=rsB("Feature")%></label>

Open in new window

0
 
harris9999Author Commented:
Doh missed the class bit.  
Now using your example and there is an alert box with the value of the checkbox in it.

My problem imay be coming from when I click on a checkbox it does not remain checked when I go to click on the next one.  Why would that be?
0
 
leakim971PluritechnicianCommented:
I see only a strange code able to do that :

<%if cint(occasionid)=rsB("Id") then response.Write("checked=""checked""") end if%>
0
 
harris9999Author Commented:
Seen what it is IT was the
return false; after the calling of the function which was causing the problem.

Have a similair problem getting the value of the select box, tried a few different things from searching onling but nothing working yet.  
But I'll ask a new question for that.

Thanks for your help here.
0
 
leakim971PluritechnicianCommented:
You're welcome! Thanks a lot for the points!
0
 
harris9999Author Commented:
No problem.
Have just asked s similiar question about select boxes you'll probably know the best solution for that also.
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now