Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 20
  1. #1
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Adding Comma to text field

    Hi guys
    I've wandered into the JS forum because a recent client has asked for something that could only be done with js, if at all...

    I would like to add a comma after every third number typed into an input field, while the number is being typed. The only catch is that the number (a dollar value) may also have decimal places, in which case the first comma wouldn't appear until 5 characters have been entered. Also, the comma would need to be stripped at time of submission.

    The form in question is here.
    I've searched the forum and the web looking for a solution, but nothing does it as the user types... any suggestions will be warmly welcomed

    I take no responsibility for the above nonsense.


    Left Justified

  • #2
    Senior Coder
    Join Date
    Feb 2004
    Posts
    1,206
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well your page doesn't seem to be coming up, but I think you may be looking for a script like this:
    http://lcognard.free.fr/javascri/pat..._financier.htm

    Hope that helps,
    Sadiq.

  • #3
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It's not the most elegant script I've written
    But it works onkeyup while the user is inputting....

    Code:
    <script type="text/javascript">
      function format(input){
       var num = input.value.replace(/\,/g,'');
        if(!isNaN(num)){
          if(num.indexOf('.') > -1){ 
             num = num.split('.');
             num[0] = num[0].toString().split('').reverse().join('').replace(/(?=\d*\.?)(\d{3})/g,'$1,').split('').reverse().join('').replace(/^[\,]/,'');
            if(num[1].length > 2){ 
               alert('You may only enter two decimals!');
               num[1] = num[1].substring(0,num[1].length-1);
            }  input.value = num[0]+'.'+num[1];        
          } else{ input.value = num.toString().split('').reverse().join('').replace(/(?=\d*\.?)(\d{3})/g,'$1,').split('').reverse().join('').replace(/^[\,]/,'') };
        }
        else{ alert('You may enter only numbers in this field!');
              input.value = input.value.substring(0,input.value.length-1);
        }
      }
    </script>
    </head>
    
    <body>
    <form>
    <input type="text" onkeyup="format(this)" onchange="format(this)"
    onblur="if(this.value.indexOf('.')==-1)this.value=this.value+'.00'">
    </form>
    .....Willy

    Edit: Fixed it so that only two decimals can be inputted.
    Last edited by Willy Duitt; 06-30-2004 at 09:46 PM.

  • #4
    Senior Coder
    Join Date
    Feb 2004
    Posts
    1,206
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey cool, that works really well Willy!

  • #5
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks;

    The toString().split().reverse().join() routine I picked up on this forum somewhere.
    (sorry I forgot who posted it) All I did was put it together to work onkeyup.....

    BTW: ML;

    If you wish to strip the commas at submission you will need to add something like this to your form validation function:
    Code:
    document.forms[0]['MY_COMMA_INPUT'].value = document.forms[0]['MY_COMMA_INPUT'].replace(/\,/g,'');

  • #6
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sweeeeet
    Thanks a lot guys, much appreciated!

    Willy: do you want to PM me your real name so I can give you credit in the code? (I just like to do that, professional decency and all )

    Thanks again

    I take no responsibility for the above nonsense.


    Left Justified

  • #7
    Senior Coder
    Join Date
    Feb 2004
    Posts
    1,206
    Thanks
    0
    Thanked 0 Times in 0 Posts
    What? That's not his real name?


    Sadiq.

  • #8
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This is my name.
    But don't worry about credits.
    It only took a few minutes and quite frankly,
    I merely mashed together things I learned here on the forum.....

    .....Willy

  • #9
    New to the CF scene
    Join Date
    Sep 2004
    Location
    London
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've been trying to use the function written by Willy to format numbers as they are being keyed in, but need to strip the commas at the time of submission.

    I saw the post that says to add this to the form validation function:

    document.forms[0]['MY_COMMA_INPUT'].value = document.forms[0]['MY_COMMA_INPUT'].replace(/\,/g,'');

    My question is, what is my form validation function? (I know that sounds stupid, but I've never done any JS before the project I'm working on, and am learning bit by bit as I'm going.)

    Currently, my form tag reads like this:
    <form name="calculator" method="post" action="">

    The only validation point I can think of is the Calculate button:
    <input type=button value="Calculate." name="Calculate" onClick="calculate(this.form)">

    But I can't see how the MY_COMMA_INPUT string fits into either one. Should I put it somewhere into the calculate(myform) function ? But where?

    Someone suggested to me to put it at the beginning of the calculate function, but that it wouldn't work if the input is not the first element in the form. And, of course, the input is not the first element in the form...

    Any suggestions?
    This is a cool function, and I really would like to use it...

    Thanks!

  • #10
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You need to show us your form and calculate function...

    The information you provided does not show your comma formatted input name nor how or what you are calculating... Normally, I would just advise to strip the commas out onsubmit but if you are performing any math calculations prior to submittal, the commas will need to be stripped in order for those values to be numbers and not strings...

    BTW: I have changed the last else conditional to:

    Code:
        else{
              var temp = input.value; 
              alert('You may enter only numbers in this field!');
              input.value = temp.replace(/[^\$\d\.]*/g,'');
        }
    This fixes a problem of a user inputting an illegal character an the input losing focus to the alert and a decimal and trailing zeros corrupting the input onblur...

    .....Willy

  • #11
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oh....

    If you do not have a Calculate function... Try adding the replace onsubmit like so:

    Code:
    <script type="text/javascript">
      function format(input){
       var num = input.value.replace(/\,/g,'');
        if(!isNaN(num)){
          if(num.indexOf('.') > -1){ 
             num = num.split('.');
             num[0] = num[0].toString().split('').reverse().join('').replace(/(?=\d*\.?)(\d{3})/g,'$1,').split('').reverse().join('').replace(/^[\,]/,'');
            if(num[1].length > 2){ 
               alert('You may only enter two decimals!');
               num[1] = num[1].substring(0,num[1].length-1);
            }  input.value = num[0]+'.'+num[1];        
          }    else{ input.value = num.toString().split('').reverse().join('').replace(/(?=\d*\.?)(\d{3})/g,'$1,').split('').reverse().join('').replace(/^[\,]/,'') };
        }
    
        else{
              var temp = input.value; 
              alert('You may enter only numbers in this field!');
              input.value = temp.replace(/[^\d\.]*/g,'');
        }
      }
    </script>
    </head>
    
    <body>
    <form name="calculator" method="post" action="" 
    onsubmit="this.input.value=this.input.value.replace(/\,/g,'')">
    <input type="text" name="input" onkeyup="format(this)" onchange="format(this)"
    onblur="if(this.value.indexOf('.')==-1)this.value=this.value+'.00'">
    <input type="submit" value="Submit">
    </form>
    .....Willy

  • #12
    New to the CF scene
    Join Date
    Sep 2004
    Location
    London
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Willy,

    Thanks for your help.
    I made the change to the last else conditional statement, and was able to fix my problem by adding parseFloat and
    Code:
    .replace(/\,/g,'')
    to the applicable variables as they are being declared at the beginning of the Calculate function, i.e.:

    Code:
    function calculate(myform) {
    tier = (myform.tier.options[myform.tier.selectedIndex].value);
    level = (myform.level.options[myform.level.selectedIndex].value);
    product = (myform.product.options[myform.product.selectedIndex].value);
    pricelevel = (myform.pricelevel.value);
    pricelist = parseFloat(myform.pricelist.value.replace(/\,g,''));
    materials = parseFloat(myform.materials.value.replace(/\,g,''));
    mfg = parseFloat(myform.mfg.value.replace(/\,g,''));
    with pricelist, materials, and mfg being the variables from which the commas need to be stripped before running the calculations. Worked like a charm.

    I hope this makes sense. I sure appreciate your prompt response, and the tip for using this function without a Calculate function.

  • #13
    New to the CF scene
    Join Date
    Sep 2004
    Location
    London
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi,

    I have one more question about the above function: how do you prevent it from inserting a comma after a minus sign when formatting a negative number inferior to 1,000?

    In other words, how do you keep -167.00 from displaying as -,167.00?
    Would you add parseFloat to this line?
    Code:
    } else{ input.value = num.toString().split('').reverse().join('').replace(/(?=\d*\.?)(\d{3})/g,'$1,').split('').reverse().join('').replace(/^[\,]/,'') };
    Unfortunately, I don't know enough JS to understand exactly how it works, and therefore wouldn't know how to modify it.

    Thanks!

  • #14
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try this:

    Code:
    else{ input.value = num.toString().split('').reverse().join('').replace(/(?=\d*\.?)(\d{3})/g,'$1,').split('').reverse().join('').replace(/^(\-)?\,/,'$1') };
    .....Willy

  • #15
    New to the CF scene
    Join Date
    Sep 2004
    Location
    London
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, Willy.

    I tried the change you made in red, but I'm still getting a comma after the minus sign (i.e., -,254.00).

    Is there anything else I could try?


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •