Using Prototype Javascript to set the value of a radio group
Not that long ago I wrote Using Prototype Javascript to get the value of a radio group, but I keep getting asked how to set the value of a radio group using prototype JS. Here are a couple ways to do just that.
$$("input[type=radio][name='radioGroupName'][value='yourDefaultValue']")[0].writeAttribute("checked", "checked");
$("someRadioGroupMember").writeAttribute("checked", "checked");Related Posts:
Aaron is the man behind the curtain here at Xavisys. He gets things done and really knows his way around the code.
Hmm… The latter was the one I wanted to use, but it didn’t work for me… I used this instead, which worked a-ok.
$(“someRadioGroupMember”).checked = true;
What version of Prototype were you using?
It didn’t work for me either
$$(“input[type=radio][name='groupname'][value='myvalue']“).writeAttribute is not a function
Prototype 1.6.0
Rob: Sorry, there was a mistake in that. there should have been a “[0]” following the $$(). Try it with the updated code.
Gosh guess I actually have to do the heavy lifting myself here. This is with Prototype 1.8.3.. Though I see no reason why this wouldn’t work with older prototype versions. Enjoy ;o)~
function $RFS(radioGroup, value) { if( curRadio = $$('input[type=radio]').detect( function isRadioGroup(group){ if(group == $(radioGroup) && group.value == value){return true;} })){ curRadio.checked = true; } }* comment edited by admin to use the `code` shortcode around the source code snippet
Thanks for the input. Do you think that’s going to be as efficient as:
$$("input[type=radio][name='radioGroupName'][value='yourDefaultValue']")[0].writeAttribute("checked", "checked");I was unable to get the multiple selects input[type=radio][name=varName] to return valid values.. Always came back empty. I am using a Prototype class in an external js file that has all the field names passed in as constructor options. When I passed name=this.options.fieldName it seemed to take it as a literal instead of a var. So that would be why I had to do a little work around here..
But you make an interesting point.. I hadn’t thought about delimiting the double quotes and just plug in my vars.. The obvious often eludes me..
$$(“‘input[type=radio][name=' " + radioGroup + " '][value=' " + value + " ']“)[0].writeAttribute(‘checked’, ‘checked’);
This also works.. But to answer your initial question.. I don’t know which version would be faster, though yours is certainly more compact. That would be something interesting to find out certainly.. but alas.. I must be moving on. Think I will use your modified solution for now
Oh well now you made me curious.. I did some basic benchmarking.
Now on my main Ubuntu machine, it was dead even. 1 millisecond execution time. Not a surprise the thing is a quad core screamer. I ran it with my Dual Core Mac Book Pro and got the follow results..
I had three sets of Option Boxes Each with two Options..
This was with my solution.
1261519984835
1261519984836
1
1261519984906
1261519984908
2
1261519984977
1261519984978
1
With the modified version of your solution..
1261519929799
1261519929800
1
1261519929868
1261519929869
1
1261519929941
1261519929942
1
So the results are in and your solution has it by 1 millisecond!
If anyone else would like to try it out..
function $RFS(radioGroup, value) {
var date1 = new Date();
var milliseconds1 = date1.getTime();
//$$(\”‘input[type=radio][name='\" + radioGroup + \"'][value='\" + value + \"']\”)[0].writeAttribute(‘checked’, ‘checked’);
if(curRadio = $$(‘input[type=radio]‘).detect( function isRadioGroup(group){
if(group.getAttribute(‘id’) == $(radioGroup).getAttribute(‘id’) && group.value == value){ return true;}
})){ curRadio.checked = true; }
var date2 = new Date();
var milliseconds2 = date2.getTime();
var difference = milliseconds2 – milliseconds1;
console.log(milliseconds1);
console.log(milliseconds2);
console.log(difference);
}
Something else to note.. After doing more testing. I discovered that if the value is already set, it appears that the Aaron’s solution does not change the values. In this scenario the radio buttons load run the js script and set their values, GREAT! Now the user comes along and changes the values.. but users being indecisive, decides he doesn’t want to change them after all and instead clicks cancel. This will then reset those radio buttons by running the same bit of code, and restoring cached values of the original state. I have discovered that my solution will actually reset those values.
Ooops Small gaff.. This is the correct function.. My Bad..
function $RFS(radioGroup, value) {
if(curRadio = $$(‘input[type=radio]‘).detect( function isRadioGroup(group){
if(group.getAttribute(‘id’) == $(radioGroup).getAttribute(‘id’) && group.value == value){ return true;}
})){ curRadio.checked = true; }
}