Go Back   CodingForums.com > :: Client side development > JavaScript programming

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
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
Old 01-30-2013, 12:13 PM   PM User | #2
Frankie
Regular Coder

 
Join Date: Sep 2011
Posts: 285
Thanks: 3
Thanked 33 Times in 33 Posts
Frankie is an unknown quantity at this point
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.
Frankie is offline   Reply With Quote
Old 01-30-2013, 01:47 PM   PM User | #3
jerry62704
Senior Coder

 
jerry62704's Avatar
 
Join Date: Oct 2007
Location: Springfield, IL
Posts: 1,046
Thanks: 9
Thanked 81 Times in 81 Posts
jerry62704 is on a distinguished road
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
jerry62704 is offline   Reply With Quote
Old 01-30-2013, 06:38 PM   PM User | #4
felgall
Master Coder

 
felgall's Avatar
 
Join Date: Sep 2005
Location: Sydney, Australia
Posts: 5,455
Thanks: 0
Thanked 498 Times in 490 Posts
felgall is a jewel in the roughfelgall is a jewel in the roughfelgall is a jewel in the rough
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/
felgall is offline   Reply With Quote
Reply

Bookmarks

Tags
form, html, javascript

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 11:47 AM.


Advertisement
Log in to turn off these ads.