SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    Wishful Thinking webmasternovis's Avatar
    Join Date
    Jul 2002
    Location
    England
    Posts
    430
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    NaN problem while adding text boxes

    Hi all,

    My javascript at the moment allows me to enter digits into textboxes, with the result of them all being put totalled up in a seperate box.

    However, the numbers inputted are referring to money. This means that some users may put commas or full stops in. Does anyone know how I can parse such punctuation, so javascript just reads it as a full number without the commas etc. As it stands I just get a NaN error.

    Thanks
    Mike

  2. #2
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    182
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    
    	<head>
    		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
    		<title>Untitled Page</title>
    		<script type="text/javascript"><!--
    function calc() {
    	theForm = document.forms["calcForm"];
    	theForm.total.value = toNum(theForm.one.value) + toNum(theForm.two.value);
    }
    
    function toNum(input) {
    	return parseFloat(input.replace(/[^0-9.-]/g,""));
    }
    //-->
    </script>
    	</head>
    
    	<body>
    		<form id="calcForm" method="get" name="calcForm">
    			<input type="text" name="one" size="24" onchange="calc();" value="0">
    			<p><input type="text" name="two" size="24" onchange="calc();" value="0"></p>
    			<p>Total: <input type="text" name="total" size="24" value="0" disabled></p>
    		</form>
    	</body>
    
    </html>
    the toNum function, will strip out anything but a number, negative or a decimal, and parseFloat converts that to a number object, then it returns the number.

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,604
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    You might want to put 10 in the second parameter of the parseFloat so that if the number passed in the first parameter has a leading zero that it isn't assumed to be octal rather than decimal.

    return parseFloat(input.replace(/[^0-9.-]/g,""),10);
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    Wishful Thinking webmasternovis's Avatar
    Join Date
    Jul 2002
    Location
    England
    Posts
    430
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys, it works great

    Just one thing though, if the field is left blank (if it doesn't have any digits there), is there a method which doesn't make the total have NaN in?

    Cheers,
    Mike

  5. #5
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Change the toNum function to:

    Code:
    function toNum(input) {
            if (input) {
    	    return parseFloat(input.replace(/[^0-9.-]/g,""));
            }
            return 0;
    }

  6. #6
    Wishful Thinking webmasternovis's Avatar
    Join Date
    Jul 2002
    Location
    England
    Posts
    430
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, works perfect now!


Bookmarks

Posting Permissions

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