CODEWITHSUNDEEP
javascriptjquery
aynaz
aynaz

Reputation: 167

Check if input value was empty change text

I wrote the below code for changing the text of div that called active yes, based on value of each input with type hidden. i want to change the text of this div if input with id enable to "Enable List" and if input with classname delete has value changes the div text to "Deleted list" and if both of them was null show "list". my code does not work correctly. what is my problem? here is my snippet :

 $(document).ready(function() {
   tmpval = $('#enable').val();
   if (tmpval == '') {
     $('.activeyes').text('list');
   } else {
     $('.activeyes').text('Enable List');
   }  
      
   tmpval2 = $('#delete').val();
   if (tmpval2 == '') {
     $('.activeyes').text('List');
   } else {
	 $('.activeyes').text('Deleted List');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input type="text" value="aa" id="enable" />
<input type="text" value="" id="delete" />
<h1 class="activeyes"> List</h1>

Upvotes: 0

Views: 3926

Answers (2)

dev8080
dev8080

Reputation: 4020

You are overwriting effect of the first check by the second check; you need to check the 2 inputs value together. Still, it is unclear what will happen if both are non-empty.

$(document).ready(function() {
  tmpval = $('#enable').val();
  tmpval2 = $('#delete').val();
  if (tmpval == '' && tmpval2 == '') {
    $('.activeyes').text('list');
  } else if( tmpval!='' ){
    $('.activeyes').text('Enable List');
  } else if( tmpval2!='' ){
    $('.activeyes').text('Deleted List');
  }  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input type="text" value="aa" id="enable" />
<input type="text" value="" id="delete" />
<h1 class="activeyes"> List</h1>

Upvotes: 3

gurvinder372
gurvinder372

Reputation: 68393

what is my problem?

You need to check the value of input when it changes its value, so capture the change event.

$(document).ready(function() {

  $('#enable, #delete').change(function() {
    var $this = $(this);
    var id = $this.attr("id");
    var value = $this.val();
    if (value.length == 0) 
    {
      $('.activeyes').text('list');
    } 
    else 
    {
      id == "enable" ? $('.activeyes').text('Enable List') : $('.activeyes').text('Deleted List');
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input type="text" value="aa" id="enable" />
<input type="text" value="" id="delete" />
<h1 class="activeyes"> List</h1>

Upvotes: 1

Related Questions