check if empty input add class to a div else remove class

Question

I have a input with type hidden and two divs. How can I change the div to display based on value of input with type hidden? i want to set display none to the div with class activeno if input does not value. and if input has value i want to set display none to div that called activeyes and show the div with classname activeno . i wrote the below code for add and remove the class but it does not work . here is my snippet :

$( document ).ready(function() {
    tmpval = $('#inputi').val();
    if(tmpval == '') {
      $('.activeyes').addClass('activeyes2');
    } else {
      $('activeno').addClass('activeno2');
    }
});

.mysite h1{ display:block;}
.activeyes{ display:none !important;}
.activeyes2{ display:block !important;}
.activeno{display:none !important;}
.activeno2{display:block !important;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input type="hidden" value="[##cms.query.enable##]" id="inputi"/>
<div class="mysite"> 
  <h1 class="activeyes"> Yes active </h1>
  <h1 class="activeno"> No not active </h1>
</div>

You have applied default display none to both the <h1> tags/ — Himanshu Upadhyay
– Himanshu Upadhyay, Commented Sep 24, 2017 at 9:13

Milan Chheda · Accepted Answer · 2017-09-24 09:21:20Z

1

You are adding the class to change display but not removing the class already present. Note that use of !important is generally not advisable. You can just use .show() and .hide() to show or hide elements in jquery. while you show one hide the other one.

$(document).ready(function() {

  tmpval = $('#inputi').val();
  if (tmpval == '') {
    $('.activeyes').show();
    $('.activeno').hide();
  } else {
    $('.activeno').show();
    $('.activeyes').hide();
  }
});

.mysite h1 {
  display: block;
}

.activeyes {
  display: none;
}

.activeyes2 {
  display: block;
}

.activeno {
  display: none;
}

.activeno2 {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input type="text" value="[##cms.query.enable##]" id="inputi" />
<div class="mysite">
  <h1 class="activeyes"> Yes active </h1>
  <h1 class="activeno"> No not active </h1>
</div>

edited Sep 24, 2017 at 9:21

Milan Chheda

8,2593 gold badges23 silver badges35 bronze badges

answered Sep 24, 2017 at 9:14

Dij

9,8184 gold badges21 silver badges35 bronze badges

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

1 Comment

aynaz Over a year ago

Thank you so much !

Collectives™ on Stack Overflow

check if empty input add class to a div else remove class

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related