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

问题：它只提交页面上的第一个表单。使用jquery和rails在check_boxes的一个页面上提交多个表单

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

在我的部分我有一个表单。它的渲染次数与待办事项相同，但带有不同的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。但是，页面上的第一个表单被提交。

来源

2012-12-10 Andreas Lyngstad

你能不能显示呈现的HTML标记。我的猜测是缺少''标签，这会导致浏览器因为无效而删除的嵌套表单。 –

原因是每个请求只能提交一个表单。你应该做一个AJAX提交，发送单独的表单，或者你可以考虑将所有事情合并成一个非AJAX决策的表单。 –

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中的检查元素来检查表单的类名）。第四行实际上是从您点击的复选框中获取表单元素，提交该表格。

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

来源

2013-02-01 15:25:33

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

回答

相关问题