0
我在我的rails應用程序中使用nested_form。我需要添加onclick事件,它添加前兩個字段並將總和呈現在第三個字段中。該腳本應該在所有嵌套字段中運行。我從寶石文檔中嘗試了以下代碼。日期選擇工作正常。但不知道如何修改onchange事件計算。在rails中nested_form中的Onchange事件5
$(document).on('nested:fieldAdded', function(event){
var field = event.field;
var dateField = field.find('.date');
dateField.datepicker();
})
我的形式,
<%= nested_form_for(unplanned_receipt, validate: true, html: {multipart:true}) do |f| %>
<div class="row">
<div class="col-md-6 form-group">
<%= f.label :date, class: "col-md-4" %>
<%= f.text_field :date, class: "col-md-8 form-control datepicker" %>
</div>
<div class="col-md-6 form-group">
<%= f.label :upr_no, 'UPR No', class: "col-md-4" %>
<%= f.text_field :upr_no, class: "col-md-8 form-control" %>
</div>
<div class="col-md-6 form-group">
<%= f.label :uom, 'UOM', class: "col-md-4" %>
<%= f.select :uom, UnplannedReceipt.uoms.keys.map { |e| [e.humanize, e] }, {:required=>true}, class: "col-md-8 form-control e2" %>
</div>
<div class="col-md-6 form-group">
<%= f.label :receipt_type, class: "col-md-4" %>
<%= f.select :receipt_type, UnplannedReceipt.receipt_types.keys.map { |e| [e.humanize, e] }, {:required => true}, class: "col-md-8 form-control e2" %>
</div>
</div>
<br>
<div class="col-md-12">
<table class="table table-bordered" id="tasks">
<thead>
<tr>
<th>Material Name</th>
<th>Receipt Qty</th>
<th>Inventory Qty</th>
<th>Final Qty</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<%= f.fields_for :unplanned_bulk_materials, validate: true,:wrapper => false do |e| %>
<tr class="fields">
<td><%= e.text_field :material_name, :required => true, class: "form-control" %></td>
<td><%= e.text_field :receipt_qty, :required => true, class: "form-control r_qty" %></td>
<td><%= e.text_field :inventory_qty, :required => true, class: "form-control i_qty" %></td>
<td><%= e.text_field :final_qty, :required => true, class: "form-control f_qty" %></td>
<td><%= e.link_to_remove do%><i class="fa fa-times" style="color:red"></i><%end%></td>
</tr>
<% end %>
</tbody>
</table>
<p align="center">
<%= f.link_to_add :unplanned_bulk_materials, :data => { :target => "#tasks" }, class:"btn btn-sm btn-success" do%><i class="fa fa-plus">Add More</i><%end%>
</p>
</div>
<div class="actions">
<% if params[:id].nil? %>
<%= f.submit 'Save', :class=>"btn btn-info" %>
<% else %>
<%= f.submit 'Update', :class=>"btn btn-warning" %>
<% end %>
</div>
<% end %>
<script type="text/javascript">
$(".i_qty").on("blur", function() {
var amt=parseFloat($(".r_qty").val())+parseFloat($(".i_qty").val());
$('.f_qty').val(Math.round(amt));
});
</script>
我想上面的腳本中的所有嵌套領域運行。有人請提出建議。提前致謝。
它適用於第一行,併產生所有其他行相同的值。 @inye。 – poombavai
檢查編輯,這個想法是得到每個事件的相應輸入(每個添加事件) – inye
它的工作。謝謝@inye – poombavai