Jump to content

123,456.00 Number format on sumbmission form


Recommended Posts

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

Desktop 2022-04-27 13-36-51.png

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...