Question 36693 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Comma separated step for float number input – Jquery

I want to comma seperated value for my input box. For Example 2100000.90 will be 2,100,000.90. What I achieved is 2100000.90 to 2,100,000 from some Solution in Stack overflow

<div class="input">
  <label for="salary">Salary</label>
  <input class='inp_cont' id="salary" name="salary" placeholder="Enter your salary" required="" type="text">
</div>

And My Javascript is

document.getElementById('salary').addEventListener('input', event =>
    event.target.value = (parseInt(event.target.value.replace(/[^d]+/gi, '')) || 0).toLocaleString('en-US')
);

I want both comma separated and value after point.

Thanks in advance

Tags:

3

Answers


  1. 0

    This function help you :

      function numberWithCommas(x) {
     return x.toString().replace(/B(?=(d{3})+(?!d))/g, ',');
  }

    Output :

       numberWithCommas(88888888.88));  // 88,888,888.88
    Login or Signup to reply.
  2. 0

    You can try this

     parseInt(number, 10).toLocaleString()

    here is also the link from mozilla docs about Number.prototype.toLocaleString() method. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString

    Login or Signup to reply.
  3. 0

    Your logic is defeated by its own.

    Here is what you are currently doing:

    1. ask the user to input a series of digits and only digits
    2. parse the input into an integer
    3. format the integer in the en-US locale

    what will happen when the user tries to input a decimal point?
    It will automatically be removed by the regex replace.

    What you need to do is the following:

    1. Allow the user to input digits and decimal points

    That will mess up if the user types more than one decimal point, but that can be detected and dealt with later

    1. Try to detect if the input is a valid number or not
    2. if not, then provide a negative feedback to the user
    3. if yes, then provide a positive feedback
    4. most important: the process of converting text to number will get rid of the decimal point if it is the last character in the input box. The user will not see the dot since the conversion from text to number will see that it is the last thing and it’s not affecting the number, so it is removed, and the user doesn’t know why.

    Therefor, it is essential to add the "dot" back if it is the last thing typed by the user.

    document.getElementById('salary').addEventListener('input', event => {
  event.preventDefault();

  // allow only digits and dots
  let text = event.target.value.replace(/[^d.]/gi, '');

  // check if last character is a dot
  let lastCharIsAdot = text.substr(text.length - 1, 1) === ".";

  // try to check if input text is a valid number
  if (isNaN(text)) {
    // if not, then give feedback to the user
    event.target.classList.remove('valid');
    event.target.classList.add('invalid');

  } else {
    // if yes, then give positive feedback
    event.target.classList.remove('invalid');
    event.target.classList.add('valid');

    // format number
    event.target.value = Number(text).toLocaleString("en-US");
    // this will remove the dot if it is the last thing input
    // therefor, we need to put it back

    if (lastCharIsAdot) event.target.value += ".";
  }

});
    .valid {
  background-color: lightgreen;
  color: darkgreen;
}

.invalid {
  background-color: pink;
  color: maroon;
}
    <div class="input">
  <label for="salary">Salary</label>
  <input class='inp_cont' id="salary" name="salary" placeholder="Enter your salary" required="" type="text">
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search