I'm creating a form with dynamically added fields and would like to sum all added fields. So far I have the following code, but it only sums the first row:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Totals</title>
<script type="text/javascript" src="../js/jquery/jquery-1.6.2.js"></script>
<script type="text/javascript" src="../js/jquery/jquery.calculation.js"></script>
<script type="text/javascript">
//Sum
$(document).ready(
function (){
$('input[name^=reds]').sum("keyup", "#totalSumReds");
$("input[name^=blues]").sum("keyup", "#totalSumBlues");
}
);
</script>
<script type="text/javascript">
//Add/remove form fields
jQuery(function($){
$('#btnAdd').click( function(){
var num = $('.clonedInput').length;
var newNum = new Number(num + 1);
var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);
newElem.children(':first').attr('id', 'name' + newNum).attr('reds', 'reds' + newNum);
$('#input' + num).after(newElem);
$('#btnDel').attr('disabled', false);
if (newNum == 5)
$('#btnAdd').attr('disabled', 'disabled');
});
$('#btnDel').click( function() {
var num = $('.clonedInput').length;
$('#input' + num).remove();
$('#btnAdd').attr('disabled', false);
if (num-1 == 1 )
$('#btnDel').attr('disabled', 'disabled');
});
$('#btnDel').attr('disabled', 'disabled');
});
</script>
</head>
<body>
<form id="myForm">
<div id="input1" style="margin-bottom:4px;" class="clonedInput">
Numbers: <input type="text" name="reds"/>
<input type="text" name="blues" id="blues"/>
</div>
<div>
Totals: <input type="text" name="totalSumReds" id="totalSumReds" value="" size="2" readonly="readonly" />
<input type="text" name="totalSumBlues" id="totalSumBlues" value="" size="2" readonly="readonly" />
</div>
<div>
<input type="button" id="btnAdd" value="add line" />
<input type="button" id="btnDel" value="remove line" />
</div>
</form>
</body>
</html>
Any ideas about what should I try to fix it? Thanks!
In your code you are registering the summing function only on the existing input fields, any fields added afterwards won't trigger the calculation and also won't be taken into account when summing.
ReplyDeleteYou could use event delegation instead:
<script type="text/javascript">
// Sum
$(function (){
$('#myForm').live("keyup", "input[name^=reds]", function() {
var sum = $('input[name^=reds]').sum();
$('#totalSumReds').val(sum);
});
$('#myForm').live("keyup", "input[name^=blues]", function() {
var sum = $('input[name^=blues]').sum();
$('#totalSumBlues').val(sum);
});
});
</script>