Parse Amount

Discussion in 'JavaScript' started by electriduct, Dec 5, 2007.

0
  1. #1
    Hi,

    I try to add a subtotal amount to a shipping cost to set the total amount.
    The code I used is :

    document.getElementById('totalcost').value = '$'+(parseFloat(('$2,639.79').substring(1))+parseFloat(('$230.36').substring(1)));
    Code (markup):
    However the result of this gives : 232.36.
    Because parseFloat(('$2,639.79').substring(1)) gives 2
    And so 2+230.36 = 232.36

    I cannot find a way to do it, I just want to add 2 String amount and set it to to a variable.
    Any way to parse the '$2,639.79' to give me 2639.79 ??

    Thanks
     
    electriduct, Dec 5, 2007 IP
  2. hrcerqueira

    hrcerqueira Peon

    Messages:
    125
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    try this:

    
document.getElementById('totalcost').value = '$'+(parseFloat(('$2,639.79').replace(/,|\$/g, ''))+parseFloat(('$230.36').replace(/,|\$/g, '')));
    Code (markup):
     
    hrcerqueira, Dec 5, 2007 IP
  3. electriduct

    electriduct Guest

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    hey hrcerqueira,

    Works great! Thank u so much.

    The replace(/,|\$/g, '') does the job perfectly, quick and efficient !

    Just a little detail, I added the toFixed(2), it fix the problem of many decimals at the end.

    document.getElementById('totalcost').value = '$'+
( parseFloat( ('$12,939.792').replace(/,|\$/g, '') ) + parseFloat( ('$230.36').replace(/,|\$/g, '') ) ).toFixed(2);
    Code (markup):
    Just in case you know it, but is there any way to split the result with commas.
    I mean, instead of displaying : $13170.15 , I would like to display $13,170.15
    It's not a big deal but just in case there is something easy to add the commas to the right position.

    Thanks again
     
    electriduct, Dec 6, 2007 IP
  4. hrcerqueira

    hrcerqueira Peon

    Messages:
    125
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #4
    It's a bit more complicated, but can be done, try this:

    
var total = ( parseFloat( ('$12,939.792').replace(/,|\$/g, '') ) + parseFloat( ('$230.36').replace(/,|\$/g, '') ) ).toFixed(2);

var tmp = new String(/^\d+\./.exec(total)).replace(/[^\d]/g, '');

var total = new String(/\.\d+$/.exec(total));

for (var i = tmp.length; i > 0; i -= 3) {
    total = ',' + tmp.substring(i - 3, i) + total;
}
total = '$' + total.replace(/^,/, '');

document.getElementById('totalcost').value = total;
    Code (markup):
     
    hrcerqueira, Dec 6, 2007 IP
  5. Mike H.

    Mike H. Peon

    Messages:
    219
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #5
    electriduct:

    Try it this way:
    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Any Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">	

	function calcTotal(n1,n2){

		var sum = (Number(n1.replace(/[$,]/g,"")) + Number(n2.replace(/[$,]/g,""))).toString();
		var comma = /(-?\d+)(\d{3})/;
		while(comma.test(sum))
			{
		 	 sum = sum.replace(comma,"$1,$2");
			}
		document.forms[0]['total'].value = "$" + sum;
	}
	
</script>
<style type="text/css">

	 body {background-color: #fffacd; margin-top: 60px;}
	 form {width: 620px; margin: auto; font-family: arial; font-size: 12pt;}	
	 fieldset {background-color: #eee8aa; border: 1px solid #e6b280; padding-left: 8px; padding-bottom: 8px;} 
	 legend {font-family: arial; font-size: 14pt; color: #000000; background-color: transparent; padding-top: 3px; padding-left: 3px; padding-right: 3px; margin-bottom: 5px;}
	.label_1 {margin-right: 30px;}
	.label_2 {margin-right: 7px;}
	.label_3 {margin-right: 27px}
	.input_field {margin-top: 5px; text-align: right;}
	.totalBtn {background-color: #ffffff; border: solid 1px #000000; font-family: arial; font-size: 10pt; font-weight: bold; cursor: pointer; display: block; margin-left: auto; margin-right: auto; margin-top: 5px; margin-bottom: 5px;}
	.submitBtn {background-color: #ffffff; border: solid 1px #000000; font-family: arial; font-size: 10pt; font-weight: bold; cursor: pointer; display: block; margin-left: auto; margin-right: auto; margin-top: 5px; margin-bottom: 5px;}
	
</style>
</head>
	<body>
		<form method="post" action="">
		   <fieldset>
			<legend>Form</legend>
				<label class="label_1">First</label><input type="text" name="first" size="10" class="input_field" value="$2,639.79">
				<br>
				<label class="label_2">Second</label><input type="text" name="second" size="10" class="input_field" value="$230.36">
				<br>
				<label class="label_3">Total</label><input type="text" name="total" size="10" class="input_field" readonly>
				<br>
				<input type="button" value="Total" class="totalBtn" onclick="calcTotal(this.form['first'].value,this.form['second'].value)">
				<input type="submit" name="submit" value="Submit" class='submitBtn'>
		   </fieldset>
		</form>
	</body>
</html>
    Code (markup):
     
    Mike H., Dec 6, 2007 IP