javascript - 在 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??");
  });
});

此外，我想通过单击“删除”button_tag来删除 form_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'

如果您不确定 Remote: true 和 Ajax with Rails 的工作原理，只需在 google 上搜索“remote: true Rails”并获取您可以获得的任何信息 - 有很多信息。