How to select an input element by value using javascript?

Question

I\'ve seen it\'s jquery equivalent:

$(\'input[value=\"something\"]\');

But how do you select it using pure javascript (no jQuery).

Answer 1

If you want all elements by ID you can use

function getElementsById(elementID){
    var elementCollection = new Array();
    var allElements = document.getElementsByTagName("*");
    for(i = 0; i < allElements.length; i++){
        if(allElements[i].id == elementID){
            elementCollection.push(allElements[i]);
        }
    }
    return elementCollection;
}

Answer 2

var elems = [].filter.call( document.getElementsByTagName("input"), function( input ) {
    return input.value === "something";
});

http://jsfiddle.net/ts2Rr/3/

Answer 3

This might be overboard in most cases, but an alternative method would be to use document.evaluate with an XPath expression to select the input field by value:

let result = document.evaluate(
  '//input[@value="something"]',
  document,
  null,
  XPathResult.ANY_TYPE,
  null
).iterateNext();

result.value = 'someOtherValue';

Note: This method is not supported by Internet Explorer.

Otherwise, use one of the other mentioned methods for better browser compatibility and speed.

Answer 4

You can use document.querySelectorAll() on modern browsers (https://developer.mozilla.org/En/DOM/Document.querySelectorAll), e.g.

var byValue = document.querySelectorAll('input[value="something"]');

For older browsers you'll have to iterate over the inputs and check the value, e.g.

var inputs = document.getElementsByTagName("input"),
    i,
    len,
    byVal = [],
    value = "something";

for (i = 0, len = inputs.length; i < len; i++) {
    if (inputs[i].value === value) {
        byVal.push(inputs[i]);
    }
}

Answer 5

with ie6-ie7-ie8

function getInputsByValue(value)
{
    var allInputs = document.getElementsByTagName("input");
    var results = [];
    for(var x=0;x<allInputs.length;x++)
        if(allInputs[x].value == value)
            results.push(allInputs[x]);
    return results;
}

with modern browsers ie9+ (? not sure for ie9 actually) :

document.querySelectorAll("input[value=something]");

Answer 6

Something like this works:

function getCheckboxByValue(v) {
        var inputs = document.getElementsByTagName('input');
        for (var i = 0; i < inputs.length; i++) {
                if(inputs[i].type == "checkbox" && inputs[i].value == v) {
                        return inputs[i];
                }
        }
        return false;
}
(function testCheckbox() {
        getCheckboxByValue("1").checked = true;
})();

Using jQuery would be much better, though.