PDA

Click to See Complete Forum and Search --> : Can this be done?

JDzines
02-16-2003, 11:18 AM
I'm working on a table where the cells are:

w x H = Total then the total * 3.40 = total $

This would need to repeat 40 times (40 rows) and the total $ in the end columns would all need to be added together for a grand total amount. If I could figure how to do this for a couple rows and columns that would be great.
Please help!

I made a form with OmniForm but the code is just too crazy to try and edit, but at least you can see the layout:
http://www.polarshade.com/WindowForm.htm
JDzines
02-16-2003, 02:50 PM
That's an awesome form! I think I can figure out what to do except for the additional cells across. How would the code work to multiply cellA x cellB = cellC cellD=cellc x 3.40
Your help is greatly appreciated.
Thanks-
JDzines
02-16-2003, 04:22 PM
Yea, I found some good info that really helped, but haven't had luck putting it together for this. I'll keep working at it.
Thanks for the help.
JDzines
02-16-2003, 05:39 PM
Well, I can do the formula that lets people insert a width in one cell and the height in another cell and have it multiply to come up with a total sq. ft. and have that cell multiply by the $ amount to give a total. It's combining that code with the code to add up the $ amounts that I'm having trouble putting together. Uggg!
Nedals
02-16-2003, 06:05 PM
A little more than you asked for......
You have some 2000+ lines of javascript. What are you trying to accomplish?
Are you simply trying to get 'w x H' in the right cell after the 'calculate' button is clicked and then get a total?

You can accomplish that with the following....

<html>
<head><title>test</title>
<script type="text/javascript">
<!--
function validate(thevalue) {
var re = /^\d+(\.[0|5])?$/;
// regular expression (regex) that checks inputted value is in the form (nn, nn.0, or nn.5)
// ^ beginning of value
// \d+ decimal char (0..9); + one or more times
// (\.[0|5])? () group together; \. decimal point; [0|5] must be 0 or 5; ? group occurs zero or 1 time only
// $ end of value
if (!re.test(thevalue)) { alert('This value must be rounded to the nearest 0.5 feet') }
}

//Compute subtotal and get grand total.
function gettotal(wid,hgt,result) {
var total = 0;
// computes the subtotal and put result in right-hand cell.
document.theform[result].value = document.theform[wid].value * document.theform[hgt].value;
// total cells - number of cells not included in tabular section. 7 (including buttons) in this case
var imax = (document.theform.elements.length - 1)/4;
for (i=0; i<imax; i++) {
total += (document.theform.elements[(i*4)+3].value - 0);
// -0 to ensure the value treated as a number (not a string)
}
document.theform.totaldollars.value = total;
}
//-->
</script>
</head>

<body bgcolor="#ffffff">
<form name="theform">
<table cellspacing=0 cellpadding=5 border=0>
<tr><td><input name="wid0" type="text" onChange="validate(this.value)"></td>
<td><input name="hgt0" type="text" onChange="validate(this.value)"></td>
<td><input type="button" value="calculate" onClick="gettotal('wid0','hgt0','subtot0')"></td>
<td><input name="subtot0" type="text"></td></tr>
<tr><td><input name="wid1" type="text" onChange="validate(this.value)"></td>
<td><input name="hgt1" type="text" onChange="validate(this.value)"></td>
<td><input type="button" value="calculate" onClick="gettotal('wid1','hgt1','subtot1')"></td>
<td><input name="subtot1" type="text"></td></tr>
<!-- etc -->
<tr><td colspan=3>&nbsp;</td>
<td><input name="totaldollars" type="text"></td></tr>
</table>
</form>
</body>
</html>

NOTE:
A rule of thumb.
Whenever you find youself repeating code in a script, look for an opportunity to use a loop (for or while) OR to put the repeating code in a function

Since this is 'tabuler' data, I have used a table for layout.

Charles,
Your comments regarding the use of tables here would be appreciated
JDzines
02-16-2003, 10:59 PM
Thanks a million!
That's exactly what I needed. All I have to do now is have a cell at the bottom of the table that multiplys the grand total by $3.40, which I think I can handle. Although I'm not sure how to show that total as dollars and cents with the $ sign.
Nedals
02-17-2003, 12:04 AM
No cell required..

document.theform.totaldollars.value = '$' + (total * 3.40);

Maybe someone on the board knows an easy way to round the total to 2 decimal places. If no-one responds I'll give you a long winded way, or maybe you can solve the problem yourself.
JDzines
02-17-2003, 01:49 AM
Sorry for my lack of knowledge in Javascript, but I'm already using the totaldollars variable to give me my total square feet.
I'm doing pretty good so far thanks to all the help. I just need to get that last total figured.
Learning a lot in the process.
Check out what I have so far.
http://www.polarshade.com/EstimateForm.html
Thanks for the great help-

