Removing commas and dots with jQuery in the form field?-CodePudding

Basically what I'm trying to achieve is this:

User will see the first input and will be able to enter their numbers, which is automatically converted into a monetary values.

The first input field is for users only, it won't be submitted.

The second (textarea) field will be hidden and will be submitted.

But I want the textarea do not contain commas and dots.

So if a user enter 100 for example.

First input field will show 1.00 (for a user).

But in the textarea I want the original 100 to be displayed that will be submitted.

So my question is, how do I remove commas ',' and dots '.' with jQuery for the textarea?

Here's the code I have so far:

$('input.number').keyup(function(event) {

  // skip for arrow keys
  if(event.which >= 37 && event.which <= 40) return;

  // format number
  $(this).val(function(index, value) {
    return value
      .replace(/\D/g, "")
      .replace(/^0 /,"")
      .split(/(\d{0,2})$/)
      .join(".")
      .replace(/\B(?=(\d{3}) (?!\d))/g, ",")
      .replace(/.$/,"")
  });
});

function myFunction() {
  var x = document.getElementById("postcontent").value;
  document.getElementById("demo").innerHTML = x;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<input oninput="myFunction()" id="postcontent"  class="number">
<br><br>
<textarea  id="demo" rows="5"></textarea>

CodePudding user response：

You can use Regular Expressions (/[.,] /g) similarly to how you did above.

function myFunction() 
{
  var x = document.getElementById("postcontent").value;
  document.getElementById("demo").innerHTML = x.replace(/[.,] /g, '');
}

Demo

Side Note: You can also use jQuery selectors and methods in your function.

function myFunction() 
{
  var x = $("#postcontent").val();
  $("#demo").html(x.replace(/[.,] /g, ''));
}

CodePudding user response：

Add the following line to the second function:

x.split(/[,.]/).join('');

This will remove all commas and dots from the value of the input.

$('input.number').keyup(function(event) {

  // skip for arrow keys
  if(event.which >= 37 && event.which <= 40) return;

  // format number
  $(this).val(function(index, value) {
    return value
      .replace(/\D/g, "")
      .replace(/^0 /,"")
      .split(/(\d{0,2})$/)
      .join(".")
      .replace(/\B(?=(\d{3}) (?!\d))/g, ",")
      .replace(/.$/,"")
  });
});

function myFunction() {
  var x = document.getElementById("postcontent").value;
  x.split(/[,.]/).join('');
  document.getElementById("demo").innerHTML = x
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<input oninput="myFunction()" id="postcontent"  class="number">
<br><br>
<textarea  id="demo" rows="5"></textarea>

CodePudding user response：

Consider the following.

$(function() {
  function restrictNumber(event) {
    if (event.which >= 37 && event.which <= 40) {
      return true;
    }
    var regExp = /[\D\.\,]/gmi;
    var str = $(this).val();
    $("#demo").val(str.replace(regExp, ""));
  }

  $(".number").keyup(restrictNumber);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div>
  <input id="postcontent" class="number" />
</div>
<textarea id="demo" rows="5"></textarea>

This uses Regular Expressions to replace any Non-Number characters when updating the TextArea Element.