如何在提交时隐藏表单？答案

【问题标题】：How to hide form upon submit?如何在提交时隐藏表单？
【发布时间】：2017-05-22 05:32:17
【问题描述】：

当用户提交时，我们如何隐藏相应的表单？

<% @challenge.dates_challenged.first(@challenge.days_challenged + @challenge.missed_days).each_with_index do |date, i| %>
 <div id="show-all-notes"> # upon submit the text appears here, javascript magic
 </div>
 <div class="notes-form-background">
   DAY <%= i + 1 %>
   <%= date.strftime("%b %d, %Y") %>
   <%= form_for [@notable, @note], remote: true do |f| %>
     <%= f.text_area :notes_text %>
     <%= f.submit, class: "btn" %>
   <% end %>
 </div>
<% end %>

 <script>
   $(document).ready(function(){
     $('.btn').click(function(){
       $('form').toggle();
     });
   });
 </script>

使用类似脚本的东西，虽然它删除了表单的所有迭代，而不仅仅是提交的那个。

有没有办法使用Day <%= i + 1 %> 来唯一标识每个表单，以便仅隐藏提交的表单？

【问题讨论】：

标签： javascript jquery ruby-on-rails ruby forms

【解决方案1】：

你可以试试这个：

$(document).ready(function(){
     $('.btn').click(function(){
       $(this).parents('form:eq(0)').toggle();
     });
});

【讨论】：

【解决方案2】：

您可以使用.closest() 方法来查找与.btn 元素最近的form 祖先：

$('.btn').click(function(){
  $(this).closest('form').toggle();
});

演示

$('.btn').click(function(){
  $(this).closest('form').toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  form1
  <button class="btn">Submit</button>
</form>
<form>
  form2
  <button class="btn">Submit</button>
</form>

【讨论】：

【解决方案3】：

为实现目标而对代码进行的最小更改可能是将form 隐藏起来，即closest ancestor 到单击的按钮：

<script>
  $(document).ready(function(){
    $('.btn').click(function(){
      $(this).closest('form').hide();
    });
  });
</script>

否则，您可以为表单和按钮对生成唯一 ID，在按钮单击处理程序中解析 ID，格式化相关表单 ID 并找到相应的表单以隐藏。

【讨论】：