qty x price on multiple rows

[jimbob_2011]

Hello,

 

I've got a form and some script with adds new rows contenting item name, qty and the price.

 

What I would like to be able to do, is add the extra rows, calculate the total and then display it.

 

This is the script ...

 

<script type="text/javascript">
$(document).ready(function(){

var counter = 2;

$("#add").click(function () {
if(counter==31){
alert("Limit of 30 has been reached");
return false;
}

$("#textBoxes").html($("#textBoxes").html() + "<div id='d"+counter+"' class='invoice_row'><div class='invoice_row_item'><input name='row["+counter+"]' type='textbox' id='row"+counter+"' class='invoice_input'></div><div class='invoice_row_qty'><input name='qty["+counter+"]' type='textbox' id='qty"+counter+"' class='invoice_input' value='1'></div><div class='invoice_row_price'><input name='price["+counter+"]' type='textbox' id='price"+counter+"' class='invoice_input'></div></div>\n");	

++counter;

});

$("#remove").click(function () {
if(counter==2){
alert("At least 1 box must be present");
return false;
}
--counter;
$("#d"+counter).remove();
});
});

</script>

 

the above then gets added on to this ...

 

        <div id='d1' class="invoice_row">
        	<div class="invoice_row_item"><input name="row[1]" type="textbox" id="row1" class="invoice_input"></div>
        	<div class="invoice_row_qty"><input name="qty[1]" type="textbox" id="qty1" class="invoice_input" value="1"></div>
            <div class="invoice_row_price"><input name="price[1]" type="textbox" id="price1" class="invoice_input"></div>        
        </div>

 

Thanks for any help!