Need Help in adding values of Multiple Fields containing same name using javascript

@yaseenJul 08.2012

Hey guys I am new in Javascript as well as in this site. I have a small problem hope you guys can help me out

I will give a small example of the problem

[code=html]<html><body> <form name=”form”> <input type=”button” onclick=”addInput()” name=”add” value=”Add more rows” /> </form> <div id=”row”> <input name=”qty” type=’text’ value=”” /> <br /> // This is the quantity field <input name=”price” type=’text’ value=”” /> // this is price field <input name=”total” type=’text’ value=”” /> // This field should multiply the values of qty and price </div> <div id=”row”> <input name=”qty” type=’text’ value=”” /> <br /> // This is the quantity field <input name=”price” type=’text’ value=”” /> // this is price field <input name=”total” type=’text’ value=”” /> // This field should multiply the values of qty and price </div> <input name=”grandTotal” type=’text’ value=” /> </body> </html>[/code]

Now in the above code there are two set of rows containing input fields
I have used the same name in the input field cuz in future if a user clicks on a Add more row he can have as many as he wants so how do I apply addition in all the generated fields dynamically using javascript and display in in the an answer input. this is just an example I will have more fields in the same form but just to be on point I have written this example.

Now what I want to know here is how to multiply the qty and price field and display the answer in the total field. And then add the total fields and display the answer in grandTotal field.

Hope I didn’t confuse and you guys and would provide me an easy solution.

to post a comment

JavaScript

6 Comments(s) _↴

@vwphillipsJul 08.2012 — #

