why jQuery functions don't work together?

Question

I'm new to jQuery, my functions adds class active to buttons when different inputs have value. However, only one function out of two works at once. Both functions work just fine separately. Maybe I am missing something? I writing these functions directly on html file without document.ready , but it didn't solve the issue. Is there a way to make both of these functions work at the same time?

 $(document).ready(function() { setEvents(); $('.search_box_container').trigger('keyup'); }); function setEvents() { $('.search_box_container').on('keyup', 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'); } }); }; $(document).ready(function() { setEvents(); $('.didesnis_input').trigger('keyup'); }); function setEvents() { $('.didesnis_input').on('keyup', function() { var $this = $(this), search_box = $this.find('.search_box').val().trim(); if (search_box) { $('.go_back_right_create').addClass('active'); } else { $('.go_back_right_create').removeClass('active'); } }); }

 .go_back_right.active { background-color: rgba(255, 255, 255, 0.05); animation: fadeIn ease 10s; -webkit-animation: fadeIn ease 2s; }.go_back_right_create.active { background-color: red; animation: fadeIn ease 10s; -webkit-animation: fadeIn ease 2s; }

 <form action="room.html"> <div class="search_box_container"> <input class="search_box_name" id="username" for="username" name="username" type="text"> <input class="search_box_id" id="roomNamehtml" name="room" type="text"> </div> <button class="go_back_right" type="submit" onclick="joinRoom()"> </button> </form> <form action="room.html"> <div class="didesnis_input"> <input class="search_box" id="search_bar username" name="username" type="text"> </div> <select hidden name="room" id="room"> </select> <button class="go_back_right_create" type="submit" onclick="createRoom()"> </button> </form>

Answer 1

Maybe you can give different names to functions since the second one overrides the first one?

Always define the functions before you use them if you don't use a bundler.

Also, you don't need to define document.ready multiple times.

function setEventsForInput() {
  $('.didesnis_input').on('keyup', function() {
    var $this = $(this),
      search_box = $this.find('.search_box').val().trim();
    if (search_box) {
      $('.go_back_right_create').addClass('active');
    } else {
      $('.go_back_right_create').removeClass('active');
    }
  });
}

function setEventsForBoxContainer() {
  $('.search_box_container').on('keyup', 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');
    }
  });
};


$(document).ready(function() {
  setEventsForInput();
  setEventsForBoxContainer();
});

Answer 2

You need to have unique names for your functions. Otherwise one function definition is redefining (replacing) the other. In this case you have two functions named setEvents . I have renamed these setEvents1 and setEvents2 :

 $(document).ready(function() { setEvents1(); $('.search_box_container').trigger('keyup'); }); function setEvents1() { $('.search_box_container').on('keyup', 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'); } }); }; $(document).ready(function() { setEvents2(); $('.didesnis_input').trigger('keyup'); }); function setEvents2() { $('.didesnis_input').on('keyup', function() { var $this = $(this), search_box = $this.find('.search_box').val().trim(); if (search_box) { $('.go_back_right_create').addClass('active'); } else { $('.go_back_right_create').removeClass('active'); } }); }

 .go_back_right.active { background-color: rgba(255, 255, 255, 0.05); animation: fadeIn ease 10s; -webkit-animation: fadeIn ease 2s; }.go_back_right_create.active { background-color: red; animation: fadeIn ease 10s; -webkit-animation: fadeIn ease 2s; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form action="room.html"> <div class="search_box_container"> <input class="search_box_name" id="username" for="username" name="username" type="text"> <input class="search_box_id" id="roomNamehtml" name="room" type="text"> </div> <button class="go_back_right" type="submit" onclick="joinRoom()"> </button> </form> <form action="room.html"> <div class="didesnis_input"> <input class="search_box" id="search_bar username" name="username" type="text"> </div> <select hidden name="room" id="room"> </select> <button class="go_back_right_create" type="submit" onclick="createRoom()"> </button> </form>

Answer 3

Not an major issue, just keep different names for the functions.