As per the WHATWG someForm.elements
should return a HTMLFormElementsCollection
.
A HTMLFormElementsCollection
returns a RadioNodeList
if multiple elements share the same name.
The RadioNodeList
has special value
semantics where it returns the value of the first checked radio list in the nodelist.
This would allow the following answer to work if it were implemented
I naively attempted a polyfill that is based on host objects being well behaved (as per WebIDL), which they are clearly not.
What is an alternative efficient implementation for this polyfill whilst we wait for browsers to become either RadioNodeList or WebIDL compliant?
<form name="myform">
<input type="radio" name="foo" value="10" /> foo
<input type="radio" name="foo" value="30" /> bar
</form>
var myform = document.forms.myform;
var radio = myform.elements.foo;
var price = radio.value;
(function () {
var pd = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements"),
getElements = pd.get;
pd.get = get;
Object.defineProperty(HTMLFormElement.prototype, "elements", pd);
function get() {
var elements = getElements.call(this);
if (elements.length) {
Object.defineProperty(elements, "value", {
get: getRadioNodeListValue,
set: setRadioNodeListValue,
configurable: true
});
}
return elements;
}
function getRadioNodeListValue() {
for (var i = 0, len = this.length; i < len; i++) {
var el = this[i];
if (el.checked) {
return el.value;
}
}
}
function setRadioNodeListValue(value) {
for (var i = 0, len = this.length; i < len; i++) {
var el = this[i];
if (el.checked) {
el.value = value;
return;
}
}
}
}());
If you can accept bolting the value
getter onto NodeList
then the following should work
Credit to @@Esailija
you could also just add .value to NodeList prototype