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

Question

I have a button that adds a partial to my form. The partial is additional form fields using fields_for The main form is for creating a Project and the fields_for are for creating a RewardsTier model that belongs to the Project Everything works for adding one additional RewardsTier , but when I add more than one additional RewardsTier form they all have the same name in the html: project[rewards_tiers_attributes][1][min_amount] . I think I just need the integer value to increment, but am not sure how to do this

#_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 %>

Answer 1

This can't be done in Rails because it's all rendered client side. I got around this by using Javascript. My JS isn't great, so there is probably a cleaner way of writing it, but it works.

#_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>