How can I calculate the total number of inputs with values ​​per page?

Question

I hope for a super-simple script check that matches the summary inputs of the form for shared inputs with values ​​in the form. Can you explain why the following does not work, and suggest a working solution?

Fiddle: http://jsfiddle.net/d7DDu/

Fill in one or more entries and click send. As a result, I want to see the number of filled entries. So far it only shows 0 .

HTML:

 <input type="text" name="one"> <input type="text" name="two"> <input type="text" name="three"> <textarea name="four"></textarea> <button id="btn-submit">Submit</button> <div id="count"></div> 

JS:

 $('#btn-submit').bind('click', function() { var filledInputs = $(':input[value]').length; $('#count').html(filledInputs); }); 

Answer 1

[value] refers to the value attribute, which is very different from the value property.

The property is updated as you type, the attribute remains unchanged. This means that you can do elem.value = elem.getAttribute("value") in the "reset" form element, by the way.

Personally, I would do something like this:

 var filledInputs = $(':input').filter(function() {return !!this.value;}).length; 

Answer 2

Try the following: http://jsfiddle.net/justincook/d7DDu/1/

 $('#btn-submit').bind('click', function() { var x = 0; $(':input').each(function(){ if(this.value.length > 0){ x++; }; }); $('#count').html(x); });