Here is a quick tutorial that shows how to read the selected value or selected index from a group of radio buttons using JavaScript.
I present the sample within the DeveloperCaster namespace (like all the samples in this blog); however, I decided to create a sub namespace for Forms so we will access these functions by calling DeveloperCaster.Forms.
var DeveloperCaster = {
Forms: {
}
}
Finding the selected index
The function goes straight to the point. We check if it is a valid object otherwise we return -1; then, we loop through every object in the collection until we find the checked item to return the index (-1 will be returned if no item is checked).
RadioSelectedIndex: function (id) {
if (typeof ($(id).length) != 'undefined') {
var index = -1;
var _obj = $(id);
for (var i = 0; i < _obj.length; i++) {
if (_obj[i].checked) {
index = i;
break;
}
}
return index;
}
return -1;
}
Finding the selected value
This function simply utilizes our previous function; so, we check if the selected index is not equal to -1 and then return the selected index value.
RadioSelectedValue: function (id) {
var index = DeveloperCaster.Forms.RadioSelectedIndex(id);
if (index != -1) {
return $(id)[index].value;
}
return "";
}
Here is the complete set of functions:
var DeveloperCaster = {
Forms: {
RadioSelectedIndex: function (id) {
if (typeof ($(id).length) != 'undefined') {
var index = -1;
var _obj = $(id);
for (var i = 0; i < _obj.length; i++) {
if (_obj[i].checked) {
index = i;
break;
}
}
return index;
}
return -1;
},
RadioSelectedValue: function (id) {
var index = DeveloperCaster.Forms.RadioSelectedIndex(id);
if (index != -1) {
return $(id)[index].value;
}
return "";
}
}
}
Usage
Note: Tutorial for the AddEvent function can be found here.
Compress this code here: http://www.jscompressor.com/
Usage
Note: Tutorial for the AddEvent function can be found here.
<html>
<head>
<script language=”javascript”>
window.onload = function () {
DeveloperCaster.AddEvent('btnValue', 'click', function () {
alert(DeveloperCaster.Forms.RadioSelectedValue('group1'));
});
DeveloperCaster.AddEvent('btnIndex', 'click', function () {
alert(DeveloperCaster.Forms.RadioSelectedIndex('group1'));
});
}
</script>
</head>
<body>
<input type="radio" name="group1" value="One"> One<br>
<input type="radio" name="group1" value="Two" checked>Two<br>
<input type="radio" name="group1" value="Three"> Three
<br />
<input type="button" name="btnValue" value="Selected Value" />
<input type="button" name="btnIndex" value="Selected Index" />
</body>
</html>
Compress this code here: http://www.jscompressor.com/
No comments:
Post a Comment