How to add class to an element when both inputs have value

Question

I want to add a class active to the element go_back_right when both inputs with classes search_box_name and search_box_id have any value. I have tried referencing to the answers that are already on this platform, but I had no luck, as I'm new to js. Any help?

.go_back_right:active {
  background-color: rgba(255, 0, 0, 0.05);
  animation: status 4s ease forwards;
}

<div class="search_box_container">
  <input class="search_box_name" id="search_bar username" for="username" name="username" type="text">
  <input class="search_box_id" id="search_bar roomNamehtml" name="room" type="text">
</div>

[`:active`](https://developer.mozilla.org/en-US/docs/Web/CSS/:active) isn't a class. You *probably* just want `.active` and `$(".go_back_right").addClass("active")` — freedomn-m, Apr 02 '21 at 15:39
@freedomn-m How about the condition to check if there are values inside? — m4n0, Apr 02 '21 at 15:41

Fakt309 · Answer 1 · 2021-04-02T16:10:14.243

0

function setClass() {
  if (document.querySelector(".search_box_name").value != "" && document.querySelector(".search_box_id").value != "") {
    document.querySelector(".go_back_right").setActive();
  } else {
    document.querySelector(".go_back_right").setActive(false);
  }
}
setClass();

.go_back_right:active {
  background-color: rgba(255, 0, 0, 0.05);
  animation: status 4s ease forwards;
}

<div class="search_box_container">
  <input oninput="setClass()" class="search_box_name" id="search_bar username" for="username" name="username" type="text">
  <input oninput="setClass()" class="search_box_id" id="search_bar roomNamehtml" name="room" type="text">
</div>

edited Apr 02 '21 at 16:10

answered Apr 02 '21 at 15:40

Fakt309

821
5
14

Your css `:active` doesn't match class `.active`. Your snippet gives `Uncaught TypeError: Cannot read property 'setAttribute' of null`. – freedomn-m Apr 02 '21 at 15:46
Works, however, I want changes to appear as soon as value is put in. Without having to click somewhere on the screen. – Denis Kviatkovskij Apr 02 '21 at 15:57
ive changed `onchange` on `oninput` – Fakt309 Apr 02 '21 at 16:10

score 0 · Accepted Answer · answered Apr 02 '21 at 15:51

0

Below is jQuery snippet to set an event for adding/removing class

$(document).ready(function () {
    setEvents();
    $('.search_box_container').trigger('change');
});
function setEvents() {
    $('.search_box_container').on('change', function () {
        var $this = $(this),
            search_box_name = $this.find('.search_box_name').val().trim(),
            search_box_id = $this.find('.search_box_id').val().trim();
        if (search_box_name && search_box_id) {
            $('.go_back_right').addClass('active');
        } else {
            $('.go_back_right').removeClass('active');
        }
    });
}

answered Apr 02 '21 at 15:51

Wazeed

1,230
1
8
9

It works, however, I have to click somewhere on the screen to make it work. Any way to make it work as soon as both inputs get value? – Denis Kviatkovskij Apr 02 '21 at 15:56
@DenisKviatkovskij Update `.on('change')` event to `.on('keyup')`, and `trigger('change')` to `trigger('keyup')`. It would work immediately – Wazeed Apr 02 '21 at 16:00
Works perfectly! Thank you – Denis Kviatkovskij Apr 02 '21 at 16:03

mj balcueva · Answer 3 · 2021-04-02T16:02:29.473

I think you want to add an additional class to the element with the class .go_back_right right? If so, add this to your JS file:

const searchBoxName = document.getElementByClassName('search_box_name');
const searchBoxId = document.getElementByClassName('search_box_id');
const goBackRight = document.getElementByClassName('.go_back_right');

const addClass = () => {
  if (searchBoxName && searchBoxName.value && searchBoxId && searchBoxId.value) {
    goBackRight.classList.add('active');
  }
}

addClass()

Read this, this and this for more info and btw, you can't have two or more elements having the same id like that search_bar id you have on both your inputs.

How to add class to an element when both inputs have value

3 Answers3