JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="fiddle">Auto Comma Input and Strip</div>

<form id="calculator" method="post" name="calculator" onsubmit="return potato();">

<input type="tel" id="amount" name="amount" style="text-align:right" onkeyup="this.value = numFormat(this.value)">

<input type="submit" name="SendDetails" value="Calculate" />

<p>
<span id="totRate"></span>
</p>

<p>
<input type="tel" id="amount2" name="amount2" style="text-align:right">
</p>

</form>

CSS

.fiddle {background-color:#000;color:#fff;padding:2px 6px;margin:0 0 10px 0;}

JavaScript

// Auto Comma Input and Strip

function potato() {
var amount = +document.calculator.amount.value.replace(/[^0-9]/g, "");

document.getElementById("totRate").innerHTML = amount;

document.getElementById("amount2").value = amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
return false;
}


function intFormat(n) {
     
     var regex = /(\d)((\d{3},?)+)$/;
     n = n.split(',').join('');
     while(regex.test(n))
        {
          n = n.replace(regex, '$1,$2');
        }
        
        return n;
      }
      
function numFormat(n) {
       
     var pointReg = /([\d,\.]*)\.(\d*)$/, f;
     if(pointReg.test(n))
        {
          f = RegExp.$2;
          return intFormat(RegExp.$1) + '.' + f;
        }
        return intFormat(n);
      }