123,456.00 Number format on sumbmission form

[Volomeister]

Hi there!

I needed to convert the number input into 123,456,789.00 format on the fly while a person types in.

I was not able to find a default feature on Caspio, so I wrote this script that does the job.

You can check the live version here:  https://c7eku786.caspio.com/dp/7f80b000b3154265003240a4b07f

Script itself below:
 

<script>
document.addEventListener('DataPageReady', _=> { 

document.querySelectorAll('.cbFormTextField').forEach( input => {
    input.addEventListener('input', e => {
    formatDecimals(e.target)})
    input.addEventListener('blur', e => {
    formatDecimals(e.target, true)})
})

const formatNumber = n => {
  return n.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",")
}

const formatDecimals = (input, blurEvent) => {
  let inputValue = input.value;
  let caretPosition = input.selectionStart;
  let initialLength = input.value.length;
if (inputValue === "") { return; }
if(inputValue.indexOf('.') >-1) {

  let decimalPosition = inputValue.indexOf(".");
  let beforeDecimal = inputValue.substring(0, decimalPosition);
  let afterDecimal = inputValue.substring(decimalPosition);

  beforeDecimal = formatNumber(beforeDecimal);
  afterDecimal = formatNumber(afterDecimal);
  if (blurEvent) {
  afterDecimal+='00';
  }
  afterDecimal = afterDecimal.substring(0,2);
  input.value = `${beforeDecimal}.${afterDecimal}`;
  } 
else {
  input.value = formatNumber(inputValue)
  if (blurEvent) {
  input.value+='.00';
  }
}
  
  let updatedLength = input.value.length;
  caretPosition = updatedLength - initialLength + caretPosition;
  input.setSelectionRange(caretPosition, caretPosition);
  
}



})

</script>

If this script is being used as it is, it will convert all text inputs into the aforementioned format.
If you need this functionality only for some particular input,  say with name InsertRecordNumber_ (check the screenshot),  you must substitute the next block of code:

document.querySelectorAll('.cbFormTextField').forEach( input => {
    input.addEventListener('input', e => {
    formatDecimals(e.target)})
    input.addEventListener('blur', e => {
    formatDecimals(e.target, true)})
})

with:
 

let numberInput = document.querySelector('input[name="InsertRecordNumber_"]');

    numberInput.addEventListener('input', e => {formatDecimals(e.target)})
    numberInput.addEventListener('blur', e => {formatDecimals(e.target, true)})

Hope someone will find this helpful

[Cortor]

Hi, thank you for this. 

 

Could you perhaps explain how you would specify this code to only do this for a specific field instead of every text box on the page?

Thank you

Update: Nevermind. I see you did mention that.