Javascript 动态添加和删除表单的新字段，但每次添加和删除的字段数量相同

我有一个没有嵌套模型的表单

class UserProductsController

  def new
    @user_product = current_user.user_products.build
  end
end

使用jquery/javascript，我希望在同一表单上添加和删除新的@user\u产品字段。这就是它通常的样子：

<%= form_for(@user_product) do |f| %>
    <%= f.error_messages %>
      <%= f.text_field :product %>
      <%= f.text_field :address %>
      <%= f.text_field :price %>
    <%= f.submit %>
<% end %>

我正在努力实现：

<%= form_for(@user_product) do |f| %>
      <%= f.error_messages %>
      <%= f.text_field :product_name %>
      <%= f.text_field :address %>
      <%= f.text_field :price %>
      ---New ID(New generated ID, could be any new number in the database)
      <%= f.text_field :product_name %>
      <%= f.text_field :address %>
      <%= f.text_field :price %>
      <%= Remove this Product %> # ajax style, this link removes this product entirely
      ----ID 3----
      <%= f.text_field :product_name %>
      <%= f.text_field :address %>
      <%= f.text_field :price %>
      <%= Remove this Product %>
     -----Add link------
      <%= Add Another Field %> # ajax style adding
   <%= f.submit %>
<% end %>

请注意未预设的新ID和“一次提交”按钮，这样用户一次可以创建多个产品。我如何实现上述目标

多谢各位

答复: 使用User.rb模型，您可以按照James所说的做。这是我的表格

<%= form_for(current_user, :url => user_products_path) do |f| %>
  <%= f.error_messages %>
    <%= f.fields_for :user_products do |builder| %>
     <%= render "user_product_fields", :f => builder %>
    <% end %>
     <%= link_to_add_fields "Add a UserProduct", f, :user_products %>
    <%= f.submit "Create" %>
<% end %>

_用户\产品\字段.html.erb

签出此：

签出此：

---

您可以使用它。

您可以使用它。

正如其他人所建议的那样，使用嵌套表单是毫无帮助的

您需要表单基于当前的用户对象，其中包含用于声明用户产品的字段。您需要设置表单的url，以便发回用户\产品控制器，而不是使用url\的用户控制器，并且您需要调整用户\产品控制器更新并创建操作，以使用参数[：user]而不是参数[：user\ u product]

如果正确配置了accepts\u嵌套的属性，那么所有属性都应该是好的

顺便说一句，如果您遵循这些railscasts，您会发现添加新内容的javascript不适用于Rails3.x

对于视图帮助程序，应该使用类似于此的内容

module ApplicationHelper
  def link_to_remove_fields(name, f)
    f.hidden_field(:_destroy) + link_to_function(name, "remove_fields(this)")
  end

  def link_to_add_fields(name, f, association)
    new_object = f.object.class.reflect_on_association(association).klass.new
    fields = f.fields_for(association, new_object, :child_index => "new_#{association}") do |builder|
      render(association.to_s.singularize + "_fields", :f => builder)
    end
    link_to_function(name, "add_fields(this, '#{association}', '#{escape_javascript(fields)}')")
  end
end

在application.js文件中为javascript编写类似的代码

// Place your application-specific JavaScript functions and classes here
// This file is automatically included by javascript_include_tag :defaults
function remove_fields(link) {
  $(link).previous("input[type=hidden]").value = "1";
  $(link).up(".fields").hide();
}

function add_fields(link, association, content) {
  var new_id = new Date().getTime();
  var regexp = new RegExp("new_" + association, "g")
  $(link).up().insert({
    after: content.replace(regexp, new_id)
  });
}

很明显，您的表单需要重构成这样

<%= form_for(current_user, :url => user_product_path) do |f| %>
<!-- add your f.fields_for :user_products here, probably in a rendered partial -->
<%end%>

---

对于rails强制转换来说，这应该足够让您继续进行了

，正如其他人所建议的那样，使用嵌套表单是没有什么帮助的

您需要表单基于当前的用户对象，其中包含用于声明用户产品的字段。您需要设置表单的url，以便发回用户\产品控制器，而不是使用url\的用户控制器，并且您需要调整用户\产品控制器更新并创建操作，以使用参数[：user]而不是参数[：user\ u product]

如果正确配置了accepts\u嵌套的属性，那么所有属性都应该是好的

顺便说一句，如果您遵循这些railscasts，您会发现添加新内容的javascript不适用于Rails3.x

对于视图帮助程序，应该使用类似于此的内容

module ApplicationHelper
  def link_to_remove_fields(name, f)
    f.hidden_field(:_destroy) + link_to_function(name, "remove_fields(this)")
  end

  def link_to_add_fields(name, f, association)
    new_object = f.object.class.reflect_on_association(association).klass.new
    fields = f.fields_for(association, new_object, :child_index => "new_#{association}") do |builder|
      render(association.to_s.singularize + "_fields", :f => builder)
    end
    link_to_function(name, "add_fields(this, '#{association}', '#{escape_javascript(fields)}')")
  end
end

在application.js文件中为javascript编写类似的代码

// Place your application-specific JavaScript functions and classes here
// This file is automatically included by javascript_include_tag :defaults
function remove_fields(link) {
  $(link).previous("input[type=hidden]").value = "1";
  $(link).up(".fields").hide();
}

function add_fields(link, association, content) {
  var new_id = new Date().getTime();
  var regexp = new RegExp("new_" + association, "g")
  $(link).up().insert({
    after: content.replace(regexp, new_id)
  });
}

很明显，您的表单需要重构成这样

<%= form_for(current_user, :url => user_product_path) do |f| %>
<!-- add your f.fields_for :user_products here, probably in a rendered partial -->
<%end%>

这对于rails演员来说应该足够让你继续了