我在Rails应用程序中使用nested_form。我需要在嵌套表单中添加onchange事件。每次添加新行并在quantity
文本字段中输入值时,该值应与以前添加的行的quantity
字段一起添加。添加的值应显示在total
文本字段中。目的是找到quantity
的总和并显示在total
字段中。此脚本应适用于以嵌套形式添加的每个新行。有人请帮忙。提前致谢。
我的Gemfile
gem 'rails', '~> 5.0.2'
gem 'pg', '~> 0.18'
gem 'puma', '~> 3.0'
gem "responders"
gem "active_model_serializers", github: "rails-api/active_model_serializers"
gem 'date_validator'
gem 'axlsx_rails'
gem 'carrierwave', '~> 1.0'
gem 'jquery-ui-rails'
gem "select2-rails"
gem 'bootstrap', '~> 4.0.0.alpha6'
gem 'font-awesome-sass', '~> 4.7.0'
gem 'will_paginate', '3.1.5'
gem "nested_form"
gem 'yaml_db'
gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.2'
gem 'jquery-rails'
gem 'turbolinks', '~> 5'
gem 'jbuilder', '~> 2.5'
我的
application.js
//= require jquery
//= require jquery_ujs
//= require select2
//= require jquery_nested_form
//= require turbolinks
//= require jquery-ui
//= require bootstrap
//= app
//= vendor
//= require_tree .
而我的
_form.html.erb
<%= nested_form_for(normalmenu_site) do |f| %>
<%= f.text_field :total, readonly: true, class: "tot" %>
<table class="table table-container" id="tasks">
<thead>
<th>Quantity/Per Head</th>
<th>Action</th>
</thead>
<tbody>
<%= f.fields_for :normal_menus ,wrapper:false do |ff| %>
<tr class="fields">
<td><%= ff.text_field :quantity, class: "dt" %></td>
<td><%= ff.link_to_remove "".html_safe,:class=>"fa fa-trash-o "%></td>
</tr>
<%end%>
<%= f.link_to_add "".html_safe, :normal_menus,:class=>"fa fa-plus ", :data => { :target => "#tasks" } %>
</tbody>
</table>
<% end %>
<script type="text/javascript">
$(document).on('nested:fieldAdded', function(event){
var field = event.field;
var total = ($(".tot").val());
var roleField = field.find('.dt');
$(".dt").keyup( function() {
alert(roleField.val());
var total += roleField.val();
});
})
</script>
最佳答案
根据文档here
该gem仅适用于Rails3。有关插件,请参见rails2分支。
在Rails 2中工作。nested_form
仅适用于rails 3
,但您正在使用rails 5
关于javascript - JavaScript计算未在Rails嵌套形式内触发,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/44652456/