Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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>

  • #2
    Regular Coder
    Join Date
    Sep 2011
    Posts
    330
    Thanks
    3
    Thanked 35 Times in 35 Posts
    If your question is about javascript, there is a special sub forum for that.
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  • #3
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    There are 82 errors and 15 warnings in the code you showed us. You should always clean up your code before asking for help because the clean code may eliminate the problem.

    You can check the code here: W3 Validator

    Frankie is right that you are generally looking for a scripting solution. Javascript can do this easily, but your clients may turn off javascript. Another solution is doing it on the server with something like PHP. I recently saw an all CSS solution right here. You might want to find that thread.
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,592
    Thanks
    0
    Thanked 644 Times in 634 Posts
    You need to get the HTML and CSS valid first.

    Next you add the server side code to do the calculations for those without JavaScript.

    Once that works then you add the JavaScript.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •