How to count text fields that are not empty with JQuery?
How to count text fields that are not empty with JQuery?
How to count text fields that are not empty with JQuery?
Here's how I thought:
var cnt = 0;
$.each($("input[name=items]"), function(i)
if($(this).val() != "")
cnt++;
);
If I use this codes, I have to write each function unconditionally. This is a waste of somehow, but is there any other way? Or is this the best way?
@AnkitAgarwal No. I just wanted to know if there is another way besides the above code
– eastglow
Sep 12 '18 at 6:53
@undefined Sorry. I got a typo in the code and fixed it!
– eastglow
Sep 12 '18 at 6:55
4 Answers
4
There's no selector to retrieve empty input elements, so the only way to achieve what you require is through a loop. You can use an implicit loop, though, by using filter() instead of each(), like this:
input
filter()
each()
var cnt = $('input[name="items"]').filter(function()
return this.value.trim() == '';
).length;
Thanks for your answer. I was wondering if there was a way to select an empty text field without just writing a loop statement.
– eastglow
Sep 12 '18 at 6:56
As I mentioned in the answer, you'll need a loop. An implicit loop such as this is the most succinct logic you're going to get.
– Rory McCrossan
Sep 12 '18 at 6:58
@RohitSharma that answer is in no way relevant to this problem
– Rory McCrossan
Sep 12 '18 at 6:59
I just wondered if there was another way. It's okay to use a loop statement. Thanks again for the answer.
– eastglow
Sep 12 '18 at 7:01
Length can be get by a query selector
$('input[name="items"][value=""]').length
This is assuming that the
value hasn't been changed by the user since the page was loaded. Given this seems to be for form validation, then that's a little redundant.– Rory McCrossan
Sep 12 '18 at 7:00
value
Unfortunately this method does not work...
– eastglow
Sep 12 '18 at 7:03
You can use just a CSS selector for that:
$('input[name=items][value=""], input[name=items]:not([value=""])').length
I have combined two selectors together cause if the element doesn't contain the value attribute at all you will get the result 0 and for such cases need input[name=items]:not([value=""])
value
input[name=items]:not([value=""])
Another method that doesn't require constructing an intermediate array nor a jQuery collection is with reduce:
reduce
const count = Array.prototype.reduce.call(
$("input[name=items]"),
(a, input) => $(input).val() === '' ? a + 1 : a,
0
);
console.log(count);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="items">
<input name="items">
<input name="items" value="foobar">
<input name="items">
You don't need jQuery for this though, since all you really need is to select the matching elements, which you can do with querySelectorAll:
querySelectorAll
const count = Array.prototype.reduce.call(
document.querySelectorAll("input[name=items]"),
(a, input) => input.value === '' ? a + 1 : a,
0
);
console.log(count);
<input name="items">
<input name="items">
<input name="items" value="foobar">
<input name="items">
I am developing back-end only, so the jquery syntax is somewhat unfamiliar. I appreciate your answer and I'll check it out a bit more.
– eastglow
Sep 12 '18 at 7:05
See edit, there's absolutely no need for jQuery here if you don't feel comfortable with it
– CertainPerformance
Sep 12 '18 at 7:07
Thanks for contributing an answer to Stack Overflow!
But avoid …
To learn more, see our tips on writing great answers.
Required, but never shown
Required, but never shown
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Why do you think the existing code is bad?
– Ankit Agarwal
Sep 12 '18 at 6:46