CODEWITHSUNDEEP
javascript
Nima Parsi
Nima Parsi

Reputation: 2110

Select same name radio buttons in javascript

I need to add 2 radio inputs into one variable in JavaScript. The below code only recognizes the first input which is document.forms["myForm"]["satisfied"][0]. onclick should trigger by either radio buttons selection. I could duplicate the code into 2 variables and 2 onclick events but that wouldn't be ideal. Any ideas will be appreciated!

Please note that I can't use getElemntbyId or getElementbyTagName in my case due to limitation of access to the html in my project so I only can trigger by name tag.

var inputs = document.forms["myForm"]["satisfied"][0] || document.forms["myForm"]["satisfied"][1];

inputs.onclick = function() {
    document.forms["myForm"]["check"].disabled= false;
}

Upvotes: 2

Views: 851

Answers (2)

Tushar
Tushar

Reputation: 87203

Use document.querySelectorAll() to select elements with attribute-value selector.

var radios = document.querySelectorAll('input[name="satisfied]');

// Iterate over them and bind event
for (var i = 0, len = radios.length; i < len; i++) {
    radios[i].addEventListener('change', function() {
        document.querySelector('input[name="check"]').disabled = false;
    }, false);
}

Demo

Upvotes: 2

David Thomas
David Thomas

Reputation: 253308

I'd suggest:

// retrieving all elements with the name of 'satisfied':
var inputs = document.getElementsByName('satisfied');

// defining a function so that multiple elements can
// be assigned the same function:
function enable () {

    // iterating over the inputs collection:
    for (var i = 0, len = inputs.length; i<len; i++) {
        // updating the 'disabled' property to false,
        // thus enabling the inputs:
        inputs[i].disabled = false;
    }
}

// iterating over the inputs collection:
for (var i = 0, len = inputs.length; i<len; i++) {
    // binding the enable() function as the
    // event-handler for the click event:
    inputs[i].addEventListener('click', enable);
}

The first option, above, is fairly primitive; updated for contemporary browsers the following is possible:

function enable() {
    // using Array.from() to convert the collection returned by
    // document.getElementsByName() into an array; over which we
    // iterate using Array.prototype.forEach().

    // 'this' is supplied from EventTarget.addEventListener();
    // and allows us to retrieve the name, and the associated
    // 'group' of elements for the specific input; meaning this
    // same function can be bound to multiple 'groups' of elements
    // without interfering with the other 'groups':
    Array.from( document.getElementsByName( this.name ).forEach(function (el) {
        // el: the current element in the Array over which
        // we're iterating.

        // updating the 'disabled' property to false:
        el.disabled = false;
    });
}

// as above, except we supply the 'name' explicitly:
Array.from( document.getElementsByName('satisfied') ).forEach(function (el) {
    // binding the enable() function as the event-handler
    // for the click event:
    el.addEventListener('click', enable);
});

Upvotes: 1

Related Questions