View Single Post
Old 01-30-2013, 02:56 AM   PM User | #1
joel45
New to the CF scene

 
Join Date: Jan 2013
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
joel45 is an unknown quantity at this point
Exclamation Calculating javascript | html form

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 Form


Here is the code of what I have so far:
Code:
        <!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">R 22</td>
                      <td align="center" width="100">
                      <input type="text" name="qtyC" size="5" tabindex="5" ></td>
                      
                    
                     <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">&nbsp;</td>
                    </tr>
                <tr>
                    <td width="250">&nbsp;</td>
                    <td align="center" width="100">&nbsp;</td>
                    <td align="right" width="60">&nbsp;</td>
                    <td align="right" width="140">&nbsp;</td>
                </tr>
                <tr>
                    <td align="center" width="40">&nbsp;</td>
                    <td align="right" width="60">&nbsp;</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">&nbsp;</td>
                    <td align="right" width="60">&nbsp;</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">&nbsp;</td>
                  <td align="right" width="60">&nbsp;</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">&nbsp;</td>
                    <td align="center" width="100">&nbsp;</td>
                    <td align="right" width="60">&nbsp;</td>
                    <td align="right" width="140">&nbsp;</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 = eval(QtyA);  
         
          if (document.getElementById("qtyB").value > "")
             { QtyB = document.getElementById("qtyB").value };
          document.getElementById("qtyB").value = eval(QtyB);  
         
          if (document.getElementById("qtyC").value > "")
             { QtyC = document.getElementById("qtyC").value };
          document.getElementById("qtyC").value = eval(QtyC);
         
         
          TotA = QtyA * PrcA;
          document.getElementById("totalA").value = bizAmt(eval(TotA));
         
          TotB = QtyB * PrcB;
          document.getElementById("totalB").value = bizAmt(eval(TotB));
         
          TotC = QtyC * PrcC;
          document.getElementById("totalC").value = bizAmt(eval(TotC));
         
         
          Totamt = 
             eval(TotA) +
             eval(TotB) +
             eval(TotC) ;
            
          document.getElementById("GrandTotal").value = 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>
joel45 is offline   Reply With Quote