如何计算页面上值的输入总数？

Question

I'm hoping for a super simple validation script that matches total inputs on a form to total inputs with values on a form. Can you help explain why the following doesn't work, and suggest a working solution?

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

Fill out one or more of the inputs and click "submit". I want to see the number of filled out inputs as the result. 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 to the value property .

The property is updated as you type, the attribute stays the same. This means you can do elem.value = elem.getAttribute("value") to "reset" a form element, by the way.

Personally, I'd do something like this:

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

Answer 2

Try this: 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);
});