Is this script scalable and formatted correctly?

[nathgregory]

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.

<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>

[nathgregory]

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?

[Kor]

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.

[nathgregory]

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?

<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>

[nathgregory]

HTML 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>

[Logic Ali]

function calculate( theForm, totalBox )
{
  var total = 0,
      elems = theForm.getElementsByTagName( 'input' );
  
  /*
   Loop through the elements of [I]theForm[/I]
    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 [I]totalBox.value[/I]
  */
}


........
<input type = 'text' name = 'total'>
<input type = 'button' value = 'Calculate Total' onclick = 'calculate( this.form, total )' >

[nathgregory]

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.

[nathgregory]

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.

<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>

[Kor]

You may create an array or an object, with the names and the values which should multiplied with. Like:

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]);
}

[nathgregory]

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?

[Kor]

Should work:

<!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>

[nathgregory]

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

[nathgregory]

I think it is working actually!
Wow, thankyou so much!