jquery check multiple inputs for value

Question

<form class=".form" action="">
  <input type="text" class="inputs"><br>
  <input type="text" class="inputs"><br>
</form>
<button>Check</button>


$("button").on("click", function () {
  if($(".inputs").val()) {
    $("body").css("background-color", "yellow");
  } else {
    $("body").css("background-color", "red");
  }
});

As you may see, I want to check for a value in inputs and based on that select a color for a body. The problem is, it checks only the first element among all of them.

You can try to enter a value in the second input and leave the first one empty and see this.

I want to check all of the inputs for a value with AND condition, how do I do this?

Thanks

What happens if someone enters values in both?

j08691
– j08691

2018-04-23 17:14:23 +00:00
Commented Apr 23, 2018 at 17:14 — j08691
– j08691, Commented Apr 23, 2018 at 17:14
the background should change to yellow :)

loripagojo
– loripagojo

2018-04-23 17:16:27 +00:00
Commented Apr 23, 2018 at 17:16 — loripagojo
– loripagojo, Commented Apr 23, 2018 at 17:16

Taplar · Accepted Answer · 2018-04-23 17:22:14Z

3

var $inputs = $('.inputs');
//logical OR, if any have a value
$inputs.filter(function(){ return this.value.trim(); }).length
//logical AND, if none of them do not have a value
$inputs.filter(function(){ return !this.value.trim(); }).length < 1
//logical AND, with just nots (!)
!$inputs.filter(function(){ return !this.value.trim(); }).length

This will return inputs that have a non blank value. A length of > 0 being truthy.

edited Apr 23, 2018 at 17:22

answered Apr 23, 2018 at 17:14

Taplar

25k4 gold badges24 silver badges36 bronze badges

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

1 Comment

loripagojo Over a year ago

This is awesome, to be honest. Even tho it doesn't really solve my problem(based on the above condition it would present OR instead of AND logic)

Collectives™ on Stack Overflow

jquery check multiple inputs for value

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related