Question

问题：它只在页面上提交第一个表单。

我有一个待办事项，可以在完成后点击一个复选框进行检查。

在我的部分我有一个表格。它呈现的次数与todos一样多，但具有不同的id。在表单中有一个复选框。单击时，表单会提交。

部分

<%= form_for todo, :remote => true, :html => {:id => "edit_done_todo_#{todo.id}"} do |f| %>
  <%= f.hidden_field(:done_by_user_id,:value => current_user.id) %>
  <%= f.check_box :completed, :class => "done_box", :id => todo.id %>
<% end %>

这是javascript

jQuery.fn.mark_todo_done = function (){
    var id = $(this).attr("id")
    console.log(id)
    $("#edit_done_todo_" + id).submit()

};
$(document).ready(function() {
 $(".done_box").live("click", function() { 
     $(this).mark_todo_done();
   })
})

console.log显示正确的ID。但是，页面上的第一个表单已提交。

Answer 1

Railscasts在这个主题上有很好的演员，称为jquery-ajax-revised（＃136）。它包含了一个简单的待办事项列表的基本知识。

关于你的问题，你非常需要的是以下javascript：

  $(document).ready(function() {
    $('.edit_todo input[type=submit]').remove();
    $('.edit_todo input[type=checkbox]').click(function() {
      $(this).parent('form').submit();
    });
  });

第二行表示您从评论中删除提交按钮（如果有的话）。第三行响应实际单击复选框（从类名为edit_todo的表单中，您可以通过单击Chrome中的inspect元素来检查表单的类名）。第四行实际从您单击的复选框中获取表单元素，提交该表格。

希望我在此回答您的问题，否则我想对您的问题作进一步解释。

使用带有jquery和rails的check_boxes在一个页面上提交多个表单

1 个答案: