0

I have added a thousand separator by Javascript keyup to an input field within a standard form. Now my form cannot submit because of the comma "," in the value.

How can I edit my current code or add a new function to remove the comma when submitting the form.

Javascript Event Keyup

<script>
    var cal2_txtLoan = document.getElementById('cal2_txtLoan');
    
    cal2_txtLoan.addEventListener('keyup', function() {
      var val = this.value;
      val = val.replace(/[^0-9\.]/g,'');
      
      if(val != "") {
        valArr = val.split('.');
        valArr[0] = (parseInt(valArr[0],10)).toLocaleString();
        val = valArr.join('.');
      }
      
      this.value = val;
    });
    
    </script>

Form 

<form>
   <div class="row mt20">
      <div class="col-md-3 col-sm-12 col-xs-12">
      </div>
      <div>
         <input id="cal2_txtLoan" class="wpcf7-form-control wpcf7-text form-control investment-class-form"  type="text" placeholder="วงเงินกู้(บาท)">
      </div>
   </div>
   <div class="row mt20">
      <div class="col-md-6 col-sm-9 col-xs-9">
         <input id="cal2_txtTenor" class="wpcf7-form-control wpcf7-text form-control investment-class-form" type="number" placeholder="ระยะเวลากู้ 1-30 ปี">
      </div>
   </div>
   <div class="row mt20">
      <div class="col-md-6 col-sm-9 col-xs-9">
         <input id="cal2_txtInterestRate" class="wpcf7-form-control wpcf7-text form-control investment-class-form" type="number" placeholder="ดอกเบี้ย(%)">
      </div>
   </div>
   <div class="row mt20">
      <div class="col-md-offset-3 col-md-6 col-sm-offset-0 col-sm-9 col-xs-offset-0 col-xs-9">
         <div class="row">
            <div class="col-xs-6">
               <button type="button" id="cal2_btnCalculate" class="button investment-button">คำนวณ</button>
            </div>
         </div>
      </div>
   </div>
   <div class="row mt20">
      <div class="col-md-3 col-sm-12 col-xs-12">
         <label class="investment-list">สรุปยอดผ่อนต่อเดือน (บาท)</label> <input id="cal2_txtInstallment" class="wpcf7-form-control wpcf7-text form-control investment-class-form" disabled="disabled" type="text"> <span class="investment-list" style="color:red;">* ผลลัพธ์จากการคำนวณ เป็นเพียงผลการคำนวณเบื้องต้นเท่านั้น โปรดติดต่อธนาคารเพื่อคำนวณยอดที่ถูกต้องอีกครั้งหนึ่ง</span>
      </div>
   </div>
</form>
SavPhill
  • 636
  • 6
  • 24
  • Try this method. https://stackoverflow.com/questions/48950796/how-to-revert-tolocalestring –  Aug 19 '22 at 05:07
  • @GreenGator Thank you. How can I use this within my current code? It does look like toLocalString() is the function needed for this solution. – SavPhill Aug 19 '22 at 05:12

1 Answers1

0

Check out: How to convert a locale string (currency) back into a number?

let num = parseFloat(yourString.replace(/[^0-9\.]/g,''));

(You actually have the answer in your own code )

Update: Here's an example.

let myString = "1,250,856.5867";

function convertToFloat(string) {
    let num = parseFloat(string.replace(/[^0-9\.]/g,'')); 
    return num;
}

/*  Test the function in console    */
console.log(convertToFloat(myString));

Output will be: 1250856.5867