...

View Full Version : Is this script scalable and formatted correctly?



nathgregory
09-12-2011, 12:27 PM
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
09-12-2011, 12:35 PM
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
09-12-2011, 12:43 PM
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
09-12-2011, 12:44 PM
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
09-12-2011, 12:45 PM
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
09-12-2011, 12:46 PM
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 )' >

nathgregory
09-12-2011, 12:49 PM
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
09-12-2011, 12:52 PM
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
09-12-2011, 01:15 PM
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
09-12-2011, 02:15 PM
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
09-12-2011, 02:22 PM
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
09-12-2011, 02:32 PM
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
09-12-2011, 02:38 PM
I think it is working actually!
Wow, thankyou so much!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum