...

View Full Version : Sum fields on multiple forms?



rtown
11-19-2010, 03:29 PM
I have been looking around on the webs but have not found anything. I can find how to add multiple fields, but what if they reside on different forms on the same page?

For example, here is my code with two forms:

<FORM name="form1">
<b>Size</b><input type="text" size="12" value="" name="size">*
<b>Qty</b><input type="text" size="4" value="" name="qty" onkeyup="convert_to_feet(this.form);calculate_lbs(this.form)">&nbsp;<b>-</b>
<input type=text size="10" value="" name="a1" onkeyup="convert_to_feet(this.form);calculate_lbs(this.form)"><b>mm</b>
<input type="text" size="15" value="" name="xtra">*
<input type="hidden" size="4" value="304.8" name="b1">
<input type="hidden" value="0" name="ans1" size="10">
<input type="text" size="5" value="0" name="w1" onkeyup="convert_to_feet(this.form);calculate_lbs(this.form)"><b>Lbs/Foot</b>&nbsp;&nbsp;&nbsp;&nbsp;
<input type="text" size="7" value="0" name="tw1" readonly="readonly"><b>Total Lbs<b>&nbsp;&nbsp;&nbsp;&nbsp;
</FORM>

<FORM name="form2">
<b>Size</b><input type="text" size="12" value="" name="size">*
<b>Qty</b><input type="text" size="4" value="" name="qty" onkeyup="convert_to_feet(this.form);calculate_lbs(this.form)">&nbsp;<b>-</b>
<input type=text size="10" value="" name="a1" onkeyup="convert_to_feet(this.form);calculate_lbs(this.form)"><b>mm</b>
<input type="text" size="15" value="" name="xtra">*
<input type="hidden" size="4" value="304.8" name="b1">
<input type="hidden" value="0" name="ans1" size="10">
<input type="text" size="5" value="0" name="w1" onkeyup="convert_to_feet(this.form);calculate_lbs(this.form)"><b>Lbs/Foot</b>&nbsp;&nbsp;&nbsp;&nbsp;
<input type="text" size="7" value="0" name="tw1"><b>Total Lbs<b>&nbsp;&nbsp;&nbsp;&nbsp;
</FORM>

In this example, I want to sum the two fields named "tw1" (the last field on each form) into a text box.

Is this possible? :)

Philip M
11-19-2010, 03:48 PM
Well, of course it is possible, and it does not matter that the textboxes are within different forms.


<input type = "button" value = "Add Totals" onclick = "addem()">
<input type = "text" id = "total">

<script type = "text/javascript">
function addem() {
var a = Number(document.form1.tw1.value);
var b = Number(document.form2.tw1.value);
document.getElementById("total").value = a +b;
}
</script>


“I don't pretend we have all the answers. But the questions are certainly worth thinking about..” - Arthur C. Clarke quotes (English Writer of science fiction, b.1917

rtown
11-19-2010, 03:55 PM
Well, of course it is possible, and it does not matter that the textboxes are within different forms.


<input type = "button" value = "Add Totals" onclick = "addem()">
<input type = "text" id = "total">

<script type = "text/javascript">
function addem() {
var a = parseFloat(document.form1.tw1.value);
var b = parseFloat(document.form2.tw1.value);
document.getElementById("total").value = a +b;
}
</script>


I don't pretend we have all the answers. But the questions are certainly worth thinking about.. - Arthur C. Clarke quotes (English Writer of science fiction, b.1917

Wow, thanks Phillip, but how do I call for this function to work? I have added "addem" to the onkeyup, but it doesnt work... something I must be missing.

Philip M
11-19-2010, 04:04 PM
Well, it makes no sense to calculate a grand total until the form calculations have been completed.

Call addem() in both forms thus:-

input type="text" size="7" value="0" name="tw1" onchange = "addem()" >

or

<input type="text" size="5" value="0" name="w1" onkeyup="convert_to_feet(this.form);calculate_lbs(this.form); addem() ">

Although it is not incorrect to have multiple forms with the same element names such as qty, it is not considered good practice.

The trouble with using onkeyup is that the calculated values change with each keystroke. This can be annoying for the user.

rtown
11-19-2010, 04:11 PM
Although it is not incorrect to have multiple forms with the same element names such as qty, it is not considered good practice.

Thats true, but I did that so all the forms will run off one function, rather than re-writing it.

It doesnt seem to be adding the fields... perhaps there is something I have done wrong. If you have a minute, maybe you can see what I am missing here:


<SCRIPT LANGUAGE="JavaScript">
function convert_to_feet(form) {
a1=eval(form.a1.value)
b1=eval(form.b1.value)
qty=eval(form.qty.value)
c1=a1/b1*qty
form.ans1.value = c1
}
function calculate_lbs(form) {
ans1=eval(form.ans1.value)
w1=eval(form.w1.value)
tc1=ans1*w1
form.tw1.value = tc1
}
function addem() {
var a = parseFloat(document.form1.tw1.value);
var b = parseFloat(document.form2.tw1.value);
document.getElementById("total").value = a +b;
}
</SCRIPT>
<style>
input, select { background-color:transparent; border: 1px solid #CCC; font-size: 12px; }
body { font-size: 12px; }
</style>
</head>

<BODY bgcolor="#ffffff">
<CENTER>

<table>
<tr>
<td>


<FORM name="form1">
<b>Size</b><input type="text" size="9" value="" name="size">*
<b>Qty</b><input type="text" size="2" value="" name="qty" onkeyup="convert_to_feet(this.form);calculate_lbs(this.form)">&nbsp;<b>-</b>
<input type=text size="5" value="" name="a1" onkeyup="convert_to_feet(this.form);calculate_lbs(this.form)"><b>mm</b>
<input type="text" size="10" value="" name="xtra">*
<input type="hidden" size="2" value="304.8" name="b1">
<input type="hidden" value="0" name="ans1" size="10">
<input type="text" size="5" value="0" name="w1" onkeyup="convert_to_feet(this.form);calculate_lbs(this.form)"><b>Lbs/Foot</b>&nbsp;&nbsp;
<input type="text" size="7" value="0" name="tw1" readonly="readonly" onchange="addem()"><b>Total Lbs</b>&nbsp;&nbsp;&nbsp;&nbsp;
</FORM>

<FORM name="form2">
<b>Size</b><input type="text" size="9" value="" name="size">*
<b>Qty</b><input type="text" size="2" value="" name="qty" onkeyup="convert_to_feet(this.form);calculate_lbs(this.form)">&nbsp;<b>-</b>
<input type=text size="5" value="" name="a1" onkeyup="convert_to_feet(this.form);calculate_lbs(this.form)"><b>mm</b>
<input type="text" size="10" value="" name="xtra">*
<input type="hidden" size="2" value="304.8" name="b1">
<input type="hidden" value="0" name="ans1" size="10">
<input type="text" size="5" value="0" name="w1" onkeyup="convert_to_feet(this.form);calculate_lbs(this.form)"><b>Lbs/Foot</b>&nbsp;&nbsp;
<input type="text" size="7" value="0" name="tw1" readonly="readonly" onchange="addem()"><b>Total Lbs</b>&nbsp;&nbsp;&nbsp;&nbsp;
</FORM>

</td>
</tr>

<tr align="right">
<td>
<form name="total">
<br />
<b>Page Total Lbs</b><input type="text" value="0" name="total" size="10">
</form>
</td>
</tr>
</table>

rtown
11-19-2010, 04:26 PM
I got it!

I just changed:
document.getElementById("total").value = a +b;

To:
document.total.total.value = a +b;

Thank so much Phillip! :) :) :)

Philip M
11-19-2010, 04:39 PM
You functions have many errors (never use eval()!! eval() determines if the argument is a valid string, then eval() parses the string looking for JavaScript code. If it finds any JavaScript code, it will be executed.):-


function convert_to_feet(form) {
var a1=Number(form.a1.value);
//alert (a1); // for testing
var b1=Number(form.b1.value);
alert (b1); // for testing
var qty=Number(form.qty.value);
alert (qty); // for testing
var c1=a1/b1*qty;
form.ans1.value = c1;
}

function calculate_lbs(form) {
var ans1=Number(form.ans1.value);
var w1=Number(form.w1.value);
var tc1=ans1*w1;
form.tw1.value = tc1;
}

You should not perform the calculations multiple times. It should be obvious that the first calculation is performed before the textboxes have been filled with values.

Philip M
11-19-2010, 04:42 PM
I got it!

I just changed:
document.getElementById("total").value = a +b;

To:
document.total.total.value = a +b;

Thank so much Phillip! :) :) :)

I am amazed that it works using exactly the same name for a field as the name of the form. It certainly will not work in IE. Fix that at once.

rtown
11-19-2010, 05:07 PM
I am amazed that it works using exactly the same name for a field as the name of the form. It certainly will not work in IE. Fix that at once.

Works in IE, firefox and chrome on my end.. Its just for personal and office use, so its not a big deal if it has poor coding.. the bottom line is that it works as is, and pretty well to I might add! haha.
:thumbsup:

rtown
11-19-2010, 07:16 PM
Just one more quick question to finish this thread, I am wondering if there is a way to round the result from the adding to zero decimal places?

I have found lots of javascript to round number but I have no idea how to implement it into an existing function.

Anyone have any advice? :)

Philip M
11-19-2010, 07:26 PM
You mean round to a whole number? Or truncate to a whole number?

To round to nearest integer:-

document.total.total.value = Math.round (a+b);

To round down:-

document.total.total.value = Math.floor (a+b);

rtown
11-19-2010, 08:02 PM
You mean round to a whole number? Or truncate to a whole number?

To round to nearest integer:-

document.total.total.value = Math.round (a+b);

To round down:-

document.total.total.value = Math.floor (a+b);

gah.. its so easy! i should have been able to figure that out.

Thanks! :D

Philip M
11-20-2010, 08:39 AM
document.total.total.value =

When you name/id two or more HTML elements with the same name/identifier, the corresponding JavaScript objects are put into an array of that name, so they can be handled as a group. Why use the same names? Only a few types of elements are designed to be used in groups (radio buttons, e.g.). Identifiers should be unique.

I am sure that you will encounter problems when the form is submitted to a server-side script if you do not fix that.

"It works for me" - Famous last words of inexperienced web-designer

rtown
11-22-2010, 10:04 PM
document.total.total.value =

When you name/id two or more HTML elements with the same name/identifier, the corresponding JavaScript objects are put into an array of that name, so they can be handled as a group. Why use the same names? Only a few types of elements are designed to be used in groups (radio buttons, e.g.). Identifiers should be unique.

I am sure that you will encounter problems when the form is submitted to a server-side script if you do not fix that.

"It works for me" - Famous last words of inexperienced web-designer

The form will not be submitted anywhere, just printed out.

I have been doing web design full time for about 5 years, asp php bla bla bla. Just recently moved into a new industry. This script is for my personal use only, and makes my job 10x faster. So, in this case I really dont care if the code is not up to standard, because, well, it works for me! :D

Been using it since my last post daily, works flawlessly.

mdwpilot
12-06-2010, 10:14 PM
I'm using Rails to create a multirow form of the same model (donation)... i would like to show the total of the donation.donation_amount at the bottom of the form dynamically updated but i don't know how many rows will be on the form until runtime.

The form would look like:
Donation To / Donation Amt

Charity A [Input box id='donation[1][donation_amt]']

Charity C [Input Box id='donation[2][donation_amt]']

...

Total [Disabled input box with total]


Note, the charity selections have been preselected and display in alpha order not by id.
Any ideas?

Old Pedant
12-06-2010, 10:35 PM
Bring up the page in the browser, click on the VIEW menu of the browser, click on the SOURCE or PAGE SOURCE menu item.

Copy/paste the *relevant* HTML that you see from that view to here.

And next time, post your own new thread. Don't hijack a possibly irrelevant older thread.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum