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 13 of 13
  1. #1
    New Coder
    Join Date
    Sep 2011
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Is this script scalable and formatted correctly?

    Hi guys,

    Just wondering if this javascript is valid. I have about 150 variables, and I want to check, before I start writing it all out. Anything that could reduce it a bit would be great, save time and make the code more efficient!
    By the way, all values are numbers entered in a html text field. The script does calculations on it, and posts the result to a hidden field, which is submitted to a php email script.
    Code:
    <script language="JavaScript">
    function calculate() {
    	"use strict"; 
    	var sofa_3_seaterX = (document.form1.sofa_3_seater.value * 6);
    	var sofa_2_seaterX = (document.form1.sofa_2_seater.value * 35);
    	var armchair_largeX = (document.form1.armchair_large.value * 9);
    	var armchair_smallX = (document.form1.armchair_small.value * 2);
    	var wall_unitX = (document.form1.wall_unit.value * 3);
    	
    	var total = (sofa_3_seaterX + sofa_2_seaterX + armchair_largeX + armchair_smallX + wall_unitX);
    
    	document.form1.total.value = total;
    }
    </script>

  • #2
    New Coder
    Join Date
    Sep 2011
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I have just added one more variable (it was working before, as shown above), and the results comes up with NaN - whats that all about?

  • #3
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by nathgregory View Post
    I have just added one more variable
    Which ones? Show us the complete code. HTML as well. I suspect that one or more elements (form's elements) are missing, so that their values are undefined.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #4
    New Coder
    Join Date
    Sep 2011
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I have tried this instead, which seems to work:
    I have about 150 variables, so the code is going to be really really long, is there any way to shorten or optimise it?

    Code:
    <script language="JavaScript">
    function calculate() {
    	"use strict"; 
    	var sofa_3_seater = document.form1.sofa_3_seater.value;
    	var sofa_2_seater = document.form1.sofa_2_seater.value;
    	var armchair_large = document.form1.armchair_large.value;
    	var armchair_small = document.form1.armchair_small.value;
    	var wall_unit = document.form1.wall_unit.value;
    	
    	var sofa_3_seaterX = (sofa_3_seater * 1);
    	var sofa_2_seaterX = (sofa_2_seater * 3);
    	var armchair_largeX = (armchair_large * 77);
    	var armchair_smallX = (armchair_small * 22);
    	var wall_unitX = (wall_unit * 11);
    
    	var total = (sofa_3_seaterX + sofa_2_seaterX + armchair_largeX + armchair_smallX + wall_unitX);
    
    	document.form1.total.value = total;
    }
    </script>

  • #5
    New Coder
    Join Date
    Sep 2011
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts
    HTML CODE:
    Code:
    <tr class="tr1">
    <td>3 Seater Sofa</td>
    <td><input type="text" name="sofa_3_seater" id="sofa_3_seater"size="3" tabindex="24"></td>
    <td>2 Seater Sofa</td>
    <td><input type="text" name="sofa_2_seater" id="sofa_2_seater" size="3" tabindex="25"></td>
    </tr>
    <tr>
    <td>Large Armchair</td>
    <td><input type="text" name="armchair_large" id="armchair_large" size="3" tabindex="26"></td>
    <td>Small Armchair</td>
    <td><input type="text" name="armchair_small" id="armchair_small" size="3" tabindex="27"></td>
    </tr>
    <tr>
    <td>Wall Unit</td>
    <td><input type="text" name="wall_unit" id="wall_unit" size="3" tabindex="28"></td>
    <td>Large China Cabinet</td>
    <td><input type="text" name="large_china_cabinet" id="large_china_cabinet" size="3" tabindex="29"></td>
    </tr>
    <tr>
    <td>Medium China Cabinet</td>
    <td><input type="text" name="medium_china_cabinet" id="medium_china_cabinet" size="3" tabindex="30"></td>
    <td>Small China Cabinet</td>
    <td><input type="text" name="small_china_cabinet" id="small_china_cabinet" size="3" tabindex="31"></td>
    </tr>
    <tr>
    <td>Welsh Dresser</td>
    <td><input type="text" name="welsh_dresser" id="welsh_dresser" size="3" tabindex="32"></td>
    <td>Large Sideboard</td>
    <td><input type="text" name="large_sideboard" id="large_sideboard" size="3" tabindex="33"></td>
    </tr>
    <tr>
    <td>Medium Sideboard</td>
    <td><input type="text" name="medium_sideboard" id="medium_sideboard" size="3" tabindex="34"></td>
    <td>Small Sideboard</td>
    <td><input type="text" name="small_sideboard" id="small_sideboard" size="3" tabindex="35"></td>
    </tr>
    <tr>
    <td>Dining Chair</td>
    <td><input type="text" name="dining_chair" id="dining_chair" size="3" tabindex="36"></td>
    <td>Large Dining Table</td>
    <td><input type="text" name="large_dining_table" id="large_dining_table" size="3" tabindex="37"></td>
    </tr>
    <tr>
    <td>Medium Dining Table</td>
    <td><input type="text" name="medium_dining_table" id="medium_dining_table" size="3" tabindex="38"></td>
    <td>Small Dining Table</td>
    <td><input type="text" name="small dining_table" id="small dining_table" size="3" tabindex="39"></td>
    </tr>
    <tr>
    <td>Gateleg Table</td>
    <td><input type="text" name="gateleg_table" id="gateleg_table" size="3" tabindex="40"></td>
    <td>Occasional Table</td>
    <td><input type="text" name="occasional_table" id="occasional_table" size="3" tabindex="41"></td>
    </tr>

  • #6
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Code:
    function calculate( theForm, totalBox )
    {
      var total = 0,
          elems = theForm.getElementsByTagName( 'input' );
      
      /*
       Loop through the elements of theForm
        If element's type is 'text' and its name contains an underscore
         if its value is convertable to a number
          add it to total
         else
          change its value to '?' 
    
       Copy total to totalBox.value
      */
    }
    
    
    ........
    <input type = 'text' name = 'total'>
    <input type = 'button' value = 'Calculate Total' onclick = 'calculate( this.form, total )' >

  • #7
    New Coder
    Join Date
    Sep 2011
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hiya pal. I am the author, but new to javascript.
    I don't really understand what was in your code snippet though. prob gonna give up lol.

  • #8
    New Coder
    Join Date
    Sep 2011
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thought I'd add.
    For each item of furniture say sofa_3_seater, I want to define a number value which its amount of cubic feet. This is different for all 150 items, and I want to be able to change at any time. In my original code, I could set this variable number, multiply the customer's entered number by it, and then add everything together.
    This code works perfectly, and not every item has an underscore in it, and some input fields such as name and email don't need anything doing with it. I can expand this code to all 150 items, but thought something may be quicker, like a loop or something.
    Code:
    <script language="JavaScript">
    function calculate() {
    	"use strict"; 
    	var sofa_3_seater = document.form1.sofa_3_seater.value;
    	var sofa_2_seater = document.form1.sofa_2_seater.value;
    	var armchair_large = document.form1.armchair_large.value;
    	var armchair_small = document.form1.armchair_small.value;
    	var wall_unit = document.form1.wall_unit.value;
    	
    	var sofa_3_seaterX = (sofa_3_seater * 1);
    	var sofa_2_seaterX = (sofa_2_seater * 3);
    	var armchair_largeX = (armchair_large * 77);
    	var armchair_smallX = (armchair_small * 22);
    	var wall_unitX = (wall_unit * 11);
    
    	var total = (sofa_3_seaterX + sofa_2_seaterX + armchair_largeX + armchair_smallX + wall_unitX);
    
    	document.form1.total.value = total;
    }
    </script>

  • #9
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    You may create an array or an object, with the names and the values which should multiplied with. Like:

    Code:
    var allvalues={
    'sofa_3_seater':1,
    'sofa_2_seater':3,
    'armchair_large':77,
    'armchair_small':22,
    'wall_unit':11
    }
    var total=0;
    for(name in allvalues){
    total+=(document['form1'][name].value*allvalues[name]);
    }
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #10
    New Coder
    Join Date
    Sep 2011
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hi,
    I tried that code, but nothing was caulcated for the total field.
    I'm new to arrays, do you know how I would write it?

  • #11
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Should work:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <script type="text/javascript">
    function calculate(){
    var allvalues={
    'sofa_3_seater':1,
    'sofa_2_seater':3,
    'armchair_large':77,
    'armchair_small':22,
    'wall_unit':11
    }
    var total=0;
    for(name in allvalues){
    total+=(document['form1'][name].value*allvalues[name]);
    }
    document['form1']['total'].value=total;
    }
    </script>
    
    </head>
    <body>
    <form action="" name="form1">
    <input type="text" name="sofa_3_seater">
    <input type="text" name="sofa_2_seater">
    <input type="text" name="armchair_large">
    <input type="text" name="armchair_small">
    <input type="text" name="wall_unit">
    <br>
    <br>
    <input type="text" readonly="readonly" name="total">
    <br>
    <br>
    
    <input type="button" value="Calculate" onclick="calculate()">
    </form>
    </body>
    </html>
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • Users who have thanked Kor for this post:

    nathgregory (09-12-2011)

  • #12
    New Coder
    Join Date
    Sep 2011
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks for that, I tried it and it did work.
    Just having a problem trying to translate it to my document.
    See http://www.happydaysremovals.com/estimatenew.html

  • #13
    New Coder
    Join Date
    Sep 2011
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I think it is working actually!
    Wow, thankyou so much!


  •  

    Posting Permissions

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