将新字段追加到窗体

Question

如何在不使用部分的情况下在表单上动态添加/删除新的输入字段。

<%= f.fields_for :list_entries do |list_entry| %>
  <div id="entries">
    <div class="control-group" id="new_entry">
      <%= list_entry.label :description, 'Description:', class: "control-label mandatory_field"%>
      <div class="controls">
        <%= list_entry.text_field(:description, class: "m-wrap col-lg-8")%>
      </div>
    </div>
    <a href="javascript:;" id="addNewEntry">Add Entry</a>
  </div>
<% end %>

。

<script>
    $(document).ready(function(){
       $('#addNewEntry').click(function(){
          $('#entries').append()
       });
          $('#entries').on('click', '#list_entry', function(){
              $(this).closest('.control-group').remove();
          });
    });
</script>

我不确定在附加中放什么。如果我将 HTML 代码放在附加中，则fields_for list_entry不会转移。当我使用部分时也发生了同样的事情。我也不想使用茧宝石，因为这是我应用程序的无限小部分。

有什么想法吗？

Answer 1

我在这里看到了 2 种不同的可能性

1. 您可以使用您的追加，并执行以下操作 $(object).append("<input name='somename' value='someval'/>")

2. 将 ajax 请求发送到服务器。服务器将以类似respond.js.erb的视图进行响应，您可以在其中执行以下操作

$(object).append('<%= j(render some_partial_with_field) %>'

在部分内部，您可以生成所需的任何代码