[英]calculations on dynamically generated fields
I have some dynamically generated fields in the form. 我在表单中有一些动态生成的字段。 see code below. 参见下面的代码。
<% count = 0 %>
<% @details.each do |detail| %>
<div class="row">
<div class="col l3">
<div class="input-field string optional disabled bill_bill_details_item_name">
<input class="string optional disabled" disabled="disabled" type="text" name="bill[bill_details_attributes][<%= count %>][item_name]" id="bill_bill_details_attributes_<%= count %>_item_name" value="<%= detail.item_name %>" />
<input type="hidden" name="bill[bill_details_attributes][<%= count %>][item_name]" id="bill_bill_details_attributes_<%= count %>_item_name" value="<%= detail.item_name %>" />
</div>
</div>
<div class="col l3">
<div class="input-field decimal optional disabled bill_bill_details_quantity">
<input class="numeric decimal optional disabled" disabled="disabled" type="number" step="any" name="bill[bill_details_attributes][<%= count %>][quantity]" id="bill_bill_details_attributes_<%= count %>_quantity" value="<%= detail.item_quantity %>" />
<input type="hidden" name="bill[bill_details_attributes][<%= count %>][quantity]" id="bill_bill_details_attributes_<%= count %>_quantity" value="<%= detail.item_quantity %>" />
</div>
</div>
<div class="col l3">
<div class="input-field decimal optional bill_bill_details_cost">
<input class="numeric decimal optional" type="number" step="any" name="bill[bill_details_attributes][<%= count %>][cost]" id="bill_bill_details_attributes_<%= count %>_cost" />
<input type="hidden" name="bill[bill_details_attributes][<%= count %>][item_type]" id="bill_bill_details_attributes_<%= count %>_item_type" value="<%= detail.item_type %>" />
<input type="hidden" name="bill[bill_details_attributes][<%= count %>][item_id]" id="bill_bill_details_attributes_<%= count %>_item_id" value="<%= detail.item_id %>" />
</div>
</div>
<div class="col l3">
<div class="input-field decimal optional disabled bill_bill_details_item_total">
<input class="numeric decimal optional disabled" disabled="disabled" type="number" name="bill[bill_details_attributes][<%= count %>][item_total]" id="bill_bill_details_attributes_<%= count %>_item_total">
<input type="hidden" name="bill[bill_details_attributes][<%= count %>][item_total]" id="bill_bill_details_attributes_<%= count %>_item_total" />
</div>
</div>
</div>
<% count += 1 %>
<% end %>
Which generate something like: 生成如下内容:
I need to have the user enter the cost of each item and then automatically calculate the value in the final column. 我需要让用户输入每个项目的费用,然后自动计算最后一栏中的值。 I have tried blur by adding a class to the cost input but it causes issues as it triggers the blur event almost 100 times before it returns the access back, 我曾尝试通过在成本输入中添加一个类来进行模糊处理,但由于它触发模糊事件将返回访问权之前将近100次,因此会引起问题,
What is the best way to be able to achieve this? 实现此目标的最佳方法是什么? I am hoping for a nonobtrusive solution using CoffeeScript. 我希望使用CoffeeScript提供一种非干扰性的解决方案。
you can achieve this by using key_up
jquery event on that that field and set value of total cost . 您可以通过对该字段使用key_up
jquery事件并设置总费用的值来实现此key_up
。 i can show you an example: - 我可以举一个例子:
you can modify it accordingly 您可以相应地对其进行修改
$('#cost-field-id').on('keyup', function(e){
var cost = parseFloat($(this).val());
$('#total-calculation-field-id').val((cost).toFixed(2));
});
The way I was finally able to do this was by adding a class to the dynamic fields generating code. 我最终能够做到这一点的方法是将一个类添加到生成代码的动态字段中。 So although the id of the field changes I will still have a class which remains constant. 因此,尽管该字段的ID发生了变化,但我仍然拥有一个保持不变的类。
I can then call a on change on the class and pick up the required detail. 然后,我可以在课程上进行更改,并获取所需的详细信息。
Eaxmple code below. 下面的示例代码。
$(document).on('change', 'input.mycost', function() {
var cost, id, quantity, quantity_id, total, total_id;
// this will provide me with the count variable value
// as i know it will always be in this position of the string.
id = this.id.split('_')[4];
// I can then use the same to get generate the id's of other tags.
// and perform the calculations I need to make.
total_id = '#bill_bill_details_attributes_' + id + '_item_total';
quantity_id = '#bill_bill_details_attributes_' + id + '_quantity';
quantity = parseFloat($(quantity_id).val());
cost = parseFloat($(this).val());
total = quantity * cost;
return $(total_id).val(total.toFixed(2));
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.