www.webdeveloper.com
Results 1 to 6 of 6

Thread: Html Form that needs to have sum function

  1. #1
    Join Date
    May 2009
    Location
    NYC
    Posts
    2

    Question Html Form that needs to have sum function

    Good Day All

    I have a form built in HTML that has a text field area for people to place qty of items ordered I need to be able to add all text boxes together there are some 200 items on the list

    sum a total at the bottom of the list in a Separate Box Label total

    Details There a 7 Columns (the seventh column is the text box with a max char of 4 (1-9999) The Only active text area with the exception of 2 radio buttons submit & reset buttons on the bottom.

  2. #2
    Join Date
    May 2006
    Location
    Odenton, MD
    Posts
    1,449
    can't help you too much without looking at the source code. however, a tip. give each element where user type the quantity the same name. doing so generate a node list when you read the form object and then access the element by it's name (form_object.element_name). iterate the node list by adding each value onto a variable. finally set the total field value to whatever contain the variable.

    if you want to show us the code, attach it into a file. i will no go copy pasting a long code.

  3. #3
    Join Date
    May 2009
    Location
    NYC
    Posts
    2

    Question code

    Here is a sectional of the code I hope this is n't to long the attached text file is the complete section


    <tr bordercolor="#FFFFFF">
    <th scope="row"><div align="center" class="style7"></div></th>
    <td><div align="center" class="style47">WHMO</div></td>
    <td><div align="center" class="style47">5-20 WH </div></td>
    <td class="style29"><div align="center" class="style10">WOLF'S HEAD SUPER DUTY 5W20 </div></td>
    <td><div align="center" class="style5 style29 style39"># per case / ? </div></td>
    <td colspan="2" class="style25"><div align="center">
    </div></td>
    <td class="style25"><div align="center">
    <input name="numeric" type="number" id="numeric" size="8" maxlength="4">
    </div></td>
    </tr>
    Attached Files Attached Files

  4. #4
    Join Date
    May 2006
    Location
    Odenton, MD
    Posts
    1,449
    what i suggested you should work. enclose your table into a form element so you can access each elements more easily. here is a very striped down sample of what you have to implement.
    Code:
    <form>
    <input name="numeric" type="text" size="8" maxlength="4" />
    <input name="numeric" type="text" size="8" maxlength="4" />
    <input name="numeric" type="text" size="8" maxlength="4" />
    <input name="numeric" type="text" size="8" maxlength="4" />
    <input name="numeric" type="text" size="8" maxlength="4" />
    <input name="total" type="text" size="8" readonly="readonly" />
    <input type="button" value="Calculate" onclick="calculate(this.form);" />
    </form>
    
    <script type="text/javascript">
    function calculate(form){
    var sum = 0;
    for(var i = 0; i < form.numeric.length; i++)sum += Number(form.numeric[i].value);
    form.total.value = sum;
    }
    </script>

  5. #5
    Join Date
    Jul 2013
    Posts
    1

    Sum Function in form fields

    Quote Originally Posted by ZeroKilled View Post
    what i suggested you should work. enclose your table into a form element so you can access each elements more easily. here is a very striped down sample of what you have to implement.
    Code:
    <form>
    <input name="numeric" type="text" size="8" maxlength="4" />
    <input name="numeric" type="text" size="8" maxlength="4" />
    <input name="numeric" type="text" size="8" maxlength="4" />
    <input name="numeric" type="text" size="8" maxlength="4" />
    <input name="numeric" type="text" size="8" maxlength="4" />
    <input name="total" type="text" size="8" readonly="readonly" />
    <input type="button" value="Calculate" onclick="calculate(this.form);" />
    </form>
    
    <script type="text/javascript">
    function calculate(form){
    var sum = 0;
    for(var i = 0; i < form.numeric.length; i++)sum += Number(form.numeric[i].value);
    form.total.value = sum;
    }
    </script>
    _________________________________

    Hi, in the above code it says "onclick", but what if i don't want a button. I want the value to be by default, that is after entering the numbers in form fields the last field where we getting the sum value, that sum value should come by default. can someone help pleaseeee?

  6. #6
    Join Date
    Feb 2013
    Posts
    13
    Instead of the button, i think you could add this to each of your input fields onChange="calculate(this.form);" or onKeyup="calculate(this.form);" ....could be wrong but it should work and the onChange might only be fore select boxes. GL

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles