Count input type text fields with javascript

Question

I have a form with a lot of text fields and hidden input fields. Now I am trying to count those input fields of type text, but I can't get it to work.

I am using the following code:


    var subtagid = document.getElementById('subtags').getElementsByTagName('input').getAttribute("text").length;
var inputs = document.getElementById('subtags').getElementsByTagName('input').length;
for(var i=0; i<inputs.length; i++)
{
    if(inputs[i].getAttribute(‘type’)==‘text’)
    {
        subtagid++;
    }
}

Does anyone know how I can do this?

You should definitely not use weird quotes in code. And you only need var the first time. — user5734311
– user5734311, Commented Jan 30, 2020 at 21:58
You're looking for .getAttribute("text") instead of type but even that won't work since you're chaining that to a method that returns a list. Additionally, you're retrieving the length on inputs too soon, so you can't iterate over inputs[i]. Make it simple! document.querySelectorAll('input[type="text"]').length; (you can replace document with an ID selector if needed). — chriskirknielsen
– chriskirknielsen, Commented Jan 30, 2020 at 22:20

Mat Sz · Accepted Answer · 2020-01-30 21:57:57Z

2

You should be able to count all the text elements by using querySelectorAll.

const count = document.querySelectorAll('#subtags input[type=text]').length;

Iterating over the elements is also possible.

for (let input of document.querySelectorAll('#subtags input[type=text]')) {
    // Do something with the input.
}

You can use any other valid CSS selector as well.

answered Jan 30, 2020 at 21:57

Mat Sz

2,5521 gold badge12 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Max de Boer Over a year ago

would this count all the fields in the whole document or just in one form?

Mat Sz Over a year ago

This will count all the text input fields inside of an element with the ID of "subtags".

zfrisch · Accepted Answer · 2020-01-30 22:12:45Z

1

You can't do this with a querySelectorAll because the default type of input is text. In order to get the correct number you have to check type of the inputs and either filter and get the length or iterate and add to subtagid:

text_inputs = inputs.forEach(input => input.type === "text" && subtagid++);

    var subtagid = 0,
    
    parent = document.querySelector("#subtags"),
    inputs = Array.from(parent.querySelectorAll("input")),
    text_inputs = inputs.forEach(input => input.type === "text" && subtagid++);

console.dir(subtagid);

<section id="subtags">
<input type="checkbox">
<input type="text">

<input type="button">
<input type ="text">
<input type="text">
<input>
</section>
<hr/>

<small> there are <strong>4</strong> Text Boxes </small>
<hr/>

<output>

</output>

answered Jan 30, 2020 at 22:12

zfrisch

8,6901 gold badge26 silver badges39 bronze badges

3 Comments

zfrisch Over a year ago

@Addis uh. it's not wrong because that's literally what I said in my answer.

zfrisch Over a year ago

@Addis I don't mean to sound hostile here, but I believe you're wrong. The default input without a type defined in markup I believe isn't grabbed by a selector. Feel free to try it.

Addis Over a year ago

You made much sense now, though I don't think that's what the OP intended to do. Sorry for the misunderstanding, anyway.

Collectives™ on Stack Overflow

Count input type text fields with javascript

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related