Here is the solution:
FIRST: Added JQuery
SECOND: Corrected the method to calculate. It should multiply instead of making sum if you want quantity * price. Review my changes
THIRD: Added a number on each ID and in the append method.
FOURTH: Changed calculate method to carry the id
THIRD: Commented the timer you created, and called the method that calculates the final value inside the JQUERY event "change" of the inputs. This way, you are not processing forever (even when nothing changed) and it′s only calculated when the change event is fired
Hope it helps
$(document).ready(function() {
var i = 0;
$("#quantity-" + i).change(function() {
upd_art(i)
});
$("#price-" + i).change(function() {
upd_art(i)
});
$('#add').click(function() {
i++;
$('#articles').append('<tr id="row' + i + '"><td><input type="number" value=0 id="quantity-' + i + '" name="quantity[]" placeholder="quantity" class="form-control name_list" /></td> <td><input type="number" id="price-' + i + '" name="price[]" value=0 placeholder="price" class="form-control name_list" /></td> <td><input type="number" id="total-' + i + '" name="total[]" placeholder="total" class="form-control name_list" readonly /></td> <td><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove">X</button></td></tr>');
$("#quantity-" + i).change(function() {
upd_art(i)
});
$("#price-" + i).change(function() {
upd_art(i)
});
});
$(document).on('click', '.btn_remove', function() {
var button_id = $(this).attr("id");
$('#row' + button_id + '').remove();
});
$('#submit').click(function() {
alert($('#add_name').serialize()); //alerts all values
$.ajax({
url: "wwwdb.php",
method: "POST",
data: $('#add_name').serialize(),
success: function(data) {
$('#add_name')[0].reset();
}
});
});
function upd_art(i) {
var qty = $('#quantity-' + i).val();
var price = $('#price-' + i).val();
var totNumber = (qty * price);
var tot = totNumber.toFixed(2);
$('#total-' + i).val(tot);
}
// setInterval(upd_art, 1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<br />
<br />
<h2 align="center">title</h2>
<div class="form-group">
<form name="add_name" id="add_name">
<div class="table-responsive">
<table class="table table-bordered" id="articles">
<tr class="rrjeshta">
<td><input value=0 type="number" id="quantity-0" name="quantity[]" placeholder="quantity" class="form-control name_list" /></td>
<td><input value=0 type="number" id="price-0" name="price[]" placeholder="price" class="form-control name_list" /></td>
<td><input type="number" id="total-0" name="total[]" placeholder="total" class="form-control name_list" readonly /></td>
<td><button type="button" name="add" id="add" class="btn btn-success">Add new</button></td>
</tr>
</table>
<input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />
</div>
</form>
</div>
</div>
</body>
</html>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
