1
フォームフィールドを動的に追加する必要があります。入力値の各グループには、quantity,price、およびtotalの3つのフィールドが含まれています。 quantityとpriceに数値を入力するたびに、フィールドtotalには合計が表示されなければなりません。動的フォーム複数入力フィールドの計算
私はこれを認識しましたが、最初のフィールドでのみ動作します。フィールドの別の行を追加すると、他の行が計算されません。
ここに私のコードです。あなたは1つのDOMでユニークid属性を使用する必要があります
$(document).ready(function() {
var i = 1;
$('#add').click(function() {
\t i++;
\t $('#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() {
\t var button_id = $(this).attr("id");
\t $('#row' + button_id + '').remove();
});
$('#submit').click(function() {
\t //alert($('#add_name').serialize()); //alerts all values and works fine
\t $.ajax({
\t \t url: "wwwdb.php",
\t \t method: "POST",
\t \t data: $('#add_name').serialize(),
\t \t success: function(data) {
\t \t \t $('#add_name')[0].reset();
\t \t }
\t });
});
function upd_art() {
\t var qty = $('#quantity').val();
\t var price = $('#price').val();
\t var total = (qty * price).toFixed(2);
\t $('#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>
を役に立てば幸い一意であること – baao
データベースに値を挿入すると、このスクリプトはうまく動作します。目的は、合計を手動で挿入するのではなく、自動的に計算してからdbに保存することです。 可能であれば、この例で一意のIDを使用して図を描く方法の例。ありがとう – sigma