• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 483
  • Last Modified:

Javascript Looping over multiple forms

Hi,

I have this query that I am looping over.  It basically contains multiple products that I display on a page for an e-commerce site.  Each product has a quantity that the user can specifiy in a basic input box and each product has a price obviously.   I want to have a js function that will basically grab the value in that 'qty' text box, multiple it by the price for that product and give me the total.  Since there *could* be multiple products, I want to ensure the grand total at the end is a sum of each indiviudual products' total if that makes sense.  So product "A", lets say has a qty of 2 and a price of $5.00.  The total for cost for product "A", is $10.00.  So if there was another product the user wanted to get, product "B", qty of 3, price of $2.00, the total would be $6.00.  The grand total then for product "A" and product "B" is $16.00.  I want to ultimately display this at the end.  The problem seems to be around uniquely identifying each html 'qty' input field, do I append a counter or how can this be done???

It would be nice to be able to display total next to each product, and then a grand total at the bottom ideally.

My HTML:

<table width="500" border="0">
 <tr>
    <td>Quantity:</td>
    <td><input type="text" id="qty" name="qty" size="3" maxlength="3" value="" onBlur="calculateProduct();"/></td>
 </tr>
</table>

Javascript:
function calculateProduct() {
  // loop over each form ???
  for (i=1;i<document.forms.length; i++ {
   
  }
}

Thanks,

-ws

0
Westside2004
Asked:
Westside2004
1 Solution
 
Bob LearnedCommented:
Thoughts:

1) Set an ID for the table:

   <table id="table1" width="500" border="0">

2) Add a total column.

3) Get a reference to the table by id:

   var table = document.getElementById('table1');

4) Loop through the rows and get the cells:

  for (var i = 0; i < table.rows.length; i++)
  {
     var qty = table.rows[i].getElementById('qty');
  }

Bob
0
 
gops1Commented:
When you have more than one object with the same name inside a form then that element is considered in the same way as it is with an Array element. Take this example and see if this works for you.

<script language="javascript">
      var totCtr=0;
      var gTot=0;

      function getTotal(obj){
            totCtr=document.showroom.qty.length;
            gTot=0;
            for(i=0;i<totCtr;i++){
                  if(parseInt(document.showroom.qty[i].value)>0)
                        gTot=gTot+(parseInt(document.showroom.qty[i].value)*parseInt(document.showroom.cost[i].value));
            }
            document.getElementById('total').innerHTML=gTot;
      }
</script>

<table cellpadding="10" cellspacing="0" border="1">
      <form name="showroom">
      <tr>
            <td>Item Name</td>
            <td>Rate</td>
            <td>Qty</td>
      </tr>
      <tr>
            <td>Item 1</td>
            <td><input type="text" name="cost" value=""></td>
            <td><input type="text" onblur="javascript:getTotal();" name="qty" value=""></td>
      </tr>
      <tr>
            <td>Item 2</td>
            <td><input type="text" name="cost" value=""></td>
            <td><input type="text" onblur="javascript:getTotal();" name="qty" value=""></td>
      </tr>
      <tr>
            <td>Item 3</td>
            <td><input type="text" name="cost" value=""></td>
            <td><input type="text" onblur="javascript:getTotal();" name="qty" value=""></td>
      </tr>
      <tr>
            <td colspan="2">TOTAL</td>
            <td id="total">&nbsp;</td>
      </tr>
      </form>
</table>
0
 
Westside2004Author Commented:
Yes, that works.  Works fine for me.

Thank you.

Appreciated

-ws
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now