Question

Problem: It only submits the first form on the page.

I have a todos that can be checked by clicking in a checkbox when they are done.

In my partial I have a form. Its rendered as many times as there are todos, but with different ids. In the form there is a checkbox. When clicked the form submits.

The partial

<%= 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 %>

Here is the 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();
   })
})

The console.log displays the correct id. But, the first form on the page gets submitted.

Answer 1

Railscasts has an excellent cast on this subject, called jquery-ajax-revised (#136). It contains pretty much al basic knowledge for a simple To Do-list.

With regard to your question, all you pretty much need is the following javascript:

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

This second line means you remove the submit button from the review (if you have one). The third line responds to actually clicking the checkbox (from the form with class name edit_todo, you can check the classname of your form by clicking on inspect element in Chrome).The fourth line actually fetches the form element from the checkbox you click on and submits that form.

Hopefully I hereby answered your question, otherwise I would like some further explanation regarding your problem.