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

LVL 1
Westside2004Asked:
Who is Participating?
 
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
 
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
 
Westside2004Author Commented:
Yes, that works.  Works fine for me.

Thank you.

Appreciated

-ws
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.