Question

I have html form with arrays:

     <form method="post" id="formaa" name="form">

    <div id="fields">
    <div id="divas1" class="row">
<a href="#" id="did1" onClick="d(this);"><img src="d.jpg" /></a><a href="#" id="uid1" onClick="u(this);">
<img src="u.jpg" /></a><input type="text" name="ite[]" id="item" /><input type="text" name="q[]" id="quantity" class="quant" size="3" />
<input type="text" name="pr[]" id="price" size="10" class="kaina" onkeyup="update();"/><input type="text" name="sum[]" id="suma" size="10" disabled="disabled"/></div>
    </div>
    <br />
    <input type="button" name="nw" id="new" value="ADD" onClick="naujas('laukeliai');" /><br />
    Total: <input type="text" name="sumaa[]" id="suma" size="10" disabled="disabled"/>
    </form>

Each time I push forms ADD button, inside the <div id="fields"> is included new div block <div id=divas(i++)> I need multiply qp[] and pr[] values and dynamicaly add to sum field, need do multiply price and quantity of each product seperately and get final each product price (not all products total).

first tried to get all values and filter these two, but couldnt figure out…

var form = document.getElementsByName('form')[0];
var inputs = form.getElementsByTagName('input');
for (var i = 0, j = inputs.length; i < j; i++) {
    var element = inputs[i];
    alert(element.value);
}

How to extract from this array only needed values and multiply? Thanks for advices.

Answer 1

Assuming you want to generate the sum of the prices for all the products and quantities you bought, you would first rewrite your HTML as:

<form id="example_form">
<div class="row">
  <input type="text" name="item" class="item"></input>
  <input type="text" name="quant" class="quant"></input>
  <input type="text" name="price" class="price"></input>
</div>
<div class="row">
  <input type="text" name="item" class="item"></input>
  <input type="text" name="quant" class="quant"></input>
  <input type="text" name="price" class="price"></input>
</div>    
<!-- ... many more rows -->
<input type="text" disabled id="sum" name="sum"></input>
</form>

Use jQuery to make field access easier. Using JQuery, you would use the following JS:

function update() {
  var total = 0;
  $("#example_form div.row").each(function(i,o){
    total += $(o).find(".quant").val() *
        $(o).find(".price").val();
  });
  $("#example_form #sum").val(total);
}

This will update totals for you. To do this each time any number is changed, you would need to register it with the corresponding fields, using something like

$("#example_form div.row input").change(update);

Have I convinced you of using JQuery? See it working at http://jsfiddle.net/UnYJ3/2/