javascript - How can I count the total number of inputs with values on a page? -

i'm hoping super simple validation script matches total inputs on form total inputs values on form. can explain why following doesn't work, , suggest working solution?

fiddle: http://jsfiddle.net/d7ddu/

fill out 1 or more of inputs , click "submit". want see number of filled out inputs result. far 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); }); 

[value] refers value attribute, different value property.

the property updated type, attribute stays same. means can elem.value = elem.getattribute("value") "reset" form element, way.

personally, i'd this:

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