according to this question here now i'm trying to figure out the total value of the calculated moltiplication from input fields.
The total value must be autoupdated and i need to store that value into a variable for further data manipulation.
Scenario:
add article dynamically
name0, type0, price0, quantity0 --> total_0 (price*quantity)
name1, type1, price1, quantity1 --> total_1 (price*quantity)
...
nameX, typeX, priceX, quantityX --> total_X (price*quantity)
total value of all articles = (total_0 + total_1 + ... + total_X)
here is the html and js code.
Thanks in advance for help.
$(document).ready(function() {
var i = 0;
$("#sasia-" + i).change(function() {
upd_art(i)
});
$("#cmimi-" + i).change(function() {
upd_art(i)
});
$('#add').click(function() {
i++;
$('#artikujt').append('<tr id="row' + i + '"><td><input type="text" class="form-control input-sm name_list" id="artikulli-' + i + '" name="artikulli[]" value="" placeholder="Artikulli..." required /></td><td><select class="form-control input-sm name_list" id="njesia-' + i + '" name="njesia[]"><option value="" selected disabled>Njesia...</option><option value="tjeter">tjeter</option><option value="m">m</option><option value="m2">m2</option><option value="m3">m3</option><option value="cope">cope</option><option value="ml">m/l</option><option value="litra">litra</option><option value="pako">pako</option></select></td><td><input type="number" class="form-control input-sm name_list" id="sasia-' + i + '" name="sasia[]" value="" placeholder="Sasia..." required /></td><td><input type="number" class="form-control input-sm name_list" id="cmimi-' + i + '" name="cmimi[]" value="" placeholder="Cmimi..." required /></td><td><input type="number" class="form-control input-sm name_list subtotali" id="total_art-' + i + '" name="total_art[]" readonly /></td> <td><center><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn-sm btn_remove">X</button></center></td></tr>');
$("#sasia-" + i).change(function() {
upd_art(i)
});
$("#cmimi-" + 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 = $('#sasia-' + i).val();
var price = $('#cmimi-' + i).val();
var totNumber = (qty * price);
var tot = totNumber.toFixed(2);
$('#total_art-' + i).val(tot);
}
});
<html>
<head>
<title>add article</title>
<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">add article</h2>
<div class="form-group">
<form name="add_name" id="add_name">
<div class="table-responsive">
<table class="table table-bordered table-sm" id="artikujt">
<thead>
<tr>
<th>item</th>
<th>type</th>
<th>quantity</th>
<th>price</th>
<th>value</th>
<th><center>+ / -</center></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="form-control input-sm name_list" id="artikulli-0" name="artikulli[]" value="" placeholder="Artikulli..." required /></td>
<td>
<select class="form-control input-sm name_list" id="njesia-0" name="njesia[]">
<option value="" selected disabled>Njesia...</option>
<option value="tjeter">tjeter</option>
<option value="m">m</option>
<option value="m2">m2</option>
<option value="m3">m3</option>
<option value="cope">cope</option>
<option value="ml">m/l</option>
<option value="litra">litra</option>
<option value="pako">pako</option>
</select>
</td>
<td><input type="number" class="form-control input-sm name_list" id="sasia-0" name="sasia[]" value="" placeholder="Sasia..." required /></td>
<td><input type="number" class="form-control input-sm name_list" id="cmimi-0" name="cmimi[]" value="" placeholder="Cmimi..." required /></td>
<td><input type="number" class="form-control input-sm name_list subtotali" id="total_art-0" name="total_art[]" readonly /></td>
<td><center><button type="button" name="add" id="add" class="btn btn-sm btn-success">Add new</button></center></td>
</tr>
</tbody>
</table>
</div>
<div class="row">
<div class="col-md-9"></div>
<div class="col-md-3">
<label class="req">total sum of items </label>
<input type="text" class="form-control input-sm subtotali" name="vleramonedhe" id="vleramonedhe" readonly />
</div>
</div>
<input type="button" name="submit" id="submit" class="btn btn-sm btn-info" value="Submit" />
</form>
</div>
</div>
</body>
</html>
Related
I'm trying to solve a problem with my POS module on Laravel 8 that removes an item from a dropdown once it is selected. The items from the dropdown are from a database table. My POS module consists of a table with Name (dropdown), Quantity, Price, and Total with the ability to add more rows. Here's the code I'm working on right now as well as screenshot of my POS.
pos.blade.php
<tbody class="addMoreProduct">
<tr>
<td>1</td>
<td>
<select name="product_id[]" id="product_id" class="form-control product_id">
<option value="s" selected>Select Item</option>
#foreach($products as $product)
<option data-price="{{ $product->price }}"
value="{{ $product->id }}">{{ $product->name }}
</option>
#endforeach
</select>
</td>
<td>
<input type="text" name="quantity[]" id="quantity" class="form-control quantity" required>
</td>
<td>
<input type="number" name="price[]" id="price" step=".01" class="form-control price" readonly>
</td>
<td>
<input type="number" name="total_amount[]" id="total_amount" step=".01" class="form-control total_amount" readonly>
</td>
</tr>
</tbody>
<script>
//Add a row
$('.add_more').on('click', function(){
var product = $('.product_id').html();
var numberofrow = ($('.addMoreProduct tr').length - 0) + 1;
var tr = '<tr><td class="no">' + numberofrow + '</td>' +
'<td><select class="form-control product_id" name="product_id[]">' + product +
'</select></td>' +
'<td><input type="number" name="quantity[]" class="form-control quantity"></td>' +
'<td><input type="number" name="price[]" class="form-control price" readonly></td>' +
'<td><input type="number" name="total_amount[]" class="form-control total_amount" readonly></td>' +
'<td><a class="btn btn-danger btn-sm delete rounded-circle"><i class="fa fa-times-circle"></i></a></td>';
$('.addMoreProduct').append(tr);
});
//Delete a row
$('.addMoreProduct').delegate('.delete', 'click', function(){
$(this).parent().parent().remove();
});
</script>
I did try looking for this problem and came across these code, I tried, but unfortunately it did not solve my problem. Any help would be appreciated. Thank you.
var selectobject = document.getElementById("product_id");
for (var i=0; i<selectobject.length; i++) {
if (selectobject.options[i].value == 's')
selectobject.remove(i);
}
var index = $('#product_id').get(0).selectedIndex;
$('#product_id option:eq(' + index + ')').remove();
I want to calculate the average of inputs that have been inputted through dynamically added number text fields into another text field called, average. Please guide how can I calculate the average of dynamic fields using javascript.
<html>
<body>
<form>
<table id="dynamic_field">
<td>
<div>
<input type="hidden" class="form-control" name="uuid[]"/>
</div>
</td>
<td><input type="text" class="form-control" id="average" name="average"/></td>
<td>
<div>
<label>Enter number</label>
<input type="text" class="form-control" name="number[]" />
</div>
</td>
<td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
<input type="submit" name="submit" id="submit" value="Submit">
</table>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
var max_input = 7;
var i = 1;
$("#add").click(function(){if (i < max_input) {
i++;
$('#dynamic_field').append('<tr id="row'+i+'"><td><div><input type="hidden" class="form-control" name="uuid[]"/></div></td><td> </td><td><div><label>Enter number</label><input type="text" class="form-control" name="number[]" /></div></td><td> </td><td valign="bottom"><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr><tr><td> </td><td> </td></tr>');
}});
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
$("#submit").on('click',function(){
var formdata = $("#main-form").serialize();
$.ajax({
url :"action.php",
type :"POST",
data :formdata,
cache :false,
success:function(result){
alert(result);
$("#main-form")[0].reset();
}
});
});
});
</script>
You can use each loop to iterate through all your number input and on each iteration store value of input inside some variable and then divide this total with count and finally add result inside your average input-box.
Demo Code :
$(document).ready(function() {
var max_input = 7;
var i = 1;
$("#add").click(function() {
if (i < max_input) {
i++;
$('#dynamic_field').append('<tr id="row' + i + '"><td><div><input type="hidden" class="form-control" name="uuid[]"/></div></td><td> </td><td><div><label>Enter number</label><input type="text" class="form-control" name="number[]" /></div></td><td> </td><td valign="bottom"><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove">X</button></td></tr><tr><td> </td><td> </td></tr>');
}
});
$(document).on('click', '.btn_remove', function() {
var button_id = $(this).attr("id");
$('#row' + button_id + '').remove();
});
$(document).on("input", "input[name*=number]", function() {
var total = 0;
//get length of input field
var count = parseInt($("input[name*=number]").length);
//loop through each inputs
$("input[name*=number]").each(function() {
//add
total += $(this).val() != "" ? parseInt($(this).val()) : 0
})
//put value inside input box
$("#average").val(total / count);
})
});
<html>
<body>
<form>
<table id="dynamic_field">
<tr>
<td>
<div>
<input type="hidden" class="form-control" name="uuid[]" />
</div>
</td>
<td><input type="text" class="form-control" id="average" name="average" /></td>
<td>
<div>
<label>Enter number</label>
<input type="text" class="form-control" name="number[]" />
</div>
</td>
<td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
</tr>
</table>
<input type="submit" name="submit" id="submit" value="Submit">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
I am creating dynamic row with jquery. Now each row has different ID and common class name. How can I get the different id from same class name?
https://imgur.com/a/JCEhSna
See in the above picture. While I will select an option, then I want the ID name.
My Try:
HTML:
<tbody id="dynamic_row">
<tr id="firstTR">
<td>
<select name="product_id[]" class="invoiceProducts">
#foreach($products as $product)
<option value="{{ $product->id }}">{{ $product->productName }}</option>
#endforeach
</select>
</td>
<td>
<input type="text" class="form-control" name="itemDescription[]" id="itemDescription">
</td>
<td><input type="text" class="form-control" name="itemCost[]" id="itemCost"></td>
<td><input type="number" class="form-control" name="itemQuantity[]"></td>
<td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
</tr>
</tbody>
$('#add').click(function(){
i++;
j=i;
console.log("Inside: " + i);
var html = '<tr id="row'+i+'" class="dynamic-added">';
html += '<td><select name="product_id[]" class="invoiceProducts" id="itemSelect'+i+'">#foreach($products as $product)<option value="{{ $product->id }}">{{ $product->productName }}</option>#endforeach</select></td>';
html += '<td><input type="text" class="form-control" name="itemDescription[]" id="itemDescription'+i+'"></td>';
html += '<td><input type="text" class="form-control" name="itemCost[]" id="itemCost'+i+'"></td>';
html += '<td><input type="text" class="form-control" name="itemQuantity[]" id="itemQuantity'+i+'"></td>';
html += '<td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>';
let tb = $("table.invoice-table").find("tbody");
tb.append(html);
tb.find('tr').last().trigger('select-added');
});
$('body').on('change', '.invoiceProducts', function() {
var idOfSelect = $('.invoiceProducts').attr('id');
console.log("Select ID: " + idOfSelect);
});
Output:
Select ID: undefined
You can find the id using this.closest('tr').id in the change event
var i =0;
$('#add').click(function(){
i++;
j=i;
console.log("Inside: " + i);
var html = '<tr id="row'+i+'" class="dynamic-added">';
html += '<td><select name="product_id[]" class="invoiceProducts" id="itemSelect'+i+'">#foreach($products as $product)<option value="1">1</option><option value="2">2</option>#endforeach</select></td>';
html += '<td><input type="text" class="form-control" name="itemDescription[]" id="itemDescription'+i+'"></td>';
html += '<td><input type="text" class="form-control" name="itemCost[]" id="itemCost'+i+'"></td>';
html += '<td><input type="text" class="form-control" name="itemQuantity[]" id="itemQuantity'+i+'"></td>';
html += '<td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>';
let tb = $("table.invoice-table").find("tbody");
tb.append(html);
tb.find('tr').last().trigger('select-added');
});
$('body').on('change', '.invoiceProducts', function() {
var idOfSelect = this.closest('tr').id
console.log("Select ID: " + idOfSelect);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="invoice-table">
<tbody id="dynamic_row">
<tr id="firstTR">
<td>
<select name="product_id[]" class="invoiceProducts">
<option value="1">1</option>
<option value="1">2</option>
<option value="1">3</option>
<option value="1">4</option>
</select>
</td>
<td>
<input type="text" class="form-control" name="itemDescription[]" id="itemDescription">
</td>
<td><input type="text" class="form-control" name="itemCost[]" id="itemCost"></td>
<td><input type="number" class="form-control" name="itemQuantity[]"></td>
<td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
</tr>
</tbody>
</table>
I think this could help
$('body').on('change', '.invoiceProducts', function() {
var idOfSelect = $(this).attr('id');
console.log("Select ID: " + idOfSelect);
});
The trick is select ID of changed element, right?
If you have <select> element, you should have <option> elements also as a children.
Just set "value" attribute of these children.
<select id="mySelect">
<option id="1" value="1"> A <option>
<option id="2" value="2"> B <option>
<option id="3" value="3"> C <option>
</select>
$("#mySelect").change(function(){
var selectedOption = $(this). children("option:selected").val();
console.log(selectedOption)
})
You should try with "document" It may help you Like:
$(document).on('change', '.invoiceProducts', function() {
var idOfSelect = $(this).attr('id');
console.log("Select ID: " + idOfSelect);
});
I have a page with a number of similar forms and would like to get the value of the input fields, when I press the submit button. I tried this on JSFiddle and it seems to be working. When I try this on my website, it returns "undefined".
HTML:
<tr>
<form action="editline.php" method="POST" class="editline">
<input type="hidden" name="editID" class="form-control id" value="123456">
<td data-label="Name"><textarea name="editName" class="form-control name" rows="1" autocomplete="off" required>Name1</textarea></td>
<td data-label="Address"><input type="text" name="editAddress" class="form-control address" value="Address1" autocomplete="off" required></td>
<td data-label="Colour"><input type="text" name="editColour" class="form-control colour" value="Colour1" autocomplete="off" required></td>
<td data-label="Edit"><button type="submit" class="btn btn-info btn-sm">Edit</button></td>
</form>
</tr>
<tr>
<form action="editline.php" method="POST" class="editline">
<input type="hidden" name="editID" class="form-control id" value="987654">
<td data-label="Name"><textarea name="editName" class="form-control name" rows="1" autocomplete="off" required>Name2</textarea></td>
<td data-label="Address"><input type="text" name="editAddress" class="form-control address" value="Address2" autocomplete="off" required></td>
<td data-label="Colour"><input type="text" name="editColour" class="form-control colour" value="Colour2" autocomplete="off" required></td>
<td data-label="Edit"><button type="submit" class="btn btn-info btn-sm">Edit</button></td>
</form>
</tr>
JS:
$('.editline').submit(function(e) {
e.preventDefault();
var id = $(this).find('input.id').val();
var name = $(this).find('textarea.name').val();
var address = $(this).find('input.address').val();
var colour = $(this).find('input.colour').val();
alert(id + ' ' + name + ' ' + address + ' ' + colour);
});
Is it a problem, that the forms are in tables? Is there an other way to just get the input values of the form where the submit button has been pressed?
Thanks in advance.
Edit:// Okay, since the problem is caused by the form being in a table, is there a workaround? I'd like to use a table for this.
Edit2:// This JS is working great, when the forms are in a table (FSFiddle):
$('.editline').submit(function(e) {
e.preventDefault();
var tr = $(this).closest('tr');
var id = tr.find('input.id').val();
var name = tr.find('textarea.name').val();
var address = tr.find('input.id').val();
var colour = tr.find('input.colour').val();
alert(id + ' ' + name + ' ' + address + ' ' + colour);
});
You can use only one form, then set the action to the button and get the closest line with it's inputs. Then ,in the click function you can call an ajax post to the form.
$('.editline button').click(function(e) {
e.preventDefault();
var tr = $(this).closest('tr');
var id = tr.find('input.id').val();
var name = tr.find('textarea.name').val();
var address = tr.find('input.address').val();
var colour = tr.find('input.colour').val();
alert(id + ' ' + name + ' ' + address + ' ' + colour);
});
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form action="editline.php" method="POST" class="editline">
<table>
<tr>
<td data-label="Name"><input type="hidden" name="editID" class="form-control id" value="123456"><textarea name="editName" class="form-control name" rows="1" autocomplete="off" required>Name1</textarea></td>
<td data-label="Address"><input type="text" name="editAddress" class="form-control address" value="Address1" autocomplete="off" required></td>
<td data-label="Colour"><input type="text" name="editColour" class="form-control colour" value="Colour1" autocomplete="off" required></td>
<td data-label="Edit"><button type="submit" class="btn btn-info btn-sm">Edit</button></td>
</tr>
<tr>
<td data-label="Name">
<input type="hidden" name="editID" class="form-control id" value="987654">
<textarea name="editName" class="form-control name" rows="1" autocomplete="off" required>Name2</textarea>
</td>
<td data-label="Address"><input type="text" name="editAddress" class="form-control address" value="Address2" autocomplete="off" required></td>
<td data-label="Colour"><input type="text" name="editColour" class="form-control colour" value="Colour2" autocomplete="off" required></td>
<td data-label="Edit"><button type="submit" class="btn btn-info btn-sm">Edit</button></td>
</tr>
</table>
</form>
Just wrap the entire table in the form. This would solve the issue of invalid HTML.
$('.editline').submit(function(e) {
e.preventDefault();
var id = $(this).find('input.id').val();
var name = $(this).find('textarea.name').val();
var address = $(this).find('input.address').val();
var colour = $(this).find('input.colour').val();
alert(id + ' ' + name + ' ' + address + ' ' + colour);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="editline.php" method="POST" class="editline">
<table>
<tr>
<td data-label="Name"><textarea name="editName" class="form-control name" rows="1" autocomplete="off" required>Name2</textarea></td>
<td data-label="Address"><input type="text" name="editAddress" class="form-control address" value="Address2" autocomplete="off" required></td>
<td data-label="Colour"><input type="text" name="editColour" class="form-control colour" value="Colour2" autocomplete="off" required></td>
<td data-label="Edit"><button type="submit" class="btn btn-info btn-sm">Edit</button> </td>
</tr>
</table>
<input type="hidden" name="editID" class="form-control id" value="987654">
</form>
For example:
function geti() {
var i = document.getElementById('i').value;
var iv = document.getElementById('iv');
iv.innerHTML = i;
}
<input type="text" id="i">
<button onclick="geti();">Click Me</button>
<p id="iv"></p>
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 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>
You should use unique id attributes in one DOM. When same ids 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 instead id when you make new dynamic elements. and use class selector in jquery function upd_art.