BC wrote:
Thank you Dietmar for trying to bring me out of the dark ages.
I copied the functions into the <Head> of the HTML between
<script type="text/javascript">
</script> tags
at http://www.iconcustoms.com/cci-001.html
and it will not compute.
Cheers, Bryan
Just a comment:
You seem to be doing these calculations on the client purely for the
sake of sending them to the server. If they work as (I think) they
are designed, the user will never see the results.
In that case, why do the calculations on the client at all?
A second reason to not bother rounding is that if your users have
JavaScript disabled, the form will submit anyway without your script
running, so you have to handle data that hasn't been processed on the
client anyway.
If you want to do some processing of input that the user will see
(and they should be allowed to see modifications you have made to the
form), use onblur or onchange or similar function. It may even be
best to use an 'Update form' button so the user can run the update
when they are ready so as not to be pestered by alerts, etc. when
they are trying to fill in the form and make occasional keystroke
errors.
But always remember that any JavaScript may not have run when the
form is submitted.
Here's a sample based on your form and Dietmar's stuff.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
<title>Sample form</title>
<style type="text/css">
body
{ font-family: geneva, verdana, arial, sans-serif;
background-color: #f1f1f9; color: black;}
table
{ border-collapse: collapse; border: 1px solid #aaaadd;
font-size: 90%;}
td
{vertical-align: bottom; border: 1px solid #aaaadd;}
..tip
{font-weight: normal; font-size: 80%; color: #444444;}
</style>
<script type="text/javascript">
function calcTotal(ele) {
var v = ele.value;
var oForm = ele.form;
// Get the bits of the name
var nBit = ele.name.split("_");
// Check UnitPrice is valid currency number
if ('UnitPrice' == nBit[3] ){
if ( !checkCurrency(v) && '' != v ) {
alert('Please use valid currency values' +
'\nlike 34 or 34.50');
if (ele.focus) ele.focus();
return;
}
// Check Quantity is an integer
} else if ('Quantity' == nBit[3] ){
if ( !checkQuantity(v) && '' != v ) {
alert('Quantity must be a whole number');
if (ele.focus) ele.focus();
return;
}
}
// Do calcs for line totals
var sum = 0, qty, prc, sbt;
qty = oForm.elements["_13_" + nBit[2] + "_Quantity"].value;
prc = oForm.elements["_14_" + nBit[2] + "_UnitPrice"].value;
sbt = (isNaN(qty) || isNaN(prc))? 0 : toFixed2(qty * prc);
oForm.elements["_15_" + nBit[2] + "_Total"].value = sbt;
// Update form total
oForm.elements["_17_InvoiceTotal"].value = toFixed2(totF(oForm));
}
function toFixed2(x) {
if (Number().toFixed) return Number(x).toFixed(2);
var k = (Math.round(x * 100) / 100).toString();
k += (k.indexOf('.') == -1)? '.00' : '00';
return k.substring(0, k.indexOf('.') + 3);
}
function initForm(f){
// Add onblur function where appropriate
var el = document.forms[f].elements;
var i = el.length;
while (i--){
if ( 'text' == el[i].type
&& ( /_Quantity/.test(el[i].name)
|| /_UnitPrice/.test(el[i].name) ) ) {
el[i].onblur = function () {calcTotal(this);};
} else if ( '_17_InvoiceTotal' == el[i].name
|| ('text' == el[i].type
&& /_Total/.test(el[i].name)) ){
el[i].readOnly = true;
}
}
}
function checkCurrency(x){
return /^\d+(.\d\d)?$/.test(x);
}
function checkQuantity(x){
return /^\d+$/.test(x);
}
function totF(f){
var el = f.elements;
var i = el.length;
var subt = 0;
while (i--){
if ( /_Total/.test(el[i].name) ){
subt += +el[i].value;
}
}
return subt;
}
window.onload = function() {initForm('form1')};
</script>
</head>
<body>
<form action="" name="form1">
<table>
<tr>
<th>#</th>
<th>Number of Packages</th>
<th>Specification</th>
<th>Quantity<br><span class="tip">(whole number)</span></th>
<th>Unit price<br><span class="tip">(0.00)</span></th>
<th>Total<script type="text/javascript">
// Write 'calculated' only if script supported
document.write("<br><span"
+ " class='tip'>(calculated)</" + "span>");
</script></th>
</tr><tr>
<td style="width: 38px"><b>1</b></td>
<td style="width: 78px"><input name="_11_1_NumberPackages"
size="5" type="text"></td>
<td style="width: 281px"><input
name="_12_1_SpecificationCommodities" size="35"
type="text"></td>
<td style="width: 165px"><input name="_13_1_Quantity"
size="10" type="text">
<select size="1" name="_13_1_QuantityUnits">
<option selected="selected" value="PCS">PCS</option>
<option value="DOZ">DOZ</option>
</select></td>
<td style="width: 91px">
<select size="1" name="_14_1_UnitPriceCurrency">
<option selected="selected" value="USD">USD</option>
<option value="CDN">CDN</option>
</select><br>
<input name="_14_1_UnitPrice" size="10" type="text"></td>
<td style="width: 102px"><input name="_15_1_Total"
size="10" type="text"></td>
</tr><tr>
<td><b>2</b></td>
<td><input name="_11_2_NumberPackages"
size="5" type="text"></td>
<td><input name="_12_2_SpecificationCommodities"
size="35" type="text"></td>
<td><input name="_13_2_Quantity" size="10" type="text"></td>
<td><input name="_14_2_UnitPrice" size="10" type="text"></td>
<td><input name="_15_2_Total" size="10" type="text"></td>
</tr><tr>
<td colspan="4" style="text-align: center;"><input type="reset"
value="Clear all form values"></td>
<td><b>Total</b></td>
<td><input type="text" name="_17_InvoiceTotal">
</table>
</form>
</body></html>
--
Rob