Real Time JavaScript Calculation for sum value based on Form Inputs.
I have table for sum value, also this table is to add dynamic row. It is not working when I start to run code for total value. I think it logically work but I have no idea please help me.
Please help me my problem.
Total: <span id="total"></span>
<tr id="tablerow0">
<td>
@Html.TextBoxFor(modelItem => modelItem.store_Invs[0].Scis_sold, new { @style = "height:30px; ,id = "scissold" })
</td>
</tr>
<button id="add" type="submit" class="btn btn-primary">Add</button>
<script type="text/javascript">
var counter = 1;
$(function () {
$('#add').click(function () {
var selected = [];
$('[id*=Gif] option:selected').each(function () {
selected.push($(this).val());
});
$('<tr id="tablerow' + counter + '"><td>' +
'<td>' +
'<input id="scissold" type="text" name="store_Invs[' + counter + '].Scis_sold" style="height:30px;" value="" required="required" />' +
'</td>' +
'<button type="button" class="btn btn-primary" onclick="removeTr(' + counter + ');">Delete</button>' +
'</td>' +
'</tr>').appendTo('#submissionTable');
$('#Gif' + counter + ' option').each(function () {
var item = $(this).val();
if (selected.indexOf(item) > -1) {
$(this).remove();
}
});
$("#Gif" + counter).chosen();
counter++;
return false;
});
var total = 0;
$('input').keyup(function () { // run anytime the value changes
var firstValue = Number($("scissold" + counter +).val()); // get value of field
total += firstValue;
$('#total').html(total); // add them and output it
});
});