title: How to have a checkbox fire an ajax call when checked or unchecked in Rails3?
body: <p>In my Rails3 application, I have a group of check boxes for a list of tasks. I'd like to fire off an ajax call back to the server whenever one of the check boxes are checked or unchecked. </p>
  
  <p>This code is part of a much larger form:</p>
  
  <pre><code>&lt;% @provider.tasks_assigned.each do |task_assigned| %&gt;
    &lt;%= form_for :task_assigned, :url =&gt; { :controller =&gt; "tasks_assigned", 
      :action =&gt; 'update' }, :remote =&gt; true do |t|%&gt;
      &lt;%= t.hidden_field :id, :value =&gt; task_assigned.id %&gt;
      &lt;%= t.check_box :provider_completed, 
        { :checked =&gt; task_assigned.provider_completed, 
        :onclick =&gt; "$(this).parent().trigger('submit.rails');" } %&gt;
      &lt;%= t.label :provider_completed, 
        task_assigned.task_desc.gsub(/(\n\r|\r\n|\n)/, '&lt;br&gt;').html_safe, 
        :style =&gt; "color: #666666; margin-top: 0px;" %&gt;
      &lt;br /&gt;          
    &lt;% end %&gt;
  &lt;% end %&gt;
  </code></pre>
  
  <p>This is the generated html:</p>
  
  <pre><code>&lt;form accept-charset="UTF-8" action="/tasks_assigned/update" data-remote="true"
    method="post"&gt;
    &lt;div style="margin:0;padding:0;display:inline"&gt;&lt;input name="utf8" type="hidden"
      value="&amp;#x2713;" /&gt;
      &lt;input name="authenticity_token" type="hidden"
        value="jECJ4FkV48T5EgCEE0hhPvsbWjG+WGXn59L2knMv7No=" /&gt;
    &lt;/div&gt; 
    &lt;input id="task_assigned_id" name="task_assigned[id]" type="hidden" value="25" /&gt; 
    &lt;input name="task_assigned[provider_completed]" type="hidden" value="0" /&gt;
    &lt;input id="task_assigned_provider_completed" name="task_assigned[provider_completed]"
      onclick="$(this).parent().trigger('submit.rails');" type="checkbox" value="1" /&gt; 
    &lt;label for="task_assigned_provider_completed" 
      style="color: #666666; margin-top: 0px;"&gt;abc&lt;/label&gt; 
    &lt;br /&gt;            
  &lt;/form&gt;
  &lt;form accept-charset="UTF-8" action="/tasks_assigned/update" data-remote="true"
    method="post"&gt;
    &lt;div style="margin:0;padding:0;display:inline"&gt;
      &lt;input name="utf8" type="hidden" value="&amp;#x2713;" /&gt;
      &lt;input name="authenticity_token" type="hidden"
        value="jECJ4FkV48T5EgCEE0hhPvsbWjG+WGXn59L2knMv7No=" /&gt;
    &lt;/div&gt; 
    &lt;input id="task_assigned_id" name="task_assigned[id]" type="hidden" value="24" /&gt; 
    &lt;input name="task_assigned[provider_completed]" type="hidden" value="0" /&gt;
    &lt;input id="task_assigned_provider_completed" name="task_assigned[provider_completed]"
      onclick="$(this).parent().trigger('submit.rails');" type="checkbox" value="1" /&gt; 
    &lt;label for="task_assigned_provider_completed" 
      style="color: #666666; margin-top: 0px;"&gt;Provider completed&lt;/label&gt; 
    &lt;br /&gt;            
  &lt;/form&gt;
  &lt;form accept-charset="UTF-8" action="/tasks_assigned/update" data-remote="true"
    method="post"&gt;
    &lt;div style="margin:0;padding:0;display:inline"&gt;
      &lt;input name="utf8" type="hidden" value="&amp;#x2713;" /&gt;
      &lt;input name="authenticity_token" type="hidden"
        value="jECJ4FkV48T5EgCEE0hhPvsbWjG+WGXn59L2knMv7No=" /&gt;
    &lt;/div&gt; 
    &lt;input id="task_assigned_id" name="task_assigned[id]" type="hidden" value="22" /&gt; 
    &lt;input name="task_assigned[provider_completed]" type="hidden" value="0" /&gt;
    &lt;input id="task_assigned_provider_completed" name="task_assigned[provider_completed]"
      onclick="$(this).parent().trigger('submit.rails');" type="checkbox" value="1" /&gt; 
    &lt;label for="task_assigned_provider_completed" 
      style="color: #666666; margin-top: 0px;"&gt;a&lt;br&gt;b&lt;br&gt;c&lt;/label&gt; 
    &lt;br /&gt;    
  &lt;/form&gt;
  </code></pre>
  
  <p>If I add a submit button in the form it works without any problem but this doesn't look very appealing.</p>
  
  <p>The 'onclick="$(this).parent().trigger('submit.rails');"' is my vain attempt to trigger the rails submit code when the check box is checked. The parent (the form) is never found. A javascript error is generated "Object # has no method 'parent'".</p>
  
  <p>I believe I am very close to getting it figured out, but I'm obviously missing something.</p>