displaying value

[purnendu2311]

Hi all

I am getting the problem in displaying the value. once i select quentity one, the cost should be 9.95. once i will select the quentity as 2 , the cost sould be 19.90. once i select 3, cost should be 29.85. I am getting the value.
But the problem is that , i want to select quentity as 2, the value shoud come 19.90 but infact it is coming 19.9 only.


<script>function changePrice()
{
//document.f1.selectQty.value
//document.f1.price.value=Math.round((document.f1.selectQty.value*9.95)*100)/100;
document.f1.price.value=Math.abs((document.f1.selectQty.value*9.95)*100)/100;
}

</script>


<table width="100%" border="0" cellpadding="6" cellspacing="0" bgcolor="#F3F5FC" class="blueborder">
<form name="f1" method="post" onSubmit="return validate();" >
<tr>
<td width="47%" align="left" valign="middle"><H3>Tuxedo
Blue Diamond Prepaid Maestro Card </H3></td>
<td width="31%" align="center" valign="middle"><H3>Quantity:
<select name="selectQty" id="selectQty" onChange="changePrice();">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</H3></td>
<td width="22%" align="right" valign="middle"><h3><span class="div-align">
Cost:&nbsp;<span class="style1">&pound;</span>
<input name="price" class="form"
id="price" value="9.95" size="8" />
</span></h3></td>
</tr>
</form>
</table>


<script>function changePrice()
{
//document.f1.selectQty.value
//document.f1.price.value=Math.round((document.f1.selectQty.value*9.95)*100)/100;
document.f1.price.value=Math.abs((document.f1.selectQty.value*9.95)*100)/100;
}

</script>


please give me the solution, It is urgent.

Thanks & Regards

Ranjan

[mwinter]

But the problem is that , i want to select quentity as 2, the value shoud come 19.90 but infact it is coming 19.9 only.

Easily fixed but I'd like to address something else first.



document.f1.price.value=Math.abs((document.f1.selectQty.value*9.95)*100)/100;

When working with currency, use scaled integers. That is, instead of say 9.95 for &#163;9.95, use 995. Floating-point numbers cannot represent all values exactly, leading to accuracy errors. Integers, however, can be stored precisely. As a bonus, arithmetic is usually quicker.

When you want to display a value, simply convert the number to a string and insert the decimal separator (usually a dot or comma, depending on locale) two characters from the right. I'll include a function to do that later.



<table width="100&#37;" border="0" cellpadding="6" cellspacing="0" bgcolor="#F3F5FC" class="blueborder">

You should use CSS nowadays. The table is fine for structuring the form, but the attributes should be replaced by CSS rules.

When choosing class names, select semantic (meaningful) names that describe the purpose, rather than the presentation. Consider if you want a green border in future; the name, blueborder, is useless and you have to change both the markup and the style sheet.



<form name="f1" method="post" onSubmit="return validate();" >

This is invalid: form elements cannot be children of table elements. Change the order so that the table is a child of the form.

It's generally a good idea to pass a reference to the form to validation functions. For a start, it usually eliminates the need for an identifier (an id or name attribute).


The code below adds a method to numbers named, toCurrency.



Number.prototype.toCurrency = function(c, t, d) {
var n = +this,
s = (0 > n) ? '-' : '',
m = String(Math.round(Math.abs(n))),
i = '',
j, f;
c = c || '';
t = t || '';
d = d || '.';

while (m.length < 3) {m = '0' + m;}
f = m.substring((j = m.length - 2));
while (j > 3) {i = t + m.substring(j - 3, j) + i; j -= 3;}
i = m.substring(0, j) + i;
return s + c + i + d + f;
};

The number needs to be a scaled: if it's a decimal value, it will rounded. The first argument is the currency symbol to add to the start of the returned string (defaults to an empty string - no symbol). The second argument is the thousands separator, used to group digits (defaults to an empty string - no separator). The final argument is the decimal separator (defaults to a dot [.]). For example,



(123456.7).toCurrency('&#163;', ',')

evaluates to the string, "&#163;1,234.57". Notice that the six (6) was rounded up to a seven (7).

Your changePrice function could now be written



function changePrice(form) {
var controls = form.elements;

controls.price.value = (995 * controls.selectQty.value).toCurrency();
}

changing the call to:



<select ... onchange="changePrice(this.form);">

Hope that helps,
Mike