Question

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

<% @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 %>来唯一标识每个表单，以便只隐藏提交的表单？

Answer 1

实现目标的代码中最小的变化可能是隐藏了form，这是点击按钮的closest ancestor：

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

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

Answer 2

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

$('.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>

Answer 3

你可以试试这个：

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

如何在提交时隐藏表单？

3 个答案:

演示