Seems my question was not clear enough. I post my own solution for my problem. It is using just jQuery and is not so generic as it would be with some additional plugin. But it acts exactly as I want, furthermore I added functionality to have ranged subforms inside the same form. Here is jsFiddle version to play with, and below is solution as a whole.
Now is possible to change row sum so that price is calculated based on it, and vice versa too.
<!DOCTYPE html>
<html>
<head>
<title>test calculated forms</title>
<meta charset=utf-8>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
.plusminus {
font-weight: bold;
font-family: monospace;
font-size: 1.3em;
border: 1px green solid;
padding: 0px 5px;
}
</style>
<script>
$(document).ready(function(){
$('.plusminus').click(
function () {
var operation = $( this ).text();
var attr = $( this ).attr('id').split('_');
var cell_id = attr[0] + '_B_' + attr[2];
var qty = $( '#' + cell_id ).val();
if ( operation == '+' ) {
$( '#' + cell_id ).val( ++qty );
} else if ( operation == '-' ) {
$( '#' + cell_id ).val( --qty );
} else {
alert( "Something wrong! " + $( this ).attr('id') );
}
recalculate_row_sum( cell_id );
}
);
$( '.form_sum' ).on( 'change', function() {
recalculate_unit_price( $( this ).attr('id') );
});
$( '.form_price' ).on( 'change', function() {
recalculate_row_sum( $( this ).attr('id') );
});
$( '.form_discount' ).on( 'change', function() {
recalculate_row_sum( $( this ).attr('id') );
});
$( '.form_qty' ).on( 'change', function() {
recalculate_row_sum( $( this ).attr('id') );
});
init_ranges();
});
// you may have many independent ranges on same form, to init them on load is init_ranges-function
function init_ranges () {
var ranges = $( '#ranges' ).val().split( '-' );
for (var i = ranges[0]; i <= ranges[1]; i++) {
init_range_rows( i );
}
}
function init_range_rows ( range ) {
var edges = $( '#R' + range ).val().split( '-' );
for (var i = edges[0]; i <= edges[1]; i++) {
recalculate_row_sum( 'R' + range + '_C_' + i );
}
}
function recalculate_unit_price ( cell_id, data ) {
var row_data = get_row_data( cell_id, data );
var unit_price = ( row_data.row_sum/(100 -row_data.discount)*100/row_data.qty ).toFixed(2);
$( '#' + row_data.range + '_C_' + row_data.row ).val( unit_price );
recalculate_range_total( cell_id, row_data );
}
function recalculate_row_sum ( cell_id, data ) {
var row_data = get_row_data( cell_id, data );
var sum = ( row_data.unit_price*(100 - row_data.discount)/100*row_data.qty ).toFixed(2);
$( '#' + row_data.range + '_E_' + row_data.row ).val( sum );
recalculate_range_total( cell_id, row_data );
}
function recalculate_range_total ( cell_id, data ) {
var row_data = get_row_data( cell_id, data );
var edges = $( '#' + row_data.range ).val().split( '-' );
var total_amount = 0;
for (var i = edges[0]; i <= edges[1]; i++) {
total_amount += $( '#' + row_data.range + '_E_' + i ).val() * 1;
}
$( '#' + row_data.range + '_total' ).val( ( total_amount ).toFixed(2) );
}
function get_row_data ( cell_id, cached_data ) {
if ( typeof cached_data === 'defined' ) {
return cached_data;
}
var row_info = cell_id.split( '_' );
var data = {
range: row_info[0],
col: row_info[1],
row: row_info[2],
unit_price: $( '#' + row_info[0] + '_C_' + row_info[2] ).val() || 0 ,
qty: $( '#' + row_info[0] + '_B_' + row_info[2] ).val() || 0,
discount: $( '#' + row_info[0] + '_D_' + row_info[2] ).val() || 0,
row_sum: $( '#' + row_info[0] + '_E_' + row_info[2] ).val() || 0
};
return data;
}
</script>
</head>
<body>
<form id="itemlist" method="post" enctype="multipart/form-data" >
<input type="hidden" id="ranges" name="ranges" value="1-3" />
<input type="text" placeholder="Item" id="R1_A_1" name="A_1" size="20" class="form_item" value="HDD Baracuda Black 2TB" />
<span id="R1_min_1" class="plusminus">-</span>
<input type="text" placeholder="Qty" id="R1_B_1" name="B_1" value="1" size="2" class="form_qty" />
<span id="R1_plus_1" class="plusminus" >+</span>
<input type="text" placeholder="Price" id="R1_C_1" name="C_1" size="5" class="form_price" value="27" />
<input type="text" placeholder="Disc." id="R1_D_1" name="D_1" size="3" class="form_discount" />
<input type="text" placeholder="Sum" id="R1_E_1" name="E_1" size="6" class="form_sum" />
<br />
<input type="text" placeholder="Item" id="R1_A_2" name="A_2" size="20" class="form_item" value="Motherboard ASus XYZ" />
<span id="R1_min_2" class="plusminus">-</span>
<input type="text" placeholder="Qty" id="R1_B_2" name="B_2" value="1" size="2" class="form_qty" />
<span id="R1_plus_2" class="plusminus" >+</span>
<input type="text" placeholder="Price" id="R1_C_2" name="C_2" size="5" class="form_price" value="46" />
<input type="text" placeholder="Disc." id="R1_D_2" name="D_2" size="3" class="form_discount" />
<input type="text" placeholder="Sum" id="R1_E_2" name="E_2" size="6" class="form_sum" />
<br />
<input type="text" placeholder="Item" id="R1_A_3" name="A_3" size="20" class="form_item" value="Memory Kingston DDR3 4GB" />
<span id="R1_min_3" class="plusminus">-</span>
<input type="text" placeholder="Qty" id="R1_B_3" name="B_3" value="1" size="2" class="form_qty" />
<span id="R1_plus_3" class="plusminus" >+</span>
<input type="text" placeholder="Price" id="R1_C_3" name="C_3" size="5" class="form_price" value="18" />
<input type="text" placeholder="Disc." id="R1_D_3" name="D_3" size="3" class="form_discount" />
<input type="text" placeholder="Sum" id="R1_E_3" name="E_3" size="6" class="form_sum" />
<br />
<input type="text" placeholder="Total Amount" id="R1_total" name="R1_total" />
<br />
<br />
<input type="text" placeholder="Item" id="R2_A_4" name="A_4" size="20" class="form_item" value="Other foo" />
<span id="R2_min_4" class="plusminus">-</span>
<input type="text" placeholder="Qty" id="R2_B_4" name="B_4" value="1" size="2" class="form_qty" />
<span id="R2_plus_4" class="plusminus" >+</span>
<input type="text" placeholder="Price" id="R2_C_4" name="C_4" size="5" class="form_price" value="18" />
<input type="text" placeholder="Disc." id="R2_D_4" name="D_4" size="3" class="form_discount" />
<input type="text" placeholder="Sum" id="R2_E_4" name="E_4" size="6" class="form_sum" />
<br />
<input type="text" placeholder="Item" id="R2_A_5" name="A_5" size="20" class="form_item" value="Other bar" />
<span id="R2_min_5" class="plusminus">-</span>
<input type="text" placeholder="Qty" id="R2_B_5" name="B_5" value="1" size="2" class="form_qty" />
<span id="R2_plus_5" class="plusminus" >+</span>
<input type="text" placeholder="Price" id="R2_C_5" name="C_5" size="5" class="form_price" value="18" />
<input type="text" placeholder="Disc." id="R2_D_5" name="D_5" size="3" class="form_discount" />
<input type="text" placeholder="Sum" id="R2_E_5" name="E_5" size="6" class="form_sum" />
<br />
<input type="text" placeholder="Total Amount" id="R2_total" name="R2_total" />
<br />
<br />
<input type="text" placeholder="Item" id="R3_A_6" name="A_6" size="20" class="form_item" value="Some X" />
<span id="R3_min_6" class="plusminus">-</span>
<input type="text" placeholder="Qty" id="R3_B_6" name="B_6" value="1" size="2" class="form_qty" />
<span id="R3_plus_6" class="plusminus" >+</span>
<input type="text" placeholder="Price" id="R3_C_6" name="C_6" size="5" class="form_price" value="18" />
<input type="text" placeholder="Disc." id="R3_D_6" name="D_6" size="3" class="form_discount" />
<input type="text" placeholder="Sum" id="R3_E_6" name="E_6" size="6" class="form_sum" />
<br />
<input type="text" placeholder="Item" id="R3_A_7" name="A_7" size="20" class="form_item" value="Some Y" />
<span id="R3_min_7" class="plusminus">-</span>
<input type="text" placeholder="Qty" id="R3_B_7" name="B_7" value="1" size="2" class="form_qty" />
<span id="R3_plus_7" class="plusminus" >+</span>
<input type="text" placeholder="Price" id="R3_C_7" name="C_7" size="5" class="form_price" value="18" />
<input type="text" placeholder="Disc." id="R3_D_7" name="D_7" size="3" class="form_discount" />
<input type="text" placeholder="Sum" id="R3_E_7" name="E_7" size="6" class="form_sum" />
<br />
<input type="text" placeholder="Item" id="R3_A_8" name="A_8" size="20" class="form_item" value="Some Z" />
<span id="R3_min_8" class="plusminus">-</span>
<input type="text" placeholder="Qty" id="R3_B_8" name="B_8" value="1" size="2" class="form_qty" />
<span id="R3_plus_8" class="plusminus" >+</span>
<input type="text" placeholder="Price" id="R3_C_8" name="C_8" size="5" class="form_price" value="18" />
<input type="text" placeholder="Disc." id="R3_D_8" name="D_8" size="3" class="form_discount" />
<input type="text" placeholder="Sum" id="R3_E_8" name="E_8" size="6" class="form_sum" />
<br />
<input type="text" placeholder="Item" id="R3_A_9" name="A_9" size="20" class="form_item" value="Some Õ" />
<span id="R3_min_9" class="plusminus">-</span>
<input type="text" placeholder="Qty" id="R3_B_9" name="B_9" value="1" size="2" class="form_qty" />
<span id="R3_plus_9" class="plusminus" >+</span>
<input type="text" placeholder="Price" id="R3_C_9" name="C_9" size="5" class="form_price" value="18" />
<input type="text" placeholder="Disc." id="R3_D_9" name="D_9" size="3" class="form_discount" />
<input type="text" placeholder="Sum" id="R3_E_9" name="E_9" size="6" class="form_sum" />
<br />
<input type="text" placeholder="Total Amount" id="R3_total" name="R3_total" />
<input type="hidden" id="R1" name="R1" value="1-3" />
<input type="hidden" id="R2" name="R2" value="4-5" />
<input type="hidden" id="R3" name="R3" value="6-9" />
<br />
<br />
<input type="submit" name="test" value="submit all forms" />
</form>
</body>
</html>
I'd like still to see more general and effective solutions here!