jQuery multiple conditional statements

Question

I have this code:

    $('#inputID').on('keyup', function () {
      if ($('#inputID').val() == '') {
          $(".button").removeClass('uk-button-success');
      } else {
          $(".button").addClass('uk-button-success');
      }
    })

It requires a single input to be filled, so a specific button gets a class added. Now I want multiple inputs to be checked and if all of them are filled and not empty, I want to add the class "uk-button-success" to a button.

 if ($('#inputID', '#inputID2').val() == '')

and other stuff I've tried didn't work.

How do I do this?

You might try to use a logical OR operator: if ($('#inputID').val() == '' || $('#inputID2').val() == '' || ...) { /* some of them is empty */} else {/* all are filled */} — Ihor Vyspiansky
– Ihor Vyspiansky, Commented Apr 21, 2021 at 13:58
This works, nice! How do I get the multiple IDs now with the keyup function? $('#inputID1', '#inputID2').on('keyup', function () { doesn't work. — Jonas
– Jonas, Commented Apr 21, 2021 at 14:10
@Jonas Set, for ex., the same class name for all inputs. Let it be my-input. And then you may use $('.my-input').on('keyup', function () {...? — Ihor Vyspiansky
– Ihor Vyspiansky, Commented Apr 21, 2021 at 14:59
@StéphaneM As fas as I understand, it allows to check clicked input value only ($(this).val()), but not other inputs (quote: I want multiple inputs to be checked and if all of them are filled and not empty). — Ihor Vyspiansky
– Ihor Vyspiansky, Commented Apr 21, 2021 at 15:11

Stéphane M · Accepted Answer · 2021-04-22 12:54:37Z

Just target by class to have multiple element and then use $(this)

Eg: On a batch of input to disable (or not) submiting following all values.

$(function() {
  $('.input').on('keyup', function() {
    result = true
    $('.input').each(function() {
      if ($(this).val() === '') {
        result = false
      }
    })
    result ? $("#target").prop('disabled', false) : $("#target").prop('disabled', true);
  });
});

https://jsfiddle.net/g84p5b6v/

Your base use case

$(function() {
    $('.input').on('click', function () {
      if ($(this).val() === '') {
          $("#target").removeClass('success');
      } else {
          $("#target").addClass('success');
      }
    })
});

=> https://jsfiddle.net/45of2nrk/

Collectives™ on Stack Overflow

jQuery multiple conditional statements

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related