I need to add form fields dynamically. Each group of input values contain 3 fields, quantity
, price
, and total
. Every time I insert numeric values to quantity
and price
the field total
must show the sum or multiply.
I have realized this but it works only on the first field. When I add another row of fields it doesn't calculate others.
Here is my code.
$(document).ready(function() {
var i = 1;
$('#add').click(function() {
i++;
$('#articles').append('<tr id="row' + i + '"><td><input type="number" id="quantity" name="quantity[]" placeholder="quantity" class="form-control name_list" /></td> <td><input type="number" id="price" name="price[]" placeholder="price" class="form-control name_list" /></td> <td><input type="number" id="total" 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>');
});
$(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 and works fine
$.ajax({
url: "wwwdb.php",
method: "POST",
data: $('#add_name').serialize(),
success: function(data) {
$('#add_name')[0].reset();
}
});
});
function upd_art() {
var qty = $('#quantity').val();
var price = $('#price').val();
var total = (qty * price).toFixed(2);
$('#total').val(total);
}
setInterval(upd_art, 1000);
});
<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>
<td><input type="number" id="quantity" name="quantity[]" placeholder="quantity" class="form-control name_list" /></td>
<td><input type="number" id="price" name="price[]" placeholder="price" class="form-control name_list" /></td>
<td><input type="number" id="total" 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>
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 firedHope it helps
You should use unique
id
attributes in one DOM. When sameids
are present in one HTML, and you use them in jquery, only first occurances of the id will be considered and it will not work as expected.use
class
insteadid
when you make new dynamic elements. and use class selector in jquery functionupd_art
.