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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Mar 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Calculation script - submit form and round numbers

    I do not really know javascript well (not at all actually), so I needed a hand with the following.
    In the "Enter Square Footage" textfield, a number is typed. In the other 18 textfield, the information is entered by the javascript. All the information enters correctly, the calculations correctly, but I had a few small details I needed help with.

    1. When entering the square footage number, if I press the submit button, it just clears all textfields. I have to enter my "enter square footage" number and then click in an empty textfield to get everything working correctly.
    2. Is there a way to round all the textfields to 2 decimal points?

    Example of page is at: Untitled Document

    The script:
    Code:
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type="text/javascript">
    function calc() {
    
       var a = parseFloat(document.getElementById('squarefoot').value);
       var b = a*.0185
       document.getElementById('base').value = a*.0185;
       document.getElementById('baseprice').value = b*40;
       var c = a*.007
       document.getElementById('level').value = a*.007;
       document.getElementById('levelprice').value = c*40;  
       var d = a*.02
       document.getElementById('poly').value = a*.02;
       document.getElementById('polyprice').value = d*25;    
       var e = a/4
       document.getElementById('edge').value = a/4;
       document.getElementById('edgeprice').value = e*1.5;   
       var f = a*1
       document.getElementById('saw').value = a*1;
       document.getElementById('sawprice').value = f*1.5;   
       var g = a/50
       document.getElementById('soil').value = a/50;
       document.getElementById('soilprice').value = g*40;
       var h = a/50
       document.getElementById('seed').value = a/50;
       document.getElementById('seedprice').value = h*6;   
       var i = a/75
       document.getElementById('mush').value = a/75;
       document.getElementById('mushprice').value = i*40;        
       var j = a*1.2
       document.getElementById('fab').value = a*1.2;
       document.getElementById('fabprice').value = j*.3;
       var k = b+c+d+e+f+g+h+i+j
       document.getElementById('matsprice').value = (b*40)+(c*40)+(d*25)+(e*1.5)+(f*1.5)+(g*40)+(h*6)+(i*40)+(j*.3);   
         }
    </script>
    <style type="text/css">
    .matstable {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	font-style: normal;
    	text-align: center;
    }
    .headings {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    }
    </style></head>
    
    <body>
    <form id="form1" name="form1" method="post" action="">
      <p><strong>Enter Square Footage</strong>
        <input id="squarefoot" onblur="calc()" value="" size="15" maxlength="15" />
        <input type="submit" name="Submit" id="Submit" value="Submit" />
      </p>
    </form> 
    <br />
    <table width="150" border="0" cellpadding="0" cellspacing="6">
      <tr>
        <td align="left" class="headings"><strong>Materials</strong></td>
      </tr>
    </table>
    <table width="1080" border="0" cellspacing="0" cellpadding="1">
      <tr>
        <td width="120" align="center" bgcolor="#DAE0E9"><strong><span class="matstable">Base (tons)</span></strong></td>
        <td width="120" align="center" bgcolor="#E2E3D2"><strong><span class="matstable">Leveling Sand (tons)</span></strong></td>
        <td width="120" align="center" bgcolor="#DAE0E9"><strong><span class="matstable">Poly Sand (40# bags)</span></strong></td>
        <td width="120" align="center" bgcolor="#E2E3D2" class="matstable"><strong>Edging (average ft)</strong></td>
        <td width="120" align="center" bgcolor="#DAE0E9" class="matstable"><strong>Saw/Machine/Etc</strong></td>
        <td width="120" align="center" bgcolor="#E2E3D2" class="matstable"><strong>Soil (Tons)</strong></td>
        <td width="120" align="center" bgcolor="#DAE0E9" class="matstable"><strong>Seed (lbs)</strong></td>
        <td width="120" align="center" bgcolor="#E2E3D2" class="matstable"><strong>Mush (tons)</strong></td>
        <td width="120" align="center" bgcolor="#DAE0E9" class="matstable"><strong>Fabric (sq/ft)</strong></td>
      </tr>
      <tr>
        <td width="120" align="center" bgcolor="#DAE0E9"><span class="matstable">
          <input id="base"  value="" size="8" maxlength="8" />
        </span></td>
        <td width="120" align="center" bgcolor="#E2E3D2"><span class="matstable">
          <input id="level"  value="" size="8" maxlength="8" />
        </span></td>
        <td width="120" align="center" bgcolor="#DAE0E9"><span class="matstable">
          <input id="poly"  value="" size="8" maxlength="8" />
        </span></td>
        <td width="120" align="center" bgcolor="#E2E3D2"><span class="matstable">
          <input id="edge"  value="" size="8" maxlength="8" />
        </span></td>
        <td width="120" align="center" bgcolor="#DAE0E9"><span class="matstable">
          <input id="saw"  value="" size="8" maxlength="8" />
        </span></td>
        <td width="120" align="center" bgcolor="#E2E3D2"><span class="matstable">
          <input id="soil"  value="" size="8" maxlength="8" />
        </span></td>
        <td width="120" align="center" bgcolor="#DAE0E9"><span class="matstable">
          <input id="seed"  value="" size="8" maxlength="8" />
        </span></td>
        <td width="120" align="center" bgcolor="#E2E3D2"><span class="matstable">
          <input id="mush"  value="" size="8" maxlength="8" />
        </span></td>
        <td width="120" align="center" bgcolor="#DAE0E9"><span class="matstable">
          <input id="fab"  value="" size="8" maxlength="8" />
        </span></td>
      </tr>
      <tr>
        <td width="120" align="center" bgcolor="#DAE0E9"><strong><span class="matstable">Price</span></strong></td>
        <td width="120" align="center" bgcolor="#E2E3D2"><strong><span class="matstable">Price</span></strong></td>
        <td width="120" align="center" bgcolor="#DAE0E9"><strong><span class="matstable">Price</span></strong></td>
        <td width="120" align="center" bgcolor="#E2E3D2"><strong><span class="matstable">Price</span></strong></td>
        <td width="120" align="center" bgcolor="#DAE0E9"><strong><span class="matstable">Price</span></strong></td>
        <td width="120" align="center" bgcolor="#E2E3D2"><strong><span class="matstable">Price</span></strong></td>
        <td width="120" align="center" bgcolor="#DAE0E9"><strong><span class="matstable">Price</span></strong></td>
        <td width="120" align="center" bgcolor="#E2E3D2"><strong><span class="matstable">Price</span></strong></td>
        <td width="120" align="center" bgcolor="#DAE0E9"><strong><span class="matstable">Price</span></strong></td>
      </tr>
      <tr>
        <td width="120" align="center" bgcolor="#DAE0E9"><span class="matstable">
          <input id="baseprice" value="" size="8" maxlength="8" />
        </span></td>
        <td width="120" align="center" bgcolor="#E2E3D2"><span class="matstable">
          <input id="levelprice" value="" size="8" maxlength="8" />
        </span></td>
        <td width="120" align="center" bgcolor="#DAE0E9"><span class="matstable">
          <input id="polyprice" value="" size="8" maxlength="8" />
        </span></td>
        <td width="120" align="center" bgcolor="#E2E3D2"><span class="matstable">
          <input id="edgeprice" value="" size="8" maxlength="8" />
        </span></td>
        <td width="120" align="center" bgcolor="#DAE0E9"><span class="matstable">
          <input id="sawprice" value="" size="8" maxlength="8" />
        </span></td>
        <td width="120" align="center" bgcolor="#E2E3D2"><span class="matstable">
          <input id="soilprice" value="" size="8" maxlength="8" />
        </span></td>
        <td width="120" align="center" bgcolor="#DAE0E9"><span class="matstable">
          <input id="seedprice" value="" size="8" maxlength="8" />
        </span></td>
        <td width="120" align="center" bgcolor="#E2E3D2"><span class="matstable">
          <input id="mushprice" value="" size="8" maxlength="8" />
        </span></td>
        <td width="120" align="center" bgcolor="#DAE0E9"><span class="matstable">
          <input id="fabprice" value="" size="8" maxlength="8" />
        </span></td>
      </tr>
    </table>
    <table width="284" border="0" cellspacing="6" cellpadding="0">
      <tr>
        <td width="135" align="left" class="headings"><strong>Total Mats Price</strong></td>
        <td width="152" align="center"><span class="matstable">
          <input id="matsprice" value="" size="12" maxlength="12" />
        </span></td>
      </tr>
    </table>
    </body>
    </html>

  • #2
    Regular Coder
    Join Date
    Jan 2013
    Location
    Sunnyvale, CA
    Posts
    104
    Thanks
    6
    Thanked 7 Times in 7 Posts
    No need to have value="" in your input tags, since they will be empty anyway.

    Rounding numbers to 2 decimal places:

    var x = 123.4567;
    x = parseInt( x * 100 ) / 100; // x == 123.45!

    parseInt is actually used to convert a string (i.e. text) into an integer. Although x is initialized with a numeric data type and not text, it is implicitly converted into text when processed by parseInt. a better way to do it is ~~(x * 100) / 100, because the value of x does not need to be converted into text, and because it is processed much faster.

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,640
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by sbhmf View Post
    x = parseInt( x * 100 ) / 100; // x == 123.45!

    parseInt is actually used to convert a string (i.e. text) into an integer.
    No parseInt() is for converting from other number bases to base 10 - Number() is for converting strings to numbers.

    To get two decimal places displayed you actually need to convert the number to a string as numbers have an indeterminate number of places.

    var x = 123.4567;
    x = x.toFixed(2); // 123.45

    If you need to actually round the number then use Math.round()

    var x = 123.4567;
    x = Math.round(x * 100)/100; // 123.46
    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.

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,011
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    <input type="submit" name="Submit" id="Submit" value="Submit" />

    A submit button does what is says on the tin - submits a form to a server-side script and then refreshes the page.
    You should never assign the name or id submit (small initial letter) to a button, because then your JS code can't call document.formname.submit() if you ever need to.

    Make your submit button an ordinary button.
    <input type = "button" id = "but1" onclick = "calc()">

    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #5
    Regular Coder
    Join Date
    Jan 2013
    Location
    Sunnyvale, CA
    Posts
    104
    Thanks
    6
    Thanked 7 Times in 7 Posts

    Post Official doc on parseInt, and a performance boost

    Regarding ParseInt() documentation:
    Referencing: https://developer.mozilla.org/en-US/...jects/parseInt

    Note the Summary: "The parseInt() function parses a string argument and returns an integer of the specified radix or base."

    Note the Parameters: "string The value to parse. If string is not a string, then it is converted to one. Leading whitespace in the string is ignored."

    Regarding performance boost:
    Referencing: Tilde or the Floor? Practical use for JavaScript bitwise operators. (#1) | rocha.la

    Note for beginners: The tilde - i.e. ~ - is the bitwise NOT, and the double tilde simply means ~~.

    Note: "However, the most practical way of utilizing the power of this operator is to use it as a replacement for Math.floor() function as double bitwise NOT performs the same operation a lot quicker. You can use it, to convert any floating point number to an integer without performance overkill that comes with Math.floor(). Additionally, when you care about minification of your code, you end up using 2 characters (2 tildes) instead of 12."

    My thanks to Piotr Rochala.

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,640
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by sbhmf View Post
    Regarding ParseInt() documentation:

    Regarding performance boost:
    But neither of those provides the solution to what the OP was asking for since Math.floor is not the same as Math.round.
    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.

  • #7
    Regular Coder
    Join Date
    Jan 2013
    Location
    Sunnyvale, CA
    Posts
    104
    Thanks
    6
    Thanked 7 Times in 7 Posts
    I stand corrected.


  •  

    Posting Permissions

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