Streaming live at 10am (PST)

Formatting Numbers/Adding Javascript to specific CMS form field

Hi all,

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:

Price: $999,999
Price per SQFT: $500
Phone Number: 512-555-1234
Square Footage: 2,300

I would also like the one image they upload to automatically be compressed to under 4MB if it’s over 4MB.

Here’s the live website:

Read-only link:
https://preview.webflow.com/preview/willco?utm_medium=preview_link&utm_source=dashboard&utm_content=willco&preview=7cc87eb21965c22bed455a34b98378c7&mode=preview

Thank you for any wisdom you can share, I really appreciate this community!! @rileyrichter - any ideas?! THANKS!!!

@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.

2 Likes

Hi @Brynn,

As @webdev mentioned, you might want to explore regex. I never used regex before but did some stackoverflow research :smiling_face_with_three_hearts: 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:

  1. on DOM ready add a “keyup” listener on your “price” input field
  2. runs the formatPrice function every 300ms after a key is being pressed
  3. checks if there is a value
  4. 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
  5. if the length of the value is smaller or equals to 3 digit, simply add a $ in front of the value
  6. 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…

HTML

<form action="/action.php">
  <input id="price" type="text" name="Price" placeholder="Name your price 🥳">
  <input id="submit" type="submit" value="Submit">
</form>

JavaScript

/*
 * 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 :slight_smile: Thanks @webdev for pointing us to the regex method !

2 Likes

You could also look at something like inputmask.

And

http://html5pattern.com/

2 Likes

thank you so much @webdev !

beautiful!! thank you Anthony!! #genius

1 Like