Placing a comma in a user input field when its type is "number" not "text"

Ask the community
,
1

I have this code that works great to do the calculations I need. The only issue is that it uses a User Input type “number” field and it doesn’t allow a comma (Ex. 500,000).

See code here…

$w . onReady ( function () {
$w ( ‘#input247’ ). onChange (( Event ) => {
const salesPrice = Ma th . trunc ( Number ( $w ( ‘#input247’ ). value )) ;
const stdCommission = Math . round ( salesPrice * 0.06 );
const ourCommission = Math . round ( salesPrice * 0.025 );
const savings = stdCommission - ourCommission ;

    $w ( '#input247' ). value  =  **null** ; 

    $w ( "#text548" ). text  =  '$'  +  salesPrice . toLocaleString (); 
    $w ( "#text549" ). text  =  '$'  +  stdCommission . toLocaleString (); 
    $w ( "#text550" ). text  =  '$'  +  ourCommission . toLocaleString (); 
    $w ( "#text551" ). text  =  '$'  +  savings . toLocaleString (); 

    })

});

Now I have another code that works for a User Input type “Text”.

See code here…

export function input187_input( event ) {
const input = $w ( ‘#input187’ ); input . onInput ( () => { input . value = input . value . replace ( /[^0-9,.-]+/ g , ‘’ ); input . value = new Intl . NumberFormat (). format (+ input . value . split ( ‘,’ ). join ( ‘’ )); }) }

How can I merge these codes? Or if anyone has any other idea to accomplish I would greatly appreciate it .

See screenshot below of page for reference.

1290×536 25.7 KB

2

Miguel, you need to take some time to understand the code. Your first code chunk is what we developed in response to an earlier question you posted. It does the job, except that you want to allow the user to be able to input non-numeric characters (commas, specifically). You therefore want to ‘clean up’ the input before processing it.

To do that, you can use the ‘replace()’ method on the input string, with the appropriate regex. Buried in your second chunk of code is a replace example, applied to an input value. That’s what you need to use up in the original chunk of code.

That’s JavaScript. If you do some searches on removing non-numeric characters from a text string in JavaScript you’ll find simple explanations and simple examples (without all the extraneous code you’ve got in that second chunk).

3

Hi,

Yes I have been searching and sitting at my computer for hours. Trust me the wifey is complaining. lol.

Just thought I would post while I was trying to resolve myself. I always try on my own no matter if I ask a question.

I appreciate all the input I get from everyone.

I would hire someone but unfortunately I do not have the funds at the moment. My business overhead and family come first. Things also got tighter with the pandemic. The moment I launch and start creating revenue I will be hiring someone to maintain and fix issues that arise. Trust me I can’t wait till that day comes. I know it will come because I have a lot of clients that will be using my services. Been in this business 25 years and have a huge book of clients.

Thank you for all your time and advice. I don’t want you to think I am just here and don’t appreciate. I will not forget those that helped when that time comes.

4

I found this last night. Just trying to figure out how to implement it now.

#Commas required
#Cannot be empty
#Pass: (1,000.100), (.001)#Fail: (1000), ()
^(?=.)(\d{1,3}(,\d{3})*)?(\.\d+)?$

link: https://stackoverflow.com/questions/5917082/regular-expression-to-match-numbers-with-or-without-commas-and-decimals-in-text
5

Try here: Javascript: Remove all but numbers from string - thisPointer

6

All good. I will just run with the code developed earlier which works. I’ll hire someone to add the comma on a later date.

Thank you for all your help and have a happy holiday season / new year!

7

It’s possible to use a Text Input element, but limit it to only allow number values to be typed into it. Additionally, you can customize it to automatically add commas.

Code based on the 2 snippets you shared:

$w.onReady(function () {
    const inputField = $w('#input247');
    
    // Event to handle input with commas
    inputField.onInput(() => {
        // Remove any non-numeric, non-comma characters
        inputField.value = inputField.value.replace(/[^0-9,]+/g, '');
        
        // Format the input value with commas as the user types
        inputField.value = new Intl.NumberFormat().format(
            parseInt(inputField.value.replace(/,/g, ''), 10) || 0
        );
    });

    inputField.onChange(() => {
        // Get the sanitized number (remove commas for calculations)
        const salesPrice = Math.trunc(Number(inputField.value.replace(/,/g, '')));
        
        // Perform the calculations
        const stdCommission = Math.round(salesPrice * 0.06);
        const ourCommission = Math.round(salesPrice * 0.025);
        const savings = stdCommission - ourCommission;

        // Display the results with comma formatting
        $w("#text548").text = '$' + salesPrice.toLocaleString();
        $w("#text549").text = '$' + stdCommission.toLocaleString();
        $w("#text550").text = '$' + ourCommission.toLocaleString();
        $w("#text551").text = '$' + savings.toLocaleString();

        // Clear input field if needed
        inputField.value = '';
    });
});

Video demonstration :slight_smile: