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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New Coder
    Join Date
    Oct 2010
    Posts
    99
    Thanks
    10
    Thanked 1 Time in 1 Post

    Sum fields on multiple forms?

    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:
    Code:
    <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?

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Well, of course it is possible, and it does not matter that the textboxes are within different forms.

    Code:
    <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
    Last edited by Philip M; 11-19-2010 at 03:56 PM.

  • #3
    New Coder
    Join Date
    Oct 2010
    Posts
    99
    Thanks
    10
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Philip M View Post
    Well, of course it is possible, and it does not matter that the textboxes are within different forms.

    Code:
    <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.

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    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.
    Last edited by Philip M; 11-19-2010 at 04:21 PM.

  • #5
    New Coder
    Join Date
    Oct 2010
    Posts
    99
    Thanks
    10
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Philip M View Post
    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:

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

  • #6
    New Coder
    Join Date
    Oct 2010
    Posts
    99
    Thanks
    10
    Thanked 1 Time in 1 Post
    I got it!

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

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

    Thank so much Phillip!

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    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.):-

    Code:
    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.
    Last edited by Philip M; 11-19-2010 at 04:51 PM.

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Quote Originally Posted by rtown View Post
    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.

  • #9
    New Coder
    Join Date
    Oct 2010
    Posts
    99
    Thanks
    10
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Philip M View Post
    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.

  • #10
    New Coder
    Join Date
    Oct 2010
    Posts
    99
    Thanks
    10
    Thanked 1 Time in 1 Post
    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?

  • #11
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    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);
    Last edited by Philip M; 11-19-2010 at 07:28 PM.

  • Users who have thanked Philip M for this post:

    rtown (11-19-2010)

  • #12
    New Coder
    Join Date
    Oct 2010
    Posts
    99
    Thanks
    10
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Philip M View Post
    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!

  • #13
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    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

  • #14
    New Coder
    Join Date
    Oct 2010
    Posts
    99
    Thanks
    10
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Philip M View Post
    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!

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

  • #15
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Multi row forms

    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?


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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