473,406 Members | 2,312 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,406 software developers and data experts.

reusable function to get radio button's selected value?

According to
http://www.quirksmode.org/js/forms.html
you need to look through a radio button's members to find the value:
>Radio buttons
Unfortunately it's not possible to see at once which radio button in a group the user has checked. You need to go >through all radio's and see which one's checked property is true.
I tried writing a reusable function to return the value, see code at:
http://www.geocities.com/usenet_daug...ript_radio.htm

but for some reason I can only get a value if I hard code the control
name.

Can anyone explain how to do this?

Thanks
Jun 27 '08 #1
5 3582
On Apr 21, 12:21*pm, mad.scientist...@gmail.com wrote:
According to
* *http://www.quirksmode.org/js/forms.html
you need to look through a radio button's members to find the value:
Radio buttons
Unfortunately it's not possible to see at once which radio button in a group the user has checked. You need to go >through all radio's and see which one's checked property is true.

I tried writing a reusable function to return the value, see code at:
* *http://www.geocities.com/usenet_daug...ript_radio.htm

but for some reason I can only get a value if I hard code the control
name.

Can anyone explain how to do this?

Thanks
Does this work for you?

function getSelectedValueForName(name) {
for (var i = 0; i < document.getElementsByTagName("input").length; i+
+) {
var input = document.getElementsByTagName("input")[i];
if (input.type == "radio" && input.checked) {
return input.value;
}
}
return null;
}

You would call getSelectedValueForName('Radio1'); where your radio
buttons share the name Radio1.

HTH.
Jun 27 '08 #2
Tom Cole wrote:
On Apr 21, 12:21�pm, mad.scientist...@gmail.com wrote:
According to
� �http://www.quirksmode.org/js/forms.html
you need to look through a radio button's members to find the value:
>Radio buttons
>Unfortunately it's not possible to see at once which radio button in a group the user has checked. You need to go >through all radio's and see which one's checked property is true.
I tried writing a reusable function to return the value, see code at:
� �http://www.geocities.com/usenet_daug...ript_radio.htm

but for some reason I can only get a value if I hard code the control
name.

Can anyone explain how to do this?

Thanks

Does this work for you?

function getSelectedValueForName(name) {
for (var i = 0; i < document.getElementsByTagName("input").length; i+
+) {
var input = document.getElementsByTagName("input")[i];
if (input.type == "radio" && input.checked) {
return input.value;
}
}
return null;
}

You would call getSelectedValueForName('Radio1'); where your radio
buttons share the name Radio1.

HTH.
Tim, HTH,
Your solution was good, but from performance point of view, you
can do better.
Caching your "input" collection will greatly improve speed. Also, for
loops will calculate
the collection's length for each iteration.

function getSelectedValueForName(name) {
var inputs = document.getElementsByTagName("input");
for (var i = 0, len = inputs.length; i < len; i++) {
if (inputs[i].type == "radio" && input[i].checked) {
return input[i].value;
}
}
return null;
}

Even better, if you use Prototype JS Library.

var checked_values = $$
('input:checked[type="radio"]').pluck('value');

-- Peroli Sivaprakasam
Jun 27 '08 #3
On Apr 22, 10:16Â*am, Peroli <per...@gmail.comwrote:
Tom Cole wrote:
On Apr 21, 12:21�pm, mad.scientist...@gmail.com wrote:
According to
� �http://www.quirksmode.org/js/forms.html
you need to look through a radio button's members to find the value:
Radio buttons
Unfortunately it's not possible to see at once which radio button in a group the user has checked. You need to go >through all radio's and see which one's checked property is true.
I tried writing a reusable function to return the value, see code at:
� �http://www.geocities.com/usenet_daug...ript_radio.htm
but for some reason I can only get a value if I hard code the control
name.
Can anyone explain how to do this?
Thanks
Does this work for you?
function getSelectedValueForName(name) {
Â* Â*for (var i = 0; i < document.getElementsByTagName("input").length; i+
+) {
Â* Â* Â* Â* Â* Â*var input = document.getElementsByTagName("input")[i];
Â* Â* Â* Â* Â* Â*if (input.type == "radio" && input.checked) {
Â* Â* Â* Â* Â* Â* Â* Â* Â* Â*return input.value;
Â* Â* Â* Â* Â* Â*}
Â* Â*}
Â* Â*return null;
}
You would call getSelectedValueForName('Radio1'); where your radio
buttons share the name Radio1.
HTH.

