jQuery :empty not working with input

Question

I am having a problem in using jQuery's :empty pseudo selector. Basically, it isn't working on inputs the way I think it should. Given this html, I'm trying to get a count of all the inputs which don't have values without a loop.

<div id="sampleDiv">
<label>My first Input:</label>
<input name="test" id="firstInput" type="text" value="default text" /><br/><br/>
<label>My second Input:</label>
<input name="test" id="secondInput" type="text" value="" /><br/><br/>
<label>My third Input:</label>
<input name="test" id="thirdInput" type="text" value="" />

I'm using a selector like this

$('#sampleDiv input:empty').length

but it's returning 3, including the one with the value. Here is the fiddle and thanks for any help here!: https://jsfiddle.net/chas688/b5fad3Lu/

Rory McCrossan · Accepted Answer · 2015-06-23 15:47:45Z

2

The :empty selector is designed to look through the children of an element. This is why it doesn't necessarily work for you in this instance. Instead, you can select by the value attribute:

$('#sampleDiv input[value=""]').length;

Example

Or by filter():

$('#sampleDiv input').filter(function() {
    return this.value == '';
}).length;

Example

edited Jun 23, 2015 at 15:47

answered Jun 23, 2015 at 15:44

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

8 Comments

Rory McCrossan Over a year ago

@PraveenKumar thanks - I even copied and pasted that. Not sure how I messed it up, lol.

Charles Harmon Over a year ago

Thanks, that makes a lot of sense now, it was a bit misleading on the W3c selectors reference: w3schools.com/jquery/jquery_ref_selectors.asp

Rory McCrossan Over a year ago

Note that W3Schools has nothing to do with the W3C and are a bunch of..... See w3fools.com for more info. I'd suggest never using their site.

Rory McCrossan Over a year ago

Also, glad to help :)

David Hedlund Over a year ago

W3Schools even uses $("input:not(:empty)") in their example on how to use :not. I guess they missed a not somewhere in there.

|

Praveen Kumar Purushothaman · Accepted Answer · 2015-06-23 15:44:40Z

0

The :empty stands for empty HTML and not empty values! You have to use this way:

count = 0;
$('#sampleDiv input').each(function () {
  if ($(this).val().length == 0)
    count++;
});

Or use .filter():

$('#sampleDiv input').filter(function() {
    return ($(this).val().trim().length == 0);
}).length;

answered Jun 23, 2015 at 15:44

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

Comments

breq · Accepted Answer · 2015-06-23 15:47:09Z

0

This one works for all input text. https://jsfiddle.net/b5fad3Lu/2/

var pl = $('input:text[value=""]').length;
$('#numberofEmpty').text( pl );

answered Jun 23, 2015 at 15:47

breq

25.7k26 gold badges68 silver badges111 bronze badges

Collectives™ on Stack Overflow

jQuery :empty not working with input

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related