Also, is there anyway to align the text info centered in the input boxes?
JDzines
02-17-2003, 01:54 PM
Well, I tried to get that total cost to figure out but haven't had any luck. How do I have a new variable multiply the total sq. feet by 3.40 and have the input be in currency for the total cost. I guess I know what needs to be put in but not where it goes. Uggg!
Please Help, I'm almost done with this.

http://www.polarshade.com/EstimateForm.html

Thanks again-
Nedals
02-17-2003, 04:25 PM
Oh! so you want to display both total area and total dollars

in HTML:
change <input name="totaldollars"..... TO "totalarea"
add <input name="totaldollars"....

in Javascript:
Change last line of 'gettotal()' to these two lines
document.theform.totalarea.value = total;
document.theform.totaldollars.value = '$' + (total * 3.40);

Dave, I understand that the toFixed() method does not round and the Math.round() method will only round to an integer.

Update
Dave. Ignore this. toFixed() works perfectly. I did a search on Google (my documentation didn't list this function) and ended up with some rubbish about it not rounding. But it does and it works well!. Thanks.
JDzines, you may have the pleasure of incorporation this in the format function.
HINT: val = (val-0).toFixed(2);
(val-0) to make val a numeric value not a string!


I use this for currency...

// Rounds and formats 'val' to 'n' decimal places (returns 0.00 on negative numbers.)
function format(val,n) {
// Test for numeric, Return 0.00 if fail or '0'
var re = /^\d+\.?\d*$/
if ((!re.test(val)) || (val == 0)) { return '0.00' }

// Multiply 'val' by '10 to the power n'. 'Math.round' rounds to a whole number
// Convert to a string and INSERT the decimal point to keep trailing 0's
var k = Math.pow(10,n);
val = (Math.round(val*k)).toString();
re = eval("/^(\\d+)(\\d{"+n+"})$/");
return val.replace(re,"$1.$2");
}
I'm sure there must be an easier way!!
JDzines
02-17-2003, 04:49 PM
Is this how it should look?

Javascript
<script type="text/javascript">
<!--
function validate(thevalue) {
var re = /^\d+(\.[0|5])?$/;
// regular expression (regex) that checks inputted value is in the form (nn, nn.0, or nn.5)
// ^ beginning of value
// \d+ decimal char (0..9); + one or more times
// (\.[0|5])? () group together; \. decimal point; [0|5] must be 0 or 5; ? group occurs zero or 1 time only
// $ end of value
if (!re.test(thevalue)) { alert('This value must be rounded to the nearest 0.5 feet') }
}

//Compute subtotal and get grand total.
function gettotal(wid,hgt,result) {
var total = 0;
// computes the subtotal and put result in right-hand cell.
document.theform[result].value = document.theform[wid].value * document.theform[hgt].value;
// total cells - number of cells not included in tabular section. 7 (including buttons) in this case
var imax = (document.theform.elements.length - 1)/4;
for (i=0; i<imax; i++) {
total += (document.theform.elements[(i*4)+3].value - 0);
// -0 to ensure the value treated as a number (not a string)
}
document.theform.totalarea.value = total;
document.theform.totaldollars.value = '$' + (total * 3.40);

}


//-->
</script>



HTML Total Area cell and Total Cost Cell
<td colspan=3><div align="right"><strong><font face="Arial, Helvetica, sans-serif">Total
Sq. Ft.</font></strong></div></td>
<td><input name="totalarea" type="text"></td>
</tr>
<tr>
<td colspan=3> <div align="right"><font face="Arial, Helvetica, sans-serif"><strong>Total
Cost</strong></font></div></td>
<td><div align="left"><input name="totaldollars" type="text">

</div></td>
Nedals
02-17-2003, 05:26 PM
Yes, that should do it.
You could add that format function if you want to. Just add the function to your script and change the last line in the gettotal() function to...

var dollars = format((total*340),2);
document.theform.totaldollars.value = '$' + dollars;

and that will give you $nnn.nn rounded to the nearest cent.
JDzines
02-17-2003, 05:34 PM
I tried running the page and it came up with errors from the line
total += (document.theform.elements[(i*4)+3].value - 0);

Does something need to be changed here?

Boy, this turning out to be more difficult than I thought.
Nedals
02-17-2003, 05:46 PM
My guess..
When you added that new input field, you also needed to subtract one more from the imax value.

imax = (total_number_of_fields) - (number_of_fields_NOT_in_tabular_section)
JDzines
02-17-2003, 08:08 PM
Here's what I have now for my javascript. I know I'm missing a line for the var. but where???? It's running fine without errors finally but the Totals both come out to zero.
--------------------------------------------------------------
<script type="text/javascript">
<!--
function validate(thevalue) {
var re = /^\d+(\.[0|5])?$/;
// regular expression (regex) that checks inputted value is in the form (nn, nn.0, or nn.5)
// ^ beginning of value
// \d+ decimal char (0..9); + one or more times
// (\.[0|5])? () group together; \. decimal point; [0|5] must be 0 or 5; ? group occurs zero or 1 time only
// $ end of value
if (!re.test(thevalue)) { alert('This value must be rounded to the nearest 0.5 feet') }
}

//Compute subtotal and get grand total.
function gettotal(wid,hgt,result) {
var total = 0;
// computes the subtotal and put result in right-hand cell.
document.theform[result].value = document.theform[wid].value * document.theform[hgt].value;

document.theform.totalarea.value = total;
document.theform.totaldollars.value = '$' + (total * 3.40);
}
//-->
</script>
Nedals
02-18-2003, 01:04 PM
ZDzines...
I've probably given you more help than I REALLY should but when I saw your initial code I thought I would put you back on track. Now it's your turn.
As another member said: Programming is fun!
BUT... 1/3 of the project time is spent planning, 1/3 coding, and 1/3 DEBUGGING

Please read and UNDERSTAND the code I sent you. I included a few comments to help you understand what's going on.
The reason the total = 0 is that you have removed the 'for' loop that gets the total!!!

TIP: When debugging, insert an alert() to check for the values you expect. (and remove it when everything works!)
eg:...
var imax = (document.theform.elements.length - 1)/4;
alert(imax); // Add an alert() to check the value of imax (must be integer and equal to the number of rows in your table.)
for (i=0; i<imax; i++) {
total += (document.theform.elements[(i*4)+3].value - 0);
// -0 to ensure the value treated as a number (not a string)
}
JDzines
02-22-2003, 09:11 AM
Hi there! First of all, you're right, I got way too much help on this without first understanding what's going on . I'm going to take a Javascript class the first chance I get. I would appreciate it if you could just explain to me what these lines are doing and what the numbers pertain to in my form. I think this what I should've asked in the first place.
---------------------------------------------------------------


var imax = (document.theform.elements.length - 1)/4;
for (i=0; i<imax; i++) {
(IN THIS LINE WHAT DOES -1 AND 4 REPRESENT)
---------------------------------------------------------------------
total += (document.theform.elements[(i*4)+3].value - 0);
// -0 to ensure the value treated as a number (not a string)
}
(IN THIS SECTION i * 4+3, WHAT IS THE 4 AND 3 REPRESENTING?)
--------------------------------------------------------------------
document.theform.totalarea.value = total;
document.theform.totaldollars.value = '$' + (total * 3.40);

}
Nedals
02-22-2003, 02:17 PM
In your page you have 4 columns of <input...> elements followed by some additional <input...> elements below

