I would love some help with this. I have an event registration website where real estate agents enter their listing’s information into a form. Often times, the agent will not follow the tool tips and fill out the wrong formatting of a field. For example, they will type in “1000000.00” instead of “$1,000,000” for the sales price of a house. I would like to add some Javascript so that all of the fields will display the same format of numbers no matter what the agent types in. I would like the following fields to appear in this format:
@Bryn - you will need to use a form validation script or write your own validations using regex. As to the file size check, take a look at this stackoverflow topic.
As @webdev mentioned, you might want to explore regex. I never used regex before but did some stackoverflow research and found some really simple regex search pattern that I could use to build the begening of what might be your formatting number function.
Here a live Codepen written for you to play with
Simply start typing any number into the input field and watch it format itself.
Right now, the function performs the following:
on DOM ready add a “keyup” listener on your “price” input field
runs the formatPrice function every 300ms after a key is being pressed
checks if there is a value
if there is a value, then use a regex to clean all non-digit character to have a clean value to play with for the next steps
if the length of the value is smaller or equals to 3 digit, simply add a $ in front of the value
else if the length of the value is higher than 3 and smaller or equal to 6 digit, inject a comma after the third item from the end of the array) and add a $ in front of the new value, etc… up to 9 digits or 999,999,999 USD…
/*
* format price up to 999 millions USD
* using regex search pattern
*/
document.addEventListener("DOMContentLoaded", event => {
let price = document.getElementById("price");
// 🍋 on input keyup, run the formatting function
price.addEventListener("keyup", event => {
console.clear();
// format price field every half a second
setTimeout(() => {
formatPrice();
}, 500);
}); // end event listener
// 🍓 price function declaration
function formatPrice() {
let rawValue = price.value;
// if there is a value
if (rawValue) {
console.log(rawValue);
// replace all non-digits with "nothing" using regex of \D
let cleanValue = rawValue.replace(/\D/g, "");
console.log(cleanValue);
// if the value is smaller or equal to 3 digits
if (cleanValue.length <= 3) {
console.log("value is smaller or equal to 3 digits");
price.value = `$${cleanValue}`;
} else if (cleanValue.length > 3 && cleanValue.length <= 6) {
console.log("value is higher than 3 and smaller or equal to 6 digits");
let splitedValue = cleanValue.split("");
console.log(splitedValue);
// inject a comma after the 3rd item from the end of the array
splitedValue.splice(-3, 0, ",");
console.log(splitedValue);
let finalValue = splitedValue.join("");
console.log(finalValue);
price.value = `$${finalValue}`;
} else if (cleanValue.length > 6 && cleanValue.length <= 9) {
console.log("value is higher than 6 and smaller or equal to 9 digits");
let splitedValue = cleanValue.split("");
splitedValue.splice(-3, 0, ",");
splitedValue.splice(-7, 0, ",");
let finalValue = splitedValue.join("");
price.value = `$${finalValue}`;
} else if (cleanValue.length > 9) {
console.log("value is higher than 9 digits");
price.value = `u're making to much 💰`;
} // end else if value formating
} // end if value exists
} // end formatPrice()
}); // DOMContentLoaded()
I console logged every key steps for you to understand what is going on. Surely there is plenty of room to improve the function I quickly wrote. Hope that helps Thanks @webdev for pointing us to the regex method !
and found some really simple 
Thanks