How do i add dynamic values and append it in one field? - html

Question

form, which is fetching service name in <td>Name</td> and jQuery below is appending sub total as quantity increases with respect to price.
$(document).on('change', '.qty', function() {
var quantity = $(this).val();
var sub = $(this).parent().next().children();
var price = $(this).parent().prev().children().val();
var subTotal = parseInt(quantity) * parseInt(price);
sub.val(subTotal);
});
var i = 1;
$(function() {
$("#btnAdd").bind("click", function() {
var div = $("<tr />");
div.html(GetDynamicTextBox(""));
$("#TextBoxContainer").append(div);
});
$("body").on("click", ".remove", function() {
$(this).closest("tr").remove();
// GrandTotal();
});
});
function GetDynamicTextBox(value) {
i++;
return '<td><select class="form-control select2 select-service" style="width: 100%;" id="service-select' + i + '" required name="product[]"><option value="">--Select Product--</option> <?php foreach($dbf->fetchOrder("service") as $services){?><option value="<?= $services['
id '];?>"><?= $services['
service '];?></option><?php }?></select></td>' +
'<td><input class="form-control rate" name = "rate[]" type="text" placeholder="Rate" id="rate1' + i + '" required readonly/></td>' +
'<td><input class="form-control qty" placeholder="Quantity" name = "qty[]" type="number" id="qty1' + i + '" /></td>' +
'<td><input class="form-control sub-total" placeholder="Sub Total" name = "sub_total[]" type="text" id="sub_total1' + i + '" readonly required/></td>' +
'<td><button type="button" class="btn btn-danger remove"><i class="glyphicon glyphicon-remove-sign"></i></button></td>'
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-responsive table-striped table-bordered">
<thead>
<tr>
<td>Name</td>
<td>Price</td>
<td>Quantity</td>
<td>Sub Total</td>
<td><button id="btnAdd" type="button" class="btn btn-primary" data-toggle="tooltip" data-original-title="Add more controls"><i class="glyphicon glyphicon-plus-sign"></i> Add </button></td>
</tr>
</thead>
<tbody id="TextBoxContainer">
<tr>
<td>
<select class="form-control select-service" style="width: 100%;" id="service-select" required name="service[]">
<option value="">--Select Services--</option>
<?php foreach($dbf->fetchOrder("service") as $services){?>
<option value="<?= $services['id'];?>">
<?= $services['service'];?>
</option>
<?php }?>
</select>
</td>
<td><input type="text" class="form-control rate" placeholder="Rate" readonly name="rate[]" id="rate1" required></td>
<td><input type="number" min="1" class="form-control qty" placeholder="Quantity" name="qty[]" id="qty1"></td>
<td><input type="text" min="1" class="form-control sub_total" placeholder="Sub Total" name="sub_total[]" readonly id="sub_total1"></td>
<td><button type="button" class="btn btn-danger remove"><i class="glyphicon glyphicon-remove-sign"></i></button></td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
this is the multiple dynamic input field of the same form above, which is adding Name,Price,Quantity,Sub Total dynamic field as add button is clicked.
My goal is to add all the sub-total from the multiple dynamic field and display it inside a different field.

Answer 1

You can use each loop to iterate through all inputs i.e : sub_total then get value of input and add it to some variable on each iteration and finally append it to some element.
Demo Code :
$(document).on('change', '.qty', function() {
var quantity = $(this).val();
var sub = $(this).parent().next().children();
var price = $(this).parent().prev().children().val()
var subTotal = parseInt(quantity) * parseInt(price);
sub.val(subTotal);
calculate_total(); //call to calculate
});
var i = 1;
$(function() {
$("#btnAdd").bind("click", function() {
var div = $("<tr />");
div.html(GetDynamicTextBox(""));
$("#TextBoxContainer").append(div);
});
$("body").on("click", ".remove", function() {
$(this).closest("tr").remove();
calculate_total(); //call to calculate
});
});
function GetDynamicTextBox(value) {
i++;
return '<td><select class="form-control select2 select-service" style="width: 100%;" id="service-select' + i + '" required name="product[]"><option value="">--Select Product--</option></select></td>' + '<td><input class="form-control rate" value="10" name = "rate[]" type="text" placeholder="Rate" id="rate1' + i + '" required readonly/></td>' + '<td><input class="form-control qty" placeholder="Quantity" name = "qty[]" type="number" id="qty1' + i + '" /></td>' + '<td><input class="form-control sub_total" placeholder="Sub Total" name = "sub_total[]" type="text" id="sub_total1' + i + '" readonly required/></td>' + '<td><button type="button" class="btn btn-danger remove"><i class="glyphicon glyphicon-remove-sign">x</i></button></td>'
}
function calculate_total() {
var total = 0;
//loop through all inputs(sub-total)
$("input.sub_total").each(function() {
//check if value is not null
total += ($(this).val() != "") ? parseInt($(this).val()) : 0;
})
//add total
$("#total").text(total)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-responsive table-striped table-bordered">
<thead>
<tr>
<td>Name</td>
<td>Price</td>
<td>Quantity</td>
<td>Sub Total</td>
<td><button id="btnAdd" type="button" class="btn btn-primary" data-toggle="tooltip" data-original-title="Add more controls"><i class="glyphicon glyphicon-plus-sign"></i> Add </button></td>
</tr>
</thead>
<tbody id="TextBoxContainer">
<tr>
<td>
<select class="form-control select-service" style="width: 100%;" id="service-select" required name="service[]">
<option value="">--Select Services--</option>
<option value="1">1 </option>
<option value="2">2 </option>
<option value="3">3 </option>
</select>
</td>
<td><input type="text" class="form-control rate" placeholder="Rate" readonly name="rate[]" value="10" id="rate1" required></td>
<td><input type="number" min="1" class="form-control qty" placeholder="Quantity" name="qty[]" id="qty1"></td>
<td><input type="text" min="1" class="form-control sub_total" placeholder="Sub Total" name="sub_total[]" readonly id="sub_total1"></td>
<td><button type="button" class="btn btn-danger remove"><i class="glyphicon glyphicon-remove-sign">x</i></button></td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="3">Total : </th>
<th id="total">0</th>
</tr>
</tfoot>
</table>