Jquery return empty/null if value is nan

user_14475320 0
Viewed 671

i have a form,if user keyin number, the output will be in decimal (this work). and what i want is, if user didn't key in the value in field A, and go to field B by using Tab button, the field A still in blank instead of NAN. or if user keyin in field A/B then delete it, the value in that field will be blank instead return 0/NAN. please help me

$('.Currency').keyup(function(){

  // value is either the inputed numbers or 0 if none
  let val = parseFloat($(this).val());
  if (isNaN(val)) {
       $(this).val('');
   }
 
});
$('input.Currency').on('blur', function() {
  const value = this.value.replace(/,/g, '');
  this.value = parseFloat(value).toLocaleString('en-US', {
    style: 'decimal',
    maximumFractionDigits: 2,
    minimumFractionDigits: 2
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
field A
<input class="numeric Currency" type="text" />
field B
<input class="numeric Currency" type="text" />

i try this, but it still give me a NaN

if (isNaN(val)) {
       $(this).val('');
   }
nan decimal jquery javascript
3 Answers

You can add one extra condition i.e : $(this).val().trim() != "" if yes then only change its values .

Demo Code :

$('input.Currency').on('blur', function() {
  //check if val is not ""
  if ($(this).val().trim() != "" && !isNaN($(this).val())) {
    const value = this.value.replace(/,/g, '');
    this.value = parseFloat(value).toLocaleString('en-US', {
      style: 'decimal',
      maximumFractionDigits: 2,
      minimumFractionDigits: 2
    });
  } else {
    $(this).val("")
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
field A
<input class="numeric Currency" type="text" /> field B
<input class="numeric Currency" type="text" />

user_106064000

Your on blur event is causing the issue.Check value is not NaN before paring it as float.

$('.Currency').keyup(function(){
  // value is either the inputed numbers or 0 if none
  let val = parseFloat($(this).val());
  if (isNaN(val)) {
      $(this).val('');
   }
});

$('input.Currency').on('blur', function() {
  const value = this.value.replace(/,/g, '');

  if(!isNaN(parseFloat(value))) { // ADD THIS
      this.value = parseFloat(value).toLocaleString('en-US', {
        style: 'decimal',
        maximumFractionDigits: 2,
        minimumFractionDigits: 2
      });
  }
})
user_82273460 

$('.Currency').keyup(function(){

  // value is either the inputed numbers or 0 if none
  let val = parseFloat($(this).val());
  if (isNaN(val)) {
       $(this).val('');
   }
 
});
$('input.Currency').on('blur', function() {
  const value = this.value.replace(/,/g, '');
  this.value = parseFloat(value).toLocaleString('en-US', {
    style: 'decimal',
    maximumFractionDigits: 2,
    minimumFractionDigits: 2
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
field A
<input class="numeric Currency" type="text" />
field B
<input class="numeric Currency" type="text" />

user_137320900
Related