CODEWITHSUNDEEP
javascriptjquery
aynaz
aynaz

Reputation: 167

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

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>

Upvotes: 0

Views: 581

Answers (1)

Dij
Dij

Reputation: 9808

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>

Upvotes: 1

Related Questions