CODEWITHSUNDEEP
javascripthtml
Pieter888
Pieter888

Reputation: 4992

How to select an input element by value using javascript?

I've seen it's jquery equivalent:

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

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

Thanks for all the responses so far but I'm sure if it is working correctly, I need to change the value of the input into something else. I though I could do this by

<enter snippet to select element here>.value = "someOtherValue";

But it appears to be not that easy. Any ideas.

Upvotes: 48

Views: 161584

Answers (8)

SC_Adams
SC_Adams

Reputation: 156

I found that if you need the name or ID this will work:

${RegRowFullName}= Get Element Attribute xpath=//input[@value="Dragon"] name

Upvotes: 0

Erik &#214;sterling
Erik &#214;sterling

Reputation: 27

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;
}

Upvotes: -1

Grant Miller
Grant Miller

Reputation: 28989

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.

Upvotes: 0

Esailija
Esailija

Reputation: 140210

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

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

Upvotes: 3

jabclab
jabclab

Reputation: 15042

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]);
    }
}

Upvotes: 19

user652649
user652649

Reputation:

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]");

Upvotes: 51

JamesHalsall
JamesHalsall

Reputation: 13475

Something like this should work...

for(i in document.getElementsByTagName('input')) {
   if(i.value == 'desiredValue') {
      return i;
   }
}

Edit: This will return an array of all matches

var matches = [];
for(i in document.getElementsByTagName('input')) {
   if(i.value == 'desiredValue') {
      matches.push(i);
   }
}

Upvotes: 0

Chris
Chris

Reputation: 3795

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.

Upvotes: 4

Related Questions