CODEWITHSUNDEEP
javascriptjquery
Riantori
Riantori

Reputation: 317

How to fire blur event in jquery

I have function with blur event, and working with regex, to replace the input value on the blur event. But I have some issue where the blur event still running it when the input field read the next event blur and it make my regex running twice and make a NaN, i really appreciate your help. here is my code below:

$(document).ready(function(){
  $('#myNumber').on('blur', function ({target}) {
    if ($(this).val()) {
      let number = parseInt($(this).val());
      const num = '$ ' + number.toFixed(2).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
      $(this).val(num); 
    }
  });
})
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<input type="text" id="myNumber">
</body>
</html>

Upvotes: 1

Views: 563

Answers (4)

PPL
PPL

Reputation: 6555

$('#myNumber').on('blur', function ({target}) {
            if ($(this).val()) {
                var numberValue = $(this).val().trim();
                if(numberValue.charAt(0) == '$')
                {
                    var numberValue1 = $(this).val().trim().slice(2);
                    let number = parseInt(numberValue1);
                    const num = '$ ' + number.toFixed(2).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
                    $(this).val(num);
                }
                else
                {
                    let number = parseInt($(this).val());
                    const num = '$ ' + number.toFixed(2).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
                    $(this).val(num); 
                }
            }
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="myNumber">

Upvotes: 1

Sarvan Kumar
Sarvan Kumar

Reputation: 934

Check this fiddle..

Add this js..

$(document).ready(function(){
  $('#myNumber').on('blur', function ({target}) {
    if ($(this).val()) {
      let number = parseInt($(this).val());
      const num = number.toFixed(2).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
      $(this).val(num); 
    }
  });
});

Upvotes: 0

htshame
htshame

Reputation: 7330

It's because you have $ sign after the first blur event execution.

Remove it from your js function.

$(document).ready(function(){
  $('#myNumber').on('blur', function ({target}) {
    if ($(this).val()) {
      let number = parseInt($(this).val());
      const num = number.toFixed(2).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
      $(this).val(num); 
    }
  });
})
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<span>$</span><input type="text" id="myNumber">
</body>
</html>

Upvotes: 1

Calvin Nunes
Calvin Nunes

Reputation: 6516

The problem is that when you get the value in the second time, it has a '$' in the val(), so it is not a number and it causes the NaN problem. You should replace the sign every time when you get inside the function. I also change const num = to var num = ... because I'm not sure if is good to use a const that will change...

$(document).ready(function(){
  $('#myNumber').on('blur', function ({target}) {
    if ($(this).val()) {
      let number = parseInt($(this).val().replace('$',''));
      var num = number.toFixed(2).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
      num = '$ ' + num;
      $(this).val(num); 
    }
  });
})
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<input type="text" id="myNumber">
</body>
</html>

Upvotes: 0

Related Questions