在Ruby on Rails中使用JavaScript创建和删除form_tag

Question

我试图弄清楚如何使用JavaScript将form_tag动态地添加到我的页面中。 我可能可以弄清楚如何添加常规表单，但是我更喜欢添加form_tags，以便在提交表单时可以得到方便的“ authenticity_token”。 这是我的看法

show.html.erb：

<button id="add-new-form">Add invite</button>

<div class="invite-user-forms">
 <%= form_tag("/contests/#{@contest.id}", remote: true, class: "invite-user", controller: "contestants", action: "create", method: "post") do %>
    <%= text_field_tag(:emailVal) %>
    <%= submit_tag("Send invitation") %>
    <%= button_tag("Remove") %>
  <% end %>
</div>

这是我对JavaScript的期望概述，尽管我不知道如何添加form_tag ... application.js：

$(document).ready(function(){
  $("#add-new-form").click(function(){
    $(".invite-user-forms").append("form_tag??");
  });
});

此外，我想通过点击“删除”删除的form_tag button_tag ......我认为每一个新的形式需要一个唯一的ID，为了这个工作，虽然...所以也许我的JavaScript是这样的？

$(document).ready(function(){
  $("#remove-button-(some unique value)").click(function(){
    $("#unique-form-value").remove();
  });
});

任何建议都将不胜感激。

Answer 1

为您指明正确的方向：

<%= form_for Contestants.new, remote: true do |f| %>
<%= f.button :submit, "create new contestant" %>
<% end %>

在下面，您需要遍历所有已创建的表单。

<%= @contestants.each do %>
    <div class="invite-user-forms">
         <%= form_tag("/contests/#{@contest.id}", remote: true, class: "invite-user", controller: "contestants", action: "create", method: "post") do %>
        <%= text_field_tag(:emailVal) %>
        <%= submit_tag("Send invitation") %>
        <%= button_tag("Remove"), remote: true, method: :delete %>
      <% end %>
    </div>
<% end %>

但是，现在-您实际上并没有创建新的参赛者，当您单击上方的按钮时-已经创建了该参赛者-另外，创建条目时不能为空（不能只是提交按钮，就像我在上面显示的那样，因此最好将某些内容放在<％= f.hidden_​​field）中。 现在，您正在编辑参赛者，因此此表单需要处于编辑操作之下。 此表单还需要“远程：真”

如果您不确定remote：true和带有Rails的Ajax的工作原理，只需在Google上使用“ remote：true rails”并吸收所有可以获取的信息- 就有很多工作。