Jump to content

How Can I Format A Text Field As A Dollar?


Recommended Posts

This script will apply to submission forms when user enters a value and it automatically formats into $X,XXX.XX. The field that will store this value much be a Text(255). Add an HTML block and paste the following script. Replace FIELDNAME with the field name from your table.

 

<script>
function formatAsDollars(el) {
el.value = el.value.replace(/[^\d]/g,'').replace(/(\d\d?)$/,'.$1').replace(/^0+/,'').replace( /\d{1,3}(?=(\d{3})+(?!\d))/g , "$&,");
el.value = el.value ? '$' + el.value : '';
}
document.getElementById( 'InsertRecordFIELDNAME' ).onkeyup = function() {
formatAsDollars(this);
}
document.getElementById("InsertRecordFIELDNAME").onchange= function() {
formatAsDollars( this );
}
</script>
Link to post
Share on other sites
  • 4 months later...

Hi CavyEnthuasist,

 

I hope this script allows only whole number:

<script>
function formatAsDollars(el) {
el.value = el.value.replace(/[^\d]/g,'').replace(/(\d\d?)$/,'$1').replace(/^0+/,'').replace( /\d{1,3}(?=(\d{3})+(?!\d))/g , "$&,");
el.value = el.value ? '$' + el.value : '';
}
document.getElementById( 'InsertRecordno_spaces' ).onkeyup = function() {
formatAsDollars(this);
}
document.getElementById("InsertRecordno_spaces").onchange= function() {
formatAsDollars( this );
}
</script>
Link to post
Share on other sites
  • 10 months later...
  • 4 years later...

Hi @bbewley, @kpcollier,

You may try using this JS which should go to the Footer:

<script type="text/javascript">

function formatAsDollars(el) {
el.value = el.value.replace(/[^\d]/g,'').replace(/(\d\d?)$/,'$1').replace(/^0+/,'').replace( /\d{1,3}(?=(\d{3})+(?!\d))/g , "$&,");
el.value = el.value ? '$' + el.value : '';
}

let fields = ["FIELD_1", "FIELD_2"]; //specify your fields here

fields.forEach(element => {
    element = "InsertRecord" + element; // replace "InsertRecord" with "EditRecord" for Details/Single Record Update DP 
    document.getElementById(element).onkeyup = function() {
        formatAsDollars(this);
    }
    document.getElementById(element).onchange= function() {
        formatAsDollars(this);
    }
});
</script>

Pay attention to comments.

Hope this helps.

Vitalikssssss

Link to post
Share on other sites

I couldn't get it to work. Maybe it is because I the values in the fields I am trying to format are involved in custom js calculations? I am taking an inputted number, multiplying by a few different percents, and the total of that is the value to these fields I am trying to format. They still spit out a number with 3 digits after the decimal point and no ' , ' after 3 digits. 

To see the custom js calculations, go here. Vitaliks had also helped me with some bugs in that code.

Link to post
Share on other sites
  • 4 months later...
On 1/3/2020 at 8:18 AM, Vitalikssssss said:


You may try using this JS which should go to the Footer:


<script type="text/javascript">

function formatAsDollars(el) {
el.value = el.value.replace(/[^\d]/g,'').replace(/(\d\d?)$/,'$1').replace(/^0+/,'').replace( /\d{1,3}(?=(\d{3})+(?!\d))/g , "$&,");
el.value = el.value ? '$' + el.value : '';
}

let fields = ["FIELD_1", "FIELD_2"]; //specify your fields here

fields.forEach(element => {
    element = "InsertRecord" + element; // replace "InsertRecord" with "EditRecord" for Details/Single Record Update DP 
    document.getElementById(element).onkeyup = function() {
        formatAsDollars(this);
    }
    document.getElementById(element).onchange= function() {
        formatAsDollars(this);
    }
});
</script>

Pay attention to comments.

Hope this helps.

Vitalikssssss

@Vitalikssssss

I used this to edit a single record on the details page and it works perfect for my first record entry but then it doesn't work on the rest of the records that follow.  Do I need to add something else or place it differently?  I tried in the footer as well as inserting an HTML block before and after my "Price" field.  Thanks in advance for the help!

Link to post
Share on other sites

Hi @JMR21,

The above code needs to be updated since now all Caspio Datapages have AJAX and special event handler "DataPageReady".

You may try the following updated JavaScript:

<script>

document.addEventListener('DataPageReady', assignEvent);

function formatAsDollars(el) {
el.value = el.value.replace(/[^\d]/g,'').replace(/(\d\d?)$/,'$1').replace(/^0+/,'').replace( /\d{1,3}(?=(\d{3})+(?!\d))/g , "$&,");
el.value = el.value ? '$' + el.value : '';
}

function assignEvent(){

let fields = ["Field_1", "Field_2"]; //specify your fields here

fields.forEach(element => {
    element = "InsertRecord" + element; // replace "InsertRecord" with "EditRecord" for Details/Single Record Update DP 
    document.getElementById(element).onkeyup = function() {
        formatAsDollars(this);
    }
    document.getElementById(element).onchange= function() {
        formatAsDollars(this);
    }
});

}

</script>

Regards,

vitalikssssss

Link to post
Share on other sites
  • 2 months later...

@Vitalikssssss Hi, I have a few text fields in my data page and tried your code (below) but I'm not getting any results. Am I missing something? Many thanks 

 

<script>

document.addEventListener('DataPageReady', assignEvent);

function formatAsDollars(el) {
el.value = el.value.replace(/[^\d]/g,'').replace(/(\d\d?)$/,'$1').replace(/^0+/,'').replace( /\d{1,3}(?=(\d{3})+(?!\d))/g , "$&,");
el.value = el.value ? '$' + el.value : '';
}

function assignEvent(){

let fields = ["Stock", "Content"]; //specify your fields here

fields.forEach(element => {
    element = "EditRecord" + element; // replace "InsertRecord" with "EditRecord" for Details/Single Record Update DP 
    document.getElementById(element).onkeyup = function() {
        formatAsDollars(this);
    }
    document.getElementById(element).onchange= function() {
        formatAsDollars(this);
    }
});

}

</script>

 

 

Link to post
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...
×
×
  • Create New...