CODEWITHSUNDEEP
javascriptjquery
Rohit Verma
Rohit Verma

Reputation: 3785

How can I change icon as per input value?

I want to change icons as per input value. If the input has a value then I want to display the fa-check icon. If the input has no value then I want to display fa-arrow-right.

I'm little bit confused between blur or keypress; which one should I use for this? If there is any other option, then please share.

$('.provide-input').keypress(function() {
    if ($(this).val().length === 0) {
        $('.fa-arrow-right').hide();
        $('.fa-check').show();
    } else {
        $('.fa-check').hide();
        $('.fa-arrow-right').show();
    }
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />

<div class="form-group">
    <i class="fa fa-arrow-right provide-icon"></i>
    <i class="fa fa-check provide-icon"></i> 
    <input type="text" class="provide-input" /> 
      this is treatment field
</div>

Upvotes: 2

Views: 2225

Answers (2)

Mamun
Mamun

Reputation: 68933

Try with input event with event delegation (on) approach. The advantage of this approach is - the event will also work for the dynamically created element (with that class) . I will also suggest you trim() the value before taking the length.

Since the initial value is empty, you can hide the arrow initially.

$('.fa-arrow-right').hide();
$(document).on('input', '.provide-input', function () {
  if ($(this).val().trim().length === 0) {
    $('.fa-arrow-right').hide();
    $('.fa-check').show();
  }
  else {
    $('.fa-check').hide();
    $('.fa-arrow-right').show();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />

<div class="form-group">
  <i class="fa fa-arrow-right provide-icon"></i><i class="fa fa-check provide-icon"></i> <input type="text" class="provide-input" />  this is treatment field  
</div>

Upvotes: 3

Rory McCrossan
Rory McCrossan

Reputation: 337560

You could make this work by using the input event instead of keypress. This way the event will also be fired for content which is added by pasting from a mouse event. You can then toggle() both the icons based on the length of the value in the field.

Note that if you have multiple checkboxes related to individual fields you would need to use DOM traversal to find only the icons related to the field which raised the event. Try this:

$('.provide-input').on('input', function() {
  var showCheck = $(this).val().trim().length !== 0;
  var $group = $(this).closest('.form-group');
  $group.find('.fa-arrow-right').toggle(!showCheck);
  $group.find('.fa-check').toggle(showCheck);
});
.fa.fa-check { 
  display: none; 
  color: #0C0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />

<div class="form-group">
  <i class="fa fa-arrow-right provide-icon"></i>
  <i class="fa fa-check provide-icon"></i> 
  <input type="text" class="provide-input" /> 
  this is treatment field 1
</div>
<div class="form-group">
  <i class="fa fa-arrow-right provide-icon"></i>
  <i class="fa fa-check provide-icon"></i> 
  <input type="text" class="provide-input" /> 
  this is treatment field 2
</div>

Upvotes: 2

Related Questions