根据这个问题here现在我试图从输入字段中计算出计算的moltiplication的总值。 总值必须自动更新,我需要将该值存储到变量中以进行进一步的数据操作。
方案: 动态添加文章
name0,type0,price0,quantity0 - > total_0(价格*数量)
name1,type1,price1,quantity1 - > total_1(价格*数量)
...
nameX,typeX,priceX,quantityX - > total_X(价格*数量)
所有文章的总价值=(total_0 + total_1 + ... + total_X)
这里是html和js代码。
提前感谢您的帮助。
$(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);
}
});
&#13;
<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>
&#13;