在 Rails 中添加更多字段以动态形成答案

【问题标题】：Add more fields to form dynamically in Rails在 Rails 中添加更多字段以动态形成
【发布时间】：2017-03-01 19:56:44
【问题描述】：

我有一个向我的表单添加部分的按钮。部分是使用fields_for 的附加表单字段主要形式用于创建Project，fields_for 用于创建属于项目的RewardsTier 模型一切都适用于添加一个额外的RewardsTier，但是当我添加一个以上的额外RewardsTier 表单时，它们在html 中都有相同的名称：project[rewards_tiers_attributes][1][min_amount]。我想我只需要增加整数值，但不知道该怎么做

#_rewards_tier_form.html.erb
<div class="tier-creation-div">
    <%= f.fields_for :rewards_tiers do |r| %>
        <label for="min_amount">Tier Amount</label>
        <%= r.text_field :min_amount, data: {name: 'min_amount'}, class: "w-input", id: "min_amount", maxlength: "256", placeholder: "$1", required: "required",  autofocus: 'true' %>

        <label for="body">Tier Body</label>
        <%= r.text_area :body, data: {name: 'body'}, class: "w-input", id: "body", maxlength: "5000", placeholder: "We email you the show notes and links...", required: "required", autofocus: 'true' %>
    <% end %>
</div>

#new.html.erb
<%= form_for(@project, data: {name: "Email Form 2"}, html: {class: 'w-clearfix', id: "email-form-2", name: "email-form-2"}, url: '/projects/create', method: 'post' ) do |f| %>
  ...
  <div class="rewards-creation-div" id="rewards-creation-div">
    <h4>Rewards</h4>
    <%= render 'rewards_tier_form', f: f %>
  </div>
  <div>
    <a class="add-tier-button w-button" id="add-tier-button" href="#">+ Add tier</a>
    <script type="text/javascript">
      $('#add-tier-button').click(function() {
      $("#rewards-creation-div").append('<%= escape_javascript("#{render 'rewards_tier_form', f: f}").html_safe %>');
      });
    </script>
  </div>  
  ...
  <input class="submit-project-button w-button" data-wait="Please wait..." type="submit" value="Create Project"><a class="cancel-button w-button" href="#">Cancel</a>
<% end %>

【问题讨论】：

标签： javascript jquery html ruby-on-rails

【解决方案1】：

这不能在 Rails 中完成，因为它都是在客户端呈现的。我通过使用 Javascript 解决了这个问题。我的 JS 不是很好，所以可能有一种更简洁的编写方式，但它可以工作。

#_rewards_tier_form.html.erb
<div class="tier-creation-div">
    <script>
        document.getElementById("rewards-creation-div").lastElementChild.insertAdjacentHTML('beforeend','<label for="min_amount">Tier Amount</label>');
        document.getElementById("rewards-creation-div").lastElementChild.insertAdjacentHTML('beforeend','<input data-name="min_amount" class="w-input" id="min_amount" maxlength="256" placeholder="$1" required="required" autofocus="autofocus" size="256" type="text" name="project[rewards_tiers_attributes]['+rewards_tier_index+'][min_amount]">');
        document.getElementById("rewards-creation-div").lastElementChild.insertAdjacentHTML('beforeend','<label for="body">Tier Body</label>');
        document.getElementById("rewards-creation-div").lastElementChild.insertAdjacentHTML('beforeend', '<textarea data-name="body" class="w-input" id="body" maxlength="5000" placeholder="We email you the show notes and links..." required="required" autofocus="autofocus" name="project[rewards_tiers_attributes]['+rewards_tier_index+'][body]"></textarea>');
    </script>
</div>

#new.html.erb
<div class="rewards-creation-div" id="rewards-creation-div">
    <h4>Rewards</h4>
    <script type="text/javascript">
        var rewards_tier_index = 0;
    </script>
    <%= render 'rewards_tier_form', f: f %>
</div>
<div>
    <a class="add-tier-button w-button" id="add-tier-button" href="#">+ Add tier</a>
    <script type="text/javascript">
        $('#add-tier-button').click(function() {
            rewards_tier_index = rewards_tier_index + 1;
            $("#rewards-creation-div").append('<%= escape_javascript("#{render 'rewards_tier_form', f: f, child_index: @indx}").html_safe %>');
        });
    </script>
</div>

【讨论】：