Adding a class to an element can be easily achieved when both input fields have values

Question

Adding a class to an element can be easily achieved when both input fields have values

Is it possible to apply the "active" class to the element go_back_right only when both inputs with classes search_box_name and search_box_id have content in them? I've tried looking for solutions on this platform, but being new to JavaScript, I couldn't find a suitable answer. Any assistance would be greatly appreciated.

.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>

javascript html jquery css

Answer 1

Answer №1

Here is a jQuery code snippet that demonstrates setting an event for adding or removing a 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');
        }
    });
}

Answer 2

Here is a jQuery code snippet that demonstrates setting an event for adding or removing a 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');
        }
    });
}

Answer 3

Answer №2

It appears that you are looking to assign an additional class to the element identified by the class .go_back_right. If that is the case, you can include the following in 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()

For more information, you can refer to this, this, and this. Additionally, please note that having multiple elements with the same id like the search_bar id on both your inputs is not recommended.

Answer 4

It appears that you are looking to assign an additional class to the element identified by the class .go_back_right. If that is the case, you can include the following in 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()

For more information, you can refer to this, this, and this. Additionally, please note that having multiple elements with the same id like the search_bar id on both your inputs is not recommended.

Answer 5

Answer №3

function checkInputs() {
  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);
  }
}
checkInputs();

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

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

Answer 6

function checkInputs() {
  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);
  }
}
checkInputs();

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

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

Adding a class to an element can be easily achieved when both input fields have values

Answer №1

Answer №2

Answer №3

Similar questions

Chrome users may encounter difficulty grabbing the horizontal textarea scrollbar if a border-radius has been applied

What could be causing the error with firebase Sign In in next.js?

A guide on showcasing nested arrays data in an Angular application

Express.js response.json method can be used to render both HTML and JSON content in the

Failed deployment of a Node.js and Express app with TypeScript on Vercel due to errors

Error: Call stack size limit reached in Template Literal Type

Unexpected results: jQuery getJSON function failing to deliver a response

Challenge with uploading Minio presigned URLs

Best way to eliminate empty options from dropdown and ensure that required validation is functioning in AngularJS?

Unable to retrieve the desired information from the jQuery AJAX request

Unable to retrieve JSON data from php script, but able to successfully retrieve it from file.json

Creating a Bottom-Up Menu in React Native: A Step-By-Step Guide

Calling @Url.Action multiple times does not consistently return the same results

Incapable of composing text using the MUI SearchBar

Transforming global CSS into CSS modules: A step-by-step guide

Experiencing a WEB3js error in a Vite, React, TypeScript application: Troubleshooting TypeError with callbackify function absence

Designing Checkboxes and Radio Buttons

Having trouble getting ng-click to function properly in TypeScript

ExpressJS does not support the 'Save' function

What steps should I follow to obtain the return value after invoking these functions?