计算动态添加的表单元素的总和
calculating sums for dynamically added form elements
我有下面的表单,当用户单击"添加新"按钮时,每个.form-row
都是使用jQuery动态添加的。
我的 html 表单(简体)
<div id="total_sum">
<!-- here will show up total amount, which is sum of unit[] * price[] - discount[] of all below form-rows -->
</div>
<div id="total_discount">
<!-- here will show up total discount amount, which is sum of discount[] of all below form-rows -->
</div>
<div id="total_net">
<!-- here will show up net amount, which is total_sum - total_discount -->
</div>
<form id="form" method="POST" action="">
<div class="form-row">
<select name="item[]">
<option value="item-id-1">Item 1</option>
<option value="item-id-2">Item 2</option>
<option value="item-id-3">Item 3</option>
</select>
<input type="number" class="unit" value="1" name="unit[]" />
<input type="number" class="price" name="price[]" />
<input type="number" class="discount" name="discount[]" />
<input type="number" class=name="sum[]" />
</div>
<div class="form-row">
<select name="item[]">
<option value="item-id-1">Item 1</option>
<option value="item-id-2">Item 2</option>
<option value="item-id-3">Item 3</option>
</select>
<input type="number" class="unit" value="1" name="unit[]" />
<input type="number" class="price" name="price[]" />
<input type="number" class="discount" name="discount[]" />
<input type="number" class="sum" name="sum[]" />
</div>
<!-- and users can dynamically add as many form-rows as they want -->
<div class="form-row">
<select name="item[]">
<option value="item-id-1">Item 1</option>
<option value="item-id-2">Item 2</option>
<option value="item-id-3">Item 3</option>
</select>
<input type="number" class="unit" value="1" name="unit[]" />
<input type="number" class="price" name="price[]" />
<input type="number" class="discount" name="discount[]" />
<input type="number" class="sum" name="sum[]" />
</div>
</form>
我试图实现的是双重的:
- 计算每行的总和(
.form-row
)并显示每行的总和(在sum[]
字段中) - 计算所有行(所有
.form-row
)的所有总和和折扣的总和,并以#total_sum
、#total_discount
和#total_net
显示它们。
我相信我需要一些东西来获取所有.form-row
,每当形式发生变化时(或者每 1 秒,也许是每 1 秒?)就会触发,并循环它们以计算各自的总和,并在循环结束时计算总和和折扣。如果是PHP,我可以这样做,但是我对jQuery或Javascript很陌生,所以我不知道首先在哪里研究。
[添加]
我在上面的解释中没有提到的一件事是 unit[] 的默认值为 1,而 price[] 首先使用 AJAX 自动追加,然后用户可以更改该值。
我的 AJAX 在用户选择项目时自动检索价格。
<script>
jQuery(document).ready(function($) {
/* Get Item Price and Item Currency */
$('#form').on('change', '.item_id', function(){
var this$ = $(this);
var $item_id = this$.val();
var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';
// call ajax for item price (returns 0 if item has no price)
$.ajax({
url: ajaxurl,
data:' action=get_item_price_by_id&item_id='+$item_id,
type:'GET',
success:function(results) {
this$.parent().parent().find('.price').empty();
this$.parent().parent().find('.price').val(results);
}
});
});
});
</script>
感谢Manish Jangir Blogadditic的建议,我有了以下代码:
<script>
jQuery(document).ready(function($) {
// Calculate sub-sums on any form changes
$("#form").change(function() {
var sum = 0;
$('.form-row').each(function() {
sum = Number( $(this).find('unit').val()) * Number( $(this).find('price').val() );
alert( sum );
});
});
});
</script>
但是,当手动更改表单时,它有效,但当 ajax 自动附加价格时,它不起作用。
还有其他建议吗?
如果您的按钮 #form 带有最后添加的动态元素,那么您可以尝试一下,因为 .change 或 .on 不适用于动态附加的 html 元素。 jQuery给出了一个$(document).on事件来做到这一点。
jQuery(document).ready(function($) {
// Calculate sub-sums on any form changes
$(document).on('click','#form',function() {
var sum = 0;
$('.form-row').each(function() {
sum += Number( $(this).find('.unit').val()) * Number( $(this).find('.price').val() );
alert( sum );
});
});
});
Javascript 更改的值不会触发 onchange 事件。这个规则也适用于JQuery的更改函数。因此,您可能需要在更新后手动触发 onchange 事件。使用Jquery,你可以使用.trigger(),检查这里:http://api.jquery.com/trigger/
试试这段代码,它将解决你的问题。
jQuery(document).ready(function() { // Calculate sub-sums on any form changes $("#form").on('change',function() { var sum = 0; $('.form-row').each(function() { sum += parseInt($(this).find('.unit').val()) + parseInt($(this).find('.price').val()); }); }); });
您必须创建一个委托事件。
jQuery(document).ready(function() {
// Calculate sub-sums on any form changes
$("#form").on('change','.price, .unit',function() {
var sum = 0;
$('.form-row').each(function() {
sum = Number( $(this).find('.unit').val()) * Number( $(this).find('.price').val() );
alert( sum );
});
});
});
- Javascript更新孙窗口中的表单元素
- 阻止表单元素提交
- 根据select选项元素将表单重定向到不同的URL
- 使用javascript取消隐藏和隐藏表单中的某些元素
- 使用带有.net autopostback的ryanfait.com自定义表单元素
- 使用javascript更改表单元素的ID值
- HTML5在提交并显示所需标签后显示隐藏的表单元素
- 表单中元素的更改值为't已发布
- Small Javascript从动态表单中删除多个元素的问题
- 为什么表单元素不应命名为submit
- 如何使用相同的javascript控制表单中的不同元素
- 从函数中选择要触发表单提交的正确元素
- 如何重置搜索表单中的特定表单元素
- Rails-带有单选按钮的表单,带有启用/禁用附加元素的javascript操作
- 使用 ng-repeat访问 ng 表单元素/值
- 获取电子邮件附件的表单元素
- js 语法传递名称元素表单验证
- 如何选择元素表单列表并将其放入文本框中
- 如何使用JQuery获取主体中第一个元素(表单)的id
- 尝试使用每个查找元素表单XML文件