CODEWITHSUNDEEP
javascriptjqueryhtmlcssfonts
jsPlayer
jsPlayer

Reputation: 1245

Dynamically add Remove font awesome in to span?

I am trying to add font awsome dynamically based on whether the user input any data into the inputs or not. As you can see, if the user hasn't input anything I want to show the 'x' font awesome and as user finish typing I want to show the 'check' font awesome. I have tried append and other ways, none seems to work. as

I use keyup so it dynamically change if the user delete some text later

jQuery(document).ready(function () {
    
     $('.pm-text_field').keyup(function () {

        var empty = false;
        $('.pm-text_field').each(function () {
            if ($(this).val().length == 0) {
                empty = true;
            }
        });

       if (empty) {
             $("#pm-checkbox").html('<i class="fa fa-check"></i>');
        } else {
            $('#pm-checkbox').html('<i class="fa fa-times"></i>');
        }
    });
    
    });
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-6">
													<input class="pm-text_field" name="" placeholder="Practice Name" type="text" required>
												</div>
												<div class="col-sm-6">
													<input class="pm-text_field" name="" placeholder="TAX ID #" type="text" required>
												</div>
  
  <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-accordion-header-active ui-state-active ui-corner-top"
						 role="tab" id="ui-accordion-accordion-header-0" aria-controls="ui-accordion-accordion-panel-0" aria-selected="true"
						 tabindex="0"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span><a href="#">1. Practice Membership applications</a><span id="pm-checkbox" class="pull-right pm-tickmark"></span></h3>

Upvotes: 0

Views: 1932

Answers (2)

Farhad Bagherlo
Farhad Bagherlo

Reputation: 6699

$('.pm-text_field').keyup(function(){
  var empty=false;
  $('.pm-text_field').each(function(){
    empty = $(this).val().length<=0?false:true;
    if(!empty)
      return false;
   });
   empty?$('.InputSec').next().html('<i class="fa fa-check"></i>'):$('.InputSec').next().html('<i class="fa fa-close"></i>'); 
});
.InputSec{width:180px;float:left}
.InputSec + div{
    width:50px;
    float:left;
    font-size:35px;
    height:30px;}
.fa.fa-close{color:pink;}
.fa.fa-check{color:lightgreen;}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="InputSec">
  <input class="pm-text_field" placeholder="Practice Name"  type="text" ><br>
  <input class="pm-text_field" placeholder="TAX ID #" type="text" ><br>
</div>
<div><i class="fa fa-close"></i></div>

Upvotes: 1

Hamza Abdaoui
Hamza Abdaoui

Reputation: 2209

You have reversed the icons! They should be like this : 

if (empty) {
   $("#pm-checkbox").html('<i class="fa fa-times"></i>');
} else {
   $('#pm-checkbox').html('<i class="fa fa-check"></i>');
}


jQuery(document).ready(function () {
    
     $('.pm-text_field').keyup(function () {

        var empty = false;
        $('.pm-text_field').each(function () {
            if ($(this).val().length == 0) {
                empty = true;
            }
        });

       if (empty) {
             $("#pm-checkbox").html('<i class="fa fa-times"></i>');
        } else {
            $('#pm-checkbox').html('<i class="fa fa-check"></i>');
        }
    });
    
    });
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-6">
													<input class="pm-text_field" name="" placeholder="Practice Name" type="text" required>
												</div>
												<div class="col-sm-6">
													<input class="pm-text_field" name="" placeholder="TAX ID #" type="text" required>
												</div>
  
  <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-accordion-header-active ui-state-active ui-corner-top"
						 role="tab" id="ui-accordion-accordion-header-0" aria-controls="ui-accordion-accordion-panel-0" aria-selected="true"
						 tabindex="0"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span><a href="#">1. Practice Membership applications</a><span id="pm-checkbox" class="pull-right pm-tickmark"></span></h3>

Upvotes: 1

Related Questions