I was wanting to count the occurrences of input fields that has a class name of text where that text input contains a specific value.

document.getElementById('c_files').getElementsByClassName('text').length;

So far this counts all textboxes with the class name of text but how can i make it value specific, say if i have 50 textboxes but i only want to count the ones where the value of that textbox contains abc somewhere within the string.

Thanks.

Edit: Thank you everyone for your time and answers, i have voted you all up, but i prefer John Bupit's solution out of them all so thats the one i will accept. Thanks again.

I was wanting to count the occurrences of input fields that has a class name of text where that text input contains a specific value.

document.getElementById('c_files').getElementsByClassName('text').length;

So far this counts all textboxes with the class name of text but how can i make it value specific, say if i have 50 textboxes but i only want to count the ones where the value of that textbox contains abc somewhere within the string.

Thanks.

Edit: Thank you everyone for your time and answers, i have voted you all up, but i prefer John Bupit's solution out of them all so thats the one i will accept. Thanks again.

• javascript
• html
• getelementbyid
• getelementsbytagname
• getelementsbyclassname

Share Improve this question Follow edited Feb 25, 2015 at 12:15 FoxyFish asked Feb 25, 2015 at 12:00 FoxyFishFoxyFish 89211 gold badge1212 silver badges2121 bronze badges 1

• You just need to do a test. indexOf() is probably the function you'll be using... – Laurent S. Commented Feb 25, 2015 at 12:02

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

You can iterate over the elements and see which ones have the desired value:

var elems = document.getElementById('c_files').getElementsByClassName('text');

var count = 0;
for(var i = 0; i < elems.length; i++) {
    if(elems[i].value.match(/abc/)) count++;
}

You can select all textboxes first and after that filter those matching your criteria. For example, by using Array.prototype.filter method:

var allText  = document.getElementById('c_files').getElementsByClassName('text'),

    filtered = [].filter.call(allText, function(textbox) {
        return textbox.value.indexOf('abc') > -1;
    });

Above code will produce and array of text elements where value contains substring "abc".

Hi I think you need to review this SO post-

https://stackoverflow./a/9558906/3748701
https://stackoverflow./a/10095064/3748701

This is something which would help in getting your solution.

You'll need to loop over all of the text boxes with the specified class and calculate it from there.

Something like the following logic should work:

var counter = 0;
var inputElements = document.getElementById('c_files').getElementsByClassName('text').length;
for (var i = 0; i < inputElements.length; i++) {
    if (inputElements.value == "someText") {
        counter++;
    }
}

Arriving somewhat late to the party but with a more "up-to-date" solution would be to use document.evaluate to leverage the power of XPath expressions.

// utility function 
const getnodes=(expr, parent)=>{
  let results=[];
  let contextNode = parent || document;
  let query = document.evaluate(expr, contextNode, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
  for (let i = 0, length = query.snapshotLength; i < length; ++i) {
    results.push(query.snapshotItem(i));
  }
  return results;
};


// suitable XPath to navigate DOM and find elements of interest
let expr='//*[ @id="c_files" ]/input[ @class="text" ][ contains(@value,"abc") ]';
let col=getnodes(expr);

if( col.length > 0 )console.log(col);

<form id='c_files'>
  <input class='text' name='f[]' value='abcdef'><!-- this -->
  <input class='text' name='f[]' value='defghi'>
  <input class='text' name='f[]' value='hijklm'>
  <input class='text' name='f[]' value='nopqrs'>
  <input class='text' name='f[]' value='tuvwxy'>
  <input class='text' name='f[]' value='wxabcyz'><!-- this -->
  <input class='text' name='f[]' value='abcxyz'><!-- this -->
  <input class='text' name='f[]' value='defacb'>
</form>