var imax = (document.theform.elements.length - 2)/4;
//Gets the TOTAL number of form elements (input, submit, button, select(none in your case), etc).
//Now we subract the number of elements NOT include in the 4 columns
//(In my example (2), totalarea & totaldollars; In your original it would be 7, totalarea, totaldollars, name, address, submit, clear, and one-other; as I recall)
//You now have the number of cells included in the 4 columns ONLY.
//This is the divided by 4 to give to you the number of rows. (imax is the number of rows)

//The FOR loop will now add a value to the total for each row. The amount to add is in the 4th element in each row.
for (i=0; i<imax; i++) {
&nbsp;&nbsp;//i increments from row=0 to row<imax; (the number of rows)
&nbsp;&nbsp;total += (document.theform.elements[(i*4)+3].value - 0);
&nbsp;&nbsp;// -0 to ensure the value treated as a number (not a string)
&nbsp;&nbsp;//The first element in row 1 of your table is element[0], the subtotal element is element[3]
&nbsp;&nbsp;//The first element in row 2 of your table is element[4], the subtotal element is element[7], etc.
&nbsp;&nbsp;//When i = 0; we want element[3] (i*4)+3 = 3
&nbsp;&nbsp;//When i = 1; we want element[7] (i*4)+3 = 7, etc.

}
document.theform.totalarea.value = total;
document.theform.totaldollars.value = '$' + (total * 3.40);
JDzines
02-23-2003, 10:45 AM
Hey thanks! You're a good teacher. That explained it perfectly. I made a couple little changes and the form worked fine. One thing I did notice is that people can go back and change their Height and Width numbers after hitting the calculate button and if they forget to hit calculate again the Sq. Ft total for that row will be off. Do you think this could be a problem or should I not worry about it?
Thanks again for all your help.