Calculating html / Javascript form

dpmg · Jan 29, 2013

I'm trying to calculate this form with quantities and addition, some fields have required amounts and the other fields are quantities and amounts for input. I am trying to add all of this together and apply tax. Any help would be much appreciated. Here is a link of the Excel spreadsheet I'm working from: Estimator FormHere is the code of what I have so far: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Estimator</title> </head> <body bgcolor="#FFFFFF"> <h2></h2> <br /> <table border="0" cellpadding="0" width="550" id="table2"> <tr> <td width="250" height="31"><b>Item Description</b></td> <td align="center" width="100" height="31"><b>Quantity</b></td> <td align="right" height="31" width="60"><b></b></td> <td align="right" height="31" width="140"><b>Total</b></td> </tr> <tr> <td width="250">Truck & Fuel Surcharge</td> <td align="center" width="100"> <input type="text" value="" name="qtyA" id="qtyA" size="5" tabindex="5"></td> <td align="right" type="hidden" width="60">$65</td> <td align="right" width="140"> <input readonly style="border:0px;" tabindex="99" name="totalA" id="totalA" size="12" tabindex="99" ></td> </tr> <tr> <td width="250">Contract Labor</td> <td align="center" width="100"> <input type="text" name="qtyB" id="qtyB" size="5" tabindex="5" ></td> <td align="right" type="hidden" width="60">$88</td> <td align="right" width="140"> <input type="hidden" name="totalB" id="totalB" size="12" tabindex="99" ></td> </tr> <tr> <td width="250">Contract Labor OT</td> <td align="center" width="100"> <input type="text" name="qtyC" id="qtyC" size="5" tabindex="5" ></td> <td align="right" type="hidden" width="60">$132</td> <td align="right" width="140"> <input type="hidden" name="totalC" id="totalC" size="12" tabindex="99" ></td> </tr> <tr> <td width="250">Non Contract Labor</td> <td align="center" width="100"> <input type="text" name="qtyC" size="5" tabindex="5" ></td> <td align="right" type="hidden" width="60">$98</td> <td align="right" width="140"> <input type="hidden" name="totalC" size="12" tabindex="99" ></td> </tr> <tr> <td width="250">Non Contract Labor OT</td> <td align="center" width="100"> <input type="text" name="qtyC" size="5" tabindex="5" ></td> <td align="right" type="hidden" width="60">$147</td> <td align="right" width="140"> <input type="hidden" name="totalC" size="12" tabindex="99" ></td> </tr> <tr> <td width="250"><b>Parts Description</b></td> <td align="center" width="100"> <td align="right" width="140"> </td> </tr> <tr> <td width="250">Compressor</td> <td align="center" width="100"> <input type="text" name="qtyC" size="5" tabindex="5" ></td> <td align="right" width="60"></td> <td align="right" width="140">$ <input type="text" name="totalC" size="12" tabindex="99" ></td> </tr> <tr> <td width="250">Contactors</td> <td align="center" width="100"> <input type="text" name="qtyC" size="5" tabindex="5" ></td> <td align="right" width="60"></td> <td align="right" width="140">$ <input type="text" name="totalC" size="12" tabindex="99" ></td> </tr> <tr> <td width="250">Oil Pressure Switch</td> <td align="center" width="100"> <input type="text" name="qtyC" size="5" tabindex="5" ></td> <td align="right" width="60"></td> <td align="right" width="140">$ <input type="text" name="totalC" size="12" tabindex="99" ></td> </tr> <tr> <td width="250">Core Driers</td> <td align="center" width="100"> <input type="text" name="qtyC" size="5" tabindex="5" ></td> <td align="right" width="60"></td> <td align="right" width="140">$ <input type="text" name="totalC" size="12" tabindex="99" ></td> </tr> <tr> <td> <input type="text" name="input1" size="25"></td></td> <td align="center" width="100"> <input type="text" name="qtyC" size="5" tabindex="5" ></td> <td align="right" width="60"></td> <td align="right" width="140">$ <input type="text" name="totalC" size="12" tabindex="99" ></td> </tr> <tr> <td> <input type="text" name="input1" size="25"></td></td> <td align="center" width="100"> <input type="text" name="qtyC" size="5" tabindex="5" ></td> <td align="right" width="60"></td> <td align="right" width="140">$ <input type="text" name="totalC" size="12" tabindex="99" ></td> </tr> <tr> <td> <input type="text" name="input1" size="25"></td></td> <td align="center" width="100"> <input type="text" name="qtyC" size="5" tabindex="5" ></td> <td align="right" width="60"></td> <td align="right" width="140">$ <input type="text" name="totalC" size="12" tabindex="99" ></td> </tr> <tr> <td> <input type="text" name="input1" size="25"></td></td> <td align="center" width="100"> <input type="text" name="qtyC" size="5" tabindex="5" ></td> <td align="right" width="60"></td> <td align="right" width="140">$ <input type="text" name="totalC" size="12" tabindex="99" ></td> </tr> <tr> <td> <input type="text" name="input1" size="25"></td></td> <td align="center" width="100"> <input type="text" name="qtyC" size="5" tabindex="5" ></td> <td align="right" width="60"></td> <td align="right" width="140">$ <input type="text" name="totalC" size="12" tabindex="99" ></td> </tr> <tr> <td> <input type="text" name="input1" size="25"></td></td> <td align="center" width="100"> <input type="text" name="qtyC" size="5" tabindex="5" ></td> <td align="right" width="60"></td> <td align="right" width="140">$ <input type="text" name="totalC" size="12" tabindex="99" ></td> </tr> <tr> <td> <input type="text" name="input1" size="25"></td></td> <td align="center" width="100"> <input type="text" name="qtyC" size="5" tabindex="5" ></td> <td align="right" width="60"></td> <td align="right" width="140">$ <input type="text" name="totalC" size="12" tabindex="99" ></td> </tr> <tr> <td> <input type="text" name="input1" size="25"></td></td> <td align="center" width="100"> <input type="text" name="qtyC" size="5" tabindex="5" ></td> <td align="right" width="60"></td> <td align="right" width="140">$ <input type="text" name="totalC" size="12" tabindex="99" ></td> </tr> <tr> <td> <input type="text" name="input1" size="25"></td></td> <td align="center" width="100"> <input type="text" name="qtyC" size="5" tabindex="5" ></td> <td align="right" width="60"></td> <td align="right" width="140">$ <input type="text" name="totalC" size="12" tabindex="99" ></td> </tr> <tr> <td width="250">Leak Check</td> <td align="center" width="100"> <input type="text" name="qtyC" size="5" tabindex="5" ></td> <td align="right" width="60"></td> <td align="right" width="140"> <input type="hidden" name="totalC" size="12" tabindex="99" ></td> </tr> <tr> <td width="250">Recovery #</td> <td align="center" width="100"> <input type="text" name="qtyC" size="5" tabindex="5" ></td> <td align="right" width="60"></td> <td align="right" width="140"> </td> </tr> <tr> <td width="250"> </td> <td align="center" width="100"> </td> <td align="right" width="60"> </td> <td align="right" width="140"> </td> </tr> <tr> <td align="center" width="40"> </td> <td align="right" width="60"> </td> <td width="250"> <p align="right"><b>Tax:</b></td> <td align="right" width="250">$ <input name="Tax" id="Tax" size="15" readonly style="border:0px;" tabindex="99"></td> </tr> <tr> <td align="center" width="40"> </td> <td align="right" width="60"> </td> <td width="250"> <p align="right"><b>GRAND TOTAL:</b></td> <td align="right" width="250">$ <input name="GrandTotal" id="GrandTotal" size="15" readonly style="border:0px;" tabindex="99"></td> </tr> <tr> <td align="center" width="40"> </td> <td align="right" width="60"> </td> <td width="250"> <p align="right"><b>COMMISSION:</b></td> <td align="right" width="250">$ <input type="text" name="Commission" id="Commission" size="15" tabindex="99" readonly style="border:0px;" tabindex="99"></td> </tr> <tr> <td width="250"> </td> <td align="center" width="100"> </td> <td align="right" width="60"> </td> <td align="right" width="140"> </td> </tr> </table> </body> <script type="text/javascript"> function bizAmt(amount) { string = "" + amount; dec = string.length - string.indexOf('.'); if (string.indexOf('.') == -1) return string + '.00'; if (dec == 1) return string + '00'; if (dec == 2) return string + '0'; if (dec > 3) return string.substring(0,string.length-dec+3); return string; } function calculate() { QtyA = 0; QtyB = 0; QtyC = 0; TotA = 0; TotB = 0; TotC = 0; PrcA = 65; PrcB = 88; PrcC = 132; if (document.getElementById("qtyA").value > "") { QtyA = document.getElementById("qtyA").value }; document.getElementById("qtyA").value = http://stackoverflow.com/questions/14595780/eval(QtyA); if (document.getElementById("qtyB").value > "") { QtyB = document.getElementById("qtyB").value }; document.getElementById("qtyB").value = http://stackoverflow.com/questions/14595780/eval(QtyB); if (document.getElementById("qtyC").value > "") { QtyC = document.getElementById("qtyC").value }; document.getElementById("qtyC").value = http://stackoverflow.com/questions/14595780/eval(QtyC); TotA = QtyA * PrcA; document.getElementById("totalA").value = http://stackoverflow.com/questions/14595780/bizAmt(eval(TotA)); TotB = QtyB * PrcB; document.getElementById("totalB").value = http://stackoverflow.com/questions/14595780/bizAmt(eval(TotB)); TotC = QtyC * PrcC; document.getElementById("totalC").value = http://stackoverflow.com/questions/14595780/bizAmt(eval(TotC)); Totamt = eval(TotA) + eval(TotB) + eval(TotC) ; document.getElementById("GrandTotal").value = http://stackoverflow.com/questions/14595780/bizAmt(eval(Totamt)); } function validNum(theForm) { var checkOK ="0123456789.,"; var checkStr = theForm.qtyA.value; var allValid = true; var validGroups = true; var decPoints = 0; var allNum = ""; for (i = 0; i < checkStr.length; i++) { ch = checkStr.charAt(i); for (j = 0; j < checkOK.length; j++) if (ch == checkOK.charAt(j)) break; if (j == checkOK.length) { allValid = false; break; } if (ch == ".") { allNum += "."; decPoints++; } else if (ch == "," && decPoints != 0) { validGroups = false; break; } else if (ch != ",") allNum += ch; } if (!allValid) { alert("Please enter only digit characters in the \"Truck Fuel Charge quantity\" field."); theForm.qtyA.focus(); return (false); } if (decPoints > 1 || !validGroups) { alert("Please enter a valid number in the \"Truck Fuel Charge quantity\" field."); theForm.qtyA.focus(); return (false); } var checkOK = "0123456789.,"; var checkStr = theForm.qtyB.value; var allValid = true; var validGroups = true; var decPoints = 0; var allNum = ""; for (i = 0; i < checkStr.length; i++) { ch = checkStr.charAt(i); for (j = 0; j < checkOK.length; j++) if (ch == checkOK.charAt(j)) break; if (j == checkOK.length) { allValid = false; break; } if (ch == ".") { allNum += "."; decPoints++; } else if (ch == "," && decPoints != 0) { validGroups = false; break; } else if (ch != ",") allNum += ch; } if (!allValid) { alert("Please enter only digit characters in the \"contract Labor quantity\" field."); theForm.qtyB.focus(); return (false); } if (decPoints > 1 || !validGroups) { alert("Please enter a valid number in the \"contract Labor quantity\" field."); theForm.qtyA.focus(); return (false); } var checkOK = "0123456789.,"; var checkStr = theForm.qtyC.value; var allValid = true; var validGroups = true; var decPoints = 0; var allNum = ""; for (i = 0; i < checkStr.length; i++) { ch = checkStr.charAt(i); for (j = 0; j < checkOK.length; j++) if (ch == checkOK.charAt(j)) break; if (j == checkOK.length) { allValid = false; break; } if (ch == ".") { allNum += "."; decPoints++; } else if (ch == "," && decPoints != 0) { validGroups = false; break; } else if (ch != ",") allNum += ch; } if (!allValid) { alert("Please enter only digit characters in the \"contract Labor OT quantity\" field."); theForm.qtyC.focus(); return (false); } if (decPoints > 1 || !validGroups) { alert("Please enter a valid number in the \"contract Labor OT quantity\" field."); theForm.qtyC.focus(); return (false); } calculate(); return (true); } </script> </html>I have working code using the form tag but I cannot figure out how to use the getElementId. see below: <html> <head> <meta http-equiv="Content-Language" content="en-us"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>HVAC Estimator</title> <style type="text/css"> .totals { font-size: .9em; } </style> <script language=javascript>  </script> </head> <body bgcolor="#FFFFFF"> <h2>HVAC Estimator</h2> <br /> <form method="POST" action="submitted.html" name="ofrm"> <table border="0" cellpadding="0" width="550" id="table2" name="ofrm"> <tr> <td width="250" height="31"><b>Item Description</b></td> <td align="center" width="100" height="31"><b>Quantity</b></td> <td align="right" height="31" width="60"><b>Price </b></td> <td align="right" height="31" width="140"><b>Total</b></td> </tr> <tr> <td width="250">Truck & Fuel Surcharge</td> <td align="center" width="100"> <input type="text" name="qtyA" size="5" tabindex="5" onchange="return validNum(document.ofrm)"></td> <td align="right" width="60"></td> <td align="right" width="140"> <input type="hidden" name="totalA" size="12" tabindex="99" onchange="calculate()"></td> </tr> <tr> <td width="250">Contract Labor</td> <td align="center" width="100"> <input type="text" name="qtyB" size="5" tabindex="5" onchange="return validNum(document.ofrm)"></td> <td align="right" width="60"></td> <td align="right" width="140"> <input type="hidden" name="totalB" size="12" tabindex="99" onchange="calculate()"></td> </tr> <tr> <td width="250">Contract Labor OT</td> <td align="center" width="100"> <input type="text" name="qtyC" size="5" tabindex="5" onchange="return validNum(document.ofrm)"></td> <td align="right" width="60"></td> <td align="right" width="140"> <input type="hidden" name="totalC" size="12" tabindex="99" onchange="calculate()"></td> </tr> <tr> <td width="250"> </td> <td align="center" width="100"> </td> <td align="right" width="60"> </td> <td align="right" width="140"> </td> </tr> <tr> <td width="250"> <p align="right"><b>SUB TOTAL:</b></td> <td align="center" width="100"> </td> <td align="right" width="60"> </td> <td align="right" width="140">$ <input readonly style="border:0px;" class="totals" name="GrandTotal" size="15" tabindex="99" onchange="calculate()"></td> </tr> <tr> <td width="250"> </td> <td align="center" width="100"> </td> <td align="right" width="60"> </td> <td align="right" width="140"> </td> </tr> </table> </form> </body> </html>

Calculating html / Javascript form

dpmg

New Member