Upon creating a record I am using a dynamic row to add product items. Just to give you an idea here's the code I adopt to my purchase order app.
$(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 />
<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>In my project, it has the product name, product code, price, and quantity. I have no issues on saving the record.
My problem is, how will I be able to display the records from that form with dynamic row function?
I am dealing with 2 tables, the ORDERS (transaction details are being saved here like the purchase order number grand total, currency etc) and ORDER_ITEMS (the items produced from that dynamic row are being saved here).
I believe I set up the eloquent relation properly but the areas that puzzled me are the part where I need to display the order items in the dynamic row, and then the ability to add another row should still be there.
Any suggestions? or probably a reference link that might help solve this problem? If you still want anything from my code please let me know.
Thank you very much guys in advance!
UPDATE
I have an idea to but I don't know how to translate into a code since I am not a coder.
here's my idea, I will count the number of an items inside the array using jQuery, let say it has 5 items in that array, and then I will append that number to the dynamic rows so there will be 5 rows, then the 5 items will be place there. since the process is jQuery, the ability to add new row will still be available. I think these are easier said than done. Please if you could guide me to a reference links that can solve my problem please let me know. or if you can provide me some codes that I can start with.
again guys thank you so much in advance!