Tim, HTH,
Â* Â* Your solution was good, but from performance point of view, you
can do better.
Caching your "input" collection will greatly improve speed. Also, for
loops will calculate
the collection's length for each iteration.

function getSelectedValueForName(name) {
Â* Â* Â* Â* var inputs = document.getElementsByTagName("input");
Â* Â* Â* Â* for (var i = 0, len = inputs.length; i < len; i++) {
Â* Â* Â* Â* Â* Â* Â* Â* if (inputs[i].type== "radio" && input[i].checked) {
s/b if (inputs[i].type == "radio" && inputs[i].checked) {
Â* Â* Â* Â* Â* Â* Â* Â* Â* Â* Â* Â* return input[i].value;
s/b return inputs[i].value;
Â* Â* Â* Â* Â* Â* Â* Â* }
Â* Â* Â* Â* }
Â* Â* Â* Â* return null;

}
I'm not convinced that using inputs[i] three times is more efficient
than a single assignment of var input =
document.getElementsByTagName('input')[i]. Maybe someone with better
understanding of what goes on behind the scenes could elaborate. I do
see your point though of not calling .length for each iteration.
Even better, if you use Prototype JS Library.

Â* Â*var checked_values = $$
('input:checked[type="radio"]').pluck('value');

-- Peroli Sivaprakasam- Hide quoted text -

- Show quoted text -
Better for whom? Fewer lines of code in the OP's code? Maybe, but it
doesn't mean it'll perform better or be more readable code. What does
the $$ and pluck methods in Prototype look like?

Jun 27 '08 #4
Peroli wrote on 22 apr 2008 in comp.lang.javascript:
function getSelectedValueForName(name) {
var inputs = document.getElementsByTagName("input");
for (var i = 0, len = inputs.length; i < len; i++) {
if (inputs[i].type == "radio" && input[i].checked) {
return input[i].value;
}
}
return null;
}
Where is the parameter called name used?

If the inputs have a common name in a form do:

var inputs = document.forms['myForm'].elements[name];

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Jun 27 '08 #5
On Apr 22, 10:22 pm, "Evertjan." <exjxw.hannivo...@interxnl.net>
wrote:
Peroli wrote on 22 apr 2008 in comp.lang.javascript:
function getSelectedValueForName(name) {
var inputs = document.getElementsByTagName("input");
for (var i = 0, len = inputs.length; i < len; i++) {
if (inputs[i].type == "radio" && input[i].checked) {
return input[i].value;
}
}
return null;
}

Where is the parameter called name used?

If the inputs have a common name in a form do:

var inputs = document.forms['myForm'].elements[name];

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Evertjan,
I agree. I will test my code before posting from now on.

Tim,
I agree to your first point that using inputs[i] 3 times is not
efficient.
In-fact, my test results showed that its slower by 10 - 30%.
I wrote a small test script and found that $$ is indeed faster in
Firefox and Safari.
Haven't tested it in IE, but I know it will be slower, because $$
uses native xpath.
Evaluate my test script and share your suggestions. I am open to
criticism.

--- Script (uses prototype.js) ---

<html>
<head>
<title>Benchmark</title>
</head>
<body>
<form id="test_form">
<input type="button" id="getValues" value="getValues">
</form>
<span id="result" />
<script type="text/javascript" src="http://prototypejs.org/assets/
2008/1/25/prototype-1.6.0.2.js"></script>
<script type="text/javascript">
function getSelectedValueForName(name) {
for (var i = 0; i <
document.getElementsByTagName(name).length; i++) {
var input = document.getElementsByTagName(name)[i];
if (input.type == "radio" && input.checked) {
return input.value;
}
}
return null;
}

function getSelectedValueForName1(name) {
var inputs = document.getElementsByTagName(name);
for (var i = 0, len = inputs.length; i < len; i++) {
if (inputs[i].type == "radio" && inputs[i].checked) {
return inputs[i].value;
}
}
return null;
}

function getSelectedValueForName2(name) {
var inputs = document.getElementsByTagName(name);
for (var i = 0, len = inputs.length; i < len; i++) {
var input = inputs[i];
if (input.type == "radio" && input.checked) {
return input.value;
}
}
return null;
}

function getSelectedRadioValue() {
return $$('input:checked[type="radio"]').pluck('value');
}

function benchmark() {
var d = new Date();
(100).times(
function() {
var vals = getSelectedValueForName('input');
}
);
var t1 = (new Date()) - d;
d = new Date();
(100).times(
function() {
var vals = getSelectedValueForName1('input');
}
);
var t2 = (new Date()) - d;
d = new Date();
(100).times(
function() {
var vals = getSelectedValueForName2('input');
}
);
var t3 = (new Date()) - d;
d = new Date();
(100).times(
function() {
var vals = getSelectedRadioValue();
}
);
var t4 = (new Date()) - d;
$('result').update( "Tim's way:" + t1 + '<br />caching1:' + t2 +
'<br />caching2:' + t3 + '<br /$$:' + t4);
}

function init() {
var frm = $('test_form');
(1000).times(
function (count) {
frm.insert({bottom:'<input type="radio" name="radio' +
count + '" value="value' + count + '" />'});
}
);

Event.observe('getValues', 'click', benchmark);
}
Event.observe(window, 'load', init);
</script>
</body>
</html>
-- Peroli Sivaprakasam
Jun 27 '08 #6

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: ewitkop90 | last post by:
Here is my code: <SCRIPT> function transportchange(transport) { if (framenewinstall.Helpdesk.checked) framenewinstall.Helpdesk.checked=false; if (framenewinstall.CircuitNumber.checked)...
1
by: MickG | last post by:
I am trying to change the value of the variable "hard" according to which radio button is pressed and I am having no joy. Could anyone help me with this, the problematic section is marked with...
2
by: Stoic | last post by:
I'm offering a selection of three items. One is $25, the second is $50, the third is $100. Along with selection one of the items I need to pass the quantity of the selection. Here is the code now....
5
by: Samy | last post by:
Hi There, I have a label in a datagrid which I make it a input type = radio in ItemDataBound so that radio buttons are shown in the datagrid. This is how I have it... ASPX... <asp:Label...
1
by: jw01 | last post by:
Im trying to write a java script in HTML in which when a particular radio button is selected, a textbox would appear write next to the selected item. e.g (RADIO BUTTON) fhd: (RADIO BUTTON) fdj:...
2
by: jw01 | last post by:
I changed my code...Now everytime i click a radio button, a text box appears...What i want is when i hit a particular radio button, the textbox should only appear next to that radio button. And if...
2
by: newfie912 | last post by:
I have an online application used for grading students. On one of the pages, I have a table with two rows and each row has 16 cells. The upper row contains the letter grade (A, A-, B+, B, etc)...
2
by: xoinki | last post by:
hi all, I am just trying to identify which radio button is selected in JS. although the code in totality does not make any sense since this is just a sample. it is not able to identify the 's' name...
3
by: kiranbabu | last post by:
<html> <head> <h2 align=center>Blank Tapes Status Form</h2> <br><title>Blank tapes status</title> </head> <body> <br><br> <form name=tapes_status method=post>
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.