使用 jQuery 附录部分计算 jQuery / JavaScript 中的文本字段数组?

Question

我使用HTML和CSS的表单字段创建了一个用户界面。我的后端编程是用PHP进行的。我必须输入值一对多关系，例如一个订单有很多乘客。因此，我创建了诸如订单和乘客之类的表单字段，可以一次性插入到数据库中。

因此，用户能够填写订单数据，然后他们将使用 jquery 附录部分添加乘客数据。 如果用户单击"添加"按钮，该页面将生成另一个乘客详细信息表单字段。

所以我的问题是乘客表单字段有一些计算字段，例如 *.total_tax = yq + yr + tax_3 + tax_4

这些是每个乘客形式字段方程。

所以我想，如何计算每个乘客？ (当我输入文本时自动计算单独到表单字段的值(

我使用的是PHP的最新版本7.3.10。我已经尝试了使用javascript和jquery的计算。它仅适用于第一个乘客表单字段。它不适用于其他乘客(如果我添加 10 名乘客，则仅适用于第一名乘客(。

所以我想使用 javascript 或 jquery 单独计算所有乘客的表单字段keyup事件或其他什么？

订货.php：

<form action="includes/exchange-order.inc.php" method="post">
<div id="main_div" class="main_sec_div">
<button style="margin:1rem 1rem 0 0;" type="button" name="add" id="add" class="btn btn-success btn-sm add"><i class="fas fa-plus"></i></button>
<br />
<br />
<label for="validationCustom04">Tax-3 (0.00)</label>
<input name="tax_3[]" type="number" step=".01" class="form-control form-control-sm" id="tax_30" onkeyup="calc()" required>
<br />
<label for="validationCustom03">Tax-4 (0.00)</label>
<input name="tax_4[]" type="number" step=".01" class="form-control form-control-sm" id="tax_40" onkeyup="calc()" required>
<br />
<label for="validationCustom04">Total Tax (0.00)</label>
<input style="background:#ccc;" name="total_tax[]" type="number" step=".01" class="form-control form-control-sm" id="total_tax0" value="0.00" required>
<br />
<button type="submit" name="submitOrder" id="submitOrder" class="btn btn-primary mt-4 pr-4 pl-4">Save</button>
</div>
</form>

<script>
$(document).ready(function() {
var i = 0;
// add button
$(document).on('click', '#add', function() {
i++;
console.log('Add', i);
html = `<div id="sub_div${i}" class="second-div">
<button style="margin:1rem 1rem 0 0;" type="button" name="remove" id="${i}" class="btn btn-danger btn-sm remove"><i class="fa fa-close"></i></button>
<br />
<br />
<label for="validationCustom04">Tax-3 (0.00)</label>
<input name="tax_3[]" type="number" step=".01" class="form-control form-control-sm" id="tax_3${i}" onkeyup="calc()" required>
<br />
<label for="validationCustom03">Tax-4 (0.00)</label>
<input name="tax_4[]" type="number" step=".01" class="form-control form-control-sm" id="tax_4${i}" onkeyup="calc()" required>
<br />
<label for="validationCustom04">Total Tax (0.00)</label>
<input style="background:#ccc;" name="total_tax[]" type="number" step=".01" class="form-control form-control-sm" id="total_tax${i}" value="0.00" required>
<br />
</div>`;
$('#main_div').append(html);
});
// remove button
$(document).on('click', '.remove', function(e) {
var remove_btn_id = $(this).attr('id');
$('#sub_div' + remove_btn_id).remove();
i--;
console.log('Remove', i);
});
});
</script>

tex_calc.js：

//Total Tax[Tax - 3, Tax - 4]
function calc(obj) {
var tax_3 = 0;
var tax_4 = 0;
var total_tax = 0;
var e = obj.id.toString();
if (e == 'tax_3') {
tax_3 = Number(obj.value);
tax_4 = Number(document.getElementById('tax_4').value);
total_tax = Number(document.getElementById('total_tax').value);
}
else if (e == 'tax_4') {
tax_3 = Number(document.getElementById('tax_3').value);
tax_4 = Number(obj.value);
total_tax = Number(document.getElementById('total_tax').value);
}
else if (e == 'total_tax') {
tax_3 = Number(document.getElementById('tax_3').value);
tax_4 = Number(document.getElementById('tax_4').value);
total_tax = Number(obj.value);
}

// Total Tax
total_tax = tax_3 + tax_4;
document.getElementById('total_tax').value = total_tax.toFixed(2);
}

所以我希望使用 javascript 或 jquery 单独计算所有乘客的表单字段keyup事件或其他什么？

如何单独计算每位乘客？

Answer 1

我发现我的问题答案是 100% 有效。

订货.php ：

<form action="includes/exchange-order.inc.php" method="post">
<div id="main_div" class="main_sec_div">
<button style="margin:1rem 1rem 0 0;" type="button" name="add" id="add" class="btn btn-success btn-sm add"><i class="fas fa-plus"></i></button>
<br />
<label for="validationCustom04">Tax-3 (0.00)</label>
<input name="tax_3[]" type="number" step=".01" class="form-control form-control-sm" id="tax_30" onkeyup="calc(this)" required>
<br />
<label for="validationCustom03">Tax-4 (0.00)</label>
<input name="tax_4[]" type="number" step=".01" class="form-control form-control-sm" id="tax_40" onkeyup="calc(this)" required>
<br />
<label for="validationCustom04">Total Tax (0.00)</label>
<input style="background:#ccc;" name="total_tax[]" type="number" step=".01" class="form-control form-control-sm" id="total_tax0" value="0.00" required>
<br />

</div>
<button type="submit" name="submitOrder" id="submitOrder" class="btn btn-primary mt-4 pr-4 pl-4">Save</button>    
</form>

<script>
$(document).ready(function() {
var i = 0;
// add button
$(document).on('click', '#add', function() {
i++;
console.log('Add', i);
html = `<div id="sub_div${i}" class="second-div">
<button style="margin:1rem 1rem 0 0;" type="button" name="remove" id="${i}" class="btn btn-danger btn-sm remove"><i class="fa fa-close"></i></button>
<br />
<br />
<label for="validationCustom04">Tax-3 (0.00)</label>
<input name="tax_3[]" type="number" step=".01" class="form-control form-control-sm" id="tax_3${i}" onkeyup="calc(this)" required>
<br />
<label for="validationCustom03">Tax-4 (0.00)</label>
<input name="tax_4[]" type="number" step=".01" class="form-control form-control-sm" id="tax_4${i}" onkeyup="calc(this)" required>
<br />
<label for="validationCustom04">Total Tax (0.00)</label>
<input style="background:#ccc;" name="total_tax[]" type="number" step=".01" class="form-control form-control-sm" id="total_tax${i}" value="0.00" required>
<br />    
</div>`;
$('#main_div').append(html);
});
// remove button
$(document).on('click', '.remove', function(e) {
var remove_btn_id = $(this).attr('id');
$('#sub_div' + remove_btn_id).remove();
i--;
console.log('Remove', i);
});
});
</script>

tex_calc.js文件编码：

//Total Tax[YQ, YR, Tax - 3, Tax - 4]
var tax_3 = [];
var tax_4 = [];
var total_tax = [];
function calc(obj) {
var e = obj.id.toString();
if (e == 'tax_3' + i) {
tax_3[i] = Number(obj.value);
tax_4[i] = Number(document.getElementById('tax_4' + i).value);
total_tax[i] = Number(document.getElementById('total_tax' + i).value);
}
else if (e == 'tax_4' + i) {
tax_3[i] = Number(document.getElementById('tax_3' + i).value);
tax_4[i] = Number(obj.value);
total_tax[i] = Number(document.getElementById('total_tax' + i).value);
}
else if (e == 'total_tax' + i) {
tax_3[i] = Number(document.getElementById('tax_3' + i).value);
tax_4[i] = Number(document.getElementById('tax_4' + i).value);
total_tax[i] = Number(obj.value);
}

// Total Tax
total_tax[i] = Number(tax_3[i] + tax_4[i]);
// console.log('Total ', total_tax[i]);
document.getElementById('total_tax' + i).value = total_tax[i].toFixed(2);

}
}