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_InvoiceTot al"].value = toFixed2(totF(o Form));
}
function toFixed2(x) {
if (Number().toFix ed) return Number(x).toFix ed(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_InvoiceTot al' == 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('form 1')};
</script>
</head>
<body>
<form action="" name="form1">
<table>
<tr>
<th>#</th>
<th>Number of Packages</th>
<th>Specificati on</th>
<th>Quantity<br ><span class="tip">(wh ole number)</span></th>
<th>Unit price<br><span class="tip">(0. 00)</span></th>
<th>Total<scrip t type="text/javascript">
// Write 'calculated' only if script supported
document.write( "<br><span"
+ " class='tip'>(ca lculated)</" + "span>");
</script></th>
</tr><tr>
<td style="width: 38px"><b>1</b></td>
<td style="width: 78px"><input name="_11_1_Num berPackages"
size="5" type="text"></td>
<td style="width: 281px"><input
name="_12_1_Spe cificationCommo dities" size="35"
type="text"></td>
<td style="width: 165px"><input name="_13_1_Qua ntity"
size="10" type="text">
<select size="1" name="_13_1_Qua ntityUnits">
<option selected="selec ted" value="PCS">PCS </option>
<option value="DOZ">DOZ </option>
</select></td>
<td style="width: 91px">
<select size="1" name="_14_1_Uni tPriceCurrency" >
<option selected="selec ted" value="USD">USD </option>
<option value="CDN">CDN </option>
</select><br>
<input name="_14_1_Uni tPrice" size="10" type="text"></td>
<td style="width: 102px"><input name="_15_1_Tot al"
size="10" type="text"></td>
</tr><tr>
<td><b>2</b></td>
<td><input name="_11_2_Num berPackages"
size="5" type="text"></td>
<td><input name="_12_2_Spe cificationCommo dities"
size="35" type="text"></td>
<td><input name="_13_2_Qua ntity" size="10" type="text"></td>
<td><input name="_14_2_Uni tPrice" size="10" type="text"></td>
<td><input name="_15_2_Tot al" 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_Invoi ceTotal">
</table>
</form>
</body></html>
--
Rob
