CODEWITHSUNDEEP
javascriptjqueryformsvalidation
Ryan
Ryan

Reputation: 15250

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

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);
});

Upvotes: 4

Views: 7759

Answers (2)

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324620

[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;

Upvotes: 4

Justin
Justin

Reputation: 27301

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);
});

Upvotes: 1

Related Questions