Take commas from input field, remove them, and store value with remove comma in different value

I have an input box:

<input id='first' placeholder="0" type="text" maxlength="10"autocomplete="off"/>

which automatically adds commas when numbers are written:

$("#first").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(/\B(?=(\d{3})+(?!\d))/g, ",")
          ;
          });
});

I want to store the input value (with commas) in a var and remove the commas with a jquery code, then use the new value of the input (one without commas) as a new variable.

var firstValue = Number($('#first').val());

3 answers

  • answered 2018-07-11 03:29 Kiran Shahi

    You can use replace() function to remove certain string from string.

    $("#first").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(/\B(?=(\d{3})+(?!\d))/g, ",")
              ;
          });
          
          var firstValue = Number($('#first').val().replace(/,/g,''));
          console.log(firstValue);
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <input id='first' placeholder="0" type="text" maxlength="10"autocomplete="off"/>

  • answered 2018-07-11 03:31 Sangram Nandkhile

    Just use .replace(/,/g, '')

    $("#first").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(/\B(?=(\d{3})+(?!\d))/g, ",")
              ;
              });
    });
    
    $("#btn").click(function(event) {
    var firstValue = Number($('#first').val().replace(/,/g, ''));
    console.log(firstValue);
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <input id='first' placeholder="0" type="text" maxlength="10"autocomplete="off"/>
    <input type='button' id=btn value=click />

  • answered 2018-07-11 03:34 Muhammad

    By using the replace function you can easily do it, it takes a regular expression and a second parameter as the new character, since you want to remove the commas so the 2nd parameter is an empty string.

    $("#first").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(/\B(?=(\d{3})+(?!\d))/g, ",")
              ;
              });
    });
    
    
    
    $("#rmCommas").click(function(){
      var firstValue = $('#first').val();
      var noCommas = firstValue.replace(/,/g , "");
      var asNumber = Number(noCommas);
      alert(asNumber);
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    <input id='first' placeholder="0" type="text" maxlength="10"autocomplete="off"/>
    <button id="rmCommas">Remove Commas</button>