[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
 <head>
 <title></title>
 <script type="text/javascript">
 /*<![CDATA[*/
 
 function addInput(frm){
 var frm=document.forms[0],div=frm.getElementsByTagName('DIV')[0].cloneNode(true);
 frm.insertBefore(div,frm.getElementsByTagName('A')[0]);
 }
 
 function Totals(){
 var frm=document.forms[0],flds=[frm['qty'],frm['price'],frm['total']],total=0;
 for (var z0=0;z0<flds[0].length;z0++){
 if (isFinite(flds[0][z0].value*1)&&isFinite(flds[1][z0].value*1)){
 flds[2][z0].value=flds[0][z0].value*flds[1][z0].value;
 total+=flds[2][z0].value*1;
 }
 }
 frm['grandTotal'].value=total;
 }
 /*]]>*/
 </script></head>
 
 <body>
 <html><body>
 <form name="form">
 <input type="button" onclick="addInput()" name="add" value="Add more rows" />
 <div id="row">
 <span>quantity</span><input name="qty" type='text' value='' />
 <span>price</span><input name="price" type='text' value='' />
 <span>total</span><input name="total" type='text' value='' />
 </div>
 <div id="row">
 <span>quantity</span><input name="qty" type='text' value='' />
 <span>price</span><input name="price" type='text' value='' />
 <span>total</span><input name="total" type='text' value='' />
 </div>
 <a></a>
 <input name="grandTotal" type='text' value='' />
 <input type="button" name="" value="Totals" onmouseup="Totals();" />
 </form>
 </body>
 </html>
 [/CODE]

@toicontienJul 08.2012 — #Here's another, more object oriented take that should be easy to change in the future to add the ability to create new rows:

[CODE]<!DOCTYPE HTML>
 <html>
 <body>
 
 <form id="products_form">
 <button type="button" data-action="addRows">Add more rows</button>
 <table>
 <thead>
 <tr>
 <th>Quantity</th>
 <th>Price</th>
 <th>Total</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td><input name="qty" type='text' value=''></td>
 <td><input name="price" type='text' value=''></td>
 <td><input name="total" type='text' value=''></td>
 </tr>
 <tr>
 <td><input name="qty" type='text' value=''></td>
 <td><input name="price" type='text' value=''></td>
 <td><input name="total" type='text' value=''></td>
 </tr>
 </tbody>
 </table>
 <input name="grandTotal" type='text' value=''>
 </form>
 
 <script type="text/javascript">
 function ProductsForm(form) {
 this.form = form;
 }
 ProductsForm.prototype = {
 init: function() {
 var that = this;
 this.form = (typeof this.form === "string") ? document.getElementById(this.form) : this.form;
 this.form.addEventListener("click", function(event) {
 that.handleClick(event);
 });
 },
 handleClick: function(event) {
 var action = event.target.getAttribute("data-action")
 if (action) {
 this[action](event);
 }
 },
 addRows: function(event) {
 event.stopPropagation();
 event.preventDefault();
 this.calculateTotal();
 },
 calculateTotal: function() {
 var table = this.form.getElementsByTagName("tbody")[0];
 var i = 0, length, grandTotal = 0, total = 0, quantity;
 var quantityField, priceField, totalField, inputs;
 
   for (i = 0, length = table.rows.length; i < length; i++) {
   total = 0;
   inputs = table.rows[i].getElementsByTagName("input");
   quantityField = inputs[0];
   priceField = inputs[1];
   totalField = inputs[2];
 
   if (!this.validateField(quantityField) || !this.validateField(priceField) || !this.validateField(totalField)) {
   return;
   }
 
   quantity = Number(quantityField.value);
   price = Number(priceField.value);
   total = quantity * price;
   totalField.value = total;
   grandTotal += total;
   }
 
   this.form.elements.grandTotal.value = grandTotal;
  },
  validateField: function(field) {
   if (isNaN(field.value)) {
   alert("Please enter a valid number");
   field.select();
   field.focus();
   return false;
   }
 
   return true;
  }
 };
 
 var form = new ProductsForm(document.getElementById("products_form")).init();
 
 </script>
 
 </body>
 </html>
 [/CODE]

@yaseenauthorJul 09.2012 — #thanx ? I appreciate the effort shown from both of you guys. As a beginner in this language it really feels easy to get ahead when there are guys like you to help ?

@yaseenauthorJul 09.2012 — #hey vwphillips can you also provide a script to delete row in front of each row and last but not least one more field of discount. I hope you dont mind. I find your scripts are really easy for a beginner to learn.

@toicontienJul 09.2012 — #Correction, the init() method should be:

[CODE]	init: function() {
 var that = this;
 this.form = (typeof this.form === "string") ? document.getElementById(this.form) : this.form;
 this.form.addEventListener("click", function(event) {
 that.handleClick(event);
 });
 
   [B]return this;[/B]
  },[/CODE]

@mattmuApr 11.2013 — #

[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
 <head>
 <title></title>
 <script type="text/javascript">
 /*<![CDATA[*/
 
 function addInput(frm){
 var frm=document.forms[0],div=frm.getElementsByTagName('DIV')[0].cloneNode(true);
 frm.insertBefore(div,frm.getElementsByTagName('A')[0]);
 }
 
 function Totals(){
 var frm=document.forms[0],flds=[frm['qty'],frm['price'],frm['total']],total=0;
 for (var z0=0;z0<flds[0].length;z0++){
 if (isFinite(flds[0][z0].value*1)&&isFinite(flds[1][z0].value*1)){
 flds[2][z0].value=flds[0][z0].value*flds[1][z0].value;
 total+=flds[2][z0].value*1;
 }
 }
 frm['grandTotal'].value=total;
 }
 /*]]>*/
 </script></head>
 
 <body>
 <html><body>
 <form name="form">
 <input type='text' id='userInput' value='Enter Percentage Change' />
 <div id="row">
 
 <input type="text" name="Default_Price[]" value="9.000000" >
 
 </div>
 <div id="row">
 <input type="text" name="Default_Price[]" value="94.000000" >
 
 </div>
 <a></a>
 
 <input type="button" name="" value="Update" onmouseup="Totals();" />
 </form>
 </body>
 </html>[/CODE]

[/QUOTE]

I am a novice at best with Javascript and any help would be appreciated. I am having a hard time trying to figure out what I need to do here. I ran across this thread and I modified the html form to display what I am trying to do, however everything else is just a copy past from a solution provided by vwphillips. I am dynamically generating a form using php and I want to be able to adjust all prices in the form by entering a Percentage in the first field then applying the percent of change to all prices on the form positive or negative.

Also in #JavaScript _↴

Browser blink?Add links to images in an array onMouseOver/onMouseOut events

Success!

Help @yaseen spread the word by sharing this article on Twitter...

Tweet This

Need Help in adding values of Multiple Fields containing same name using javascript

6 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Need Help in adding values of Multiple Fields containing same name using javascript

6 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #JavaScript _↴