Form submit on jQuery click event only selecting very first form

Question

I have a todo/task list type of app built with Rails.

I have a list of categories with their respective tasks below the name of the category.

I have a checkbox next to each task that when I click it, I want the form for that particular task to submit and update the task to be either complete/imcomplete. I have a jQuery function to do this:

$(function(){
  $('input:checkbox').on('click', function(){
    $(this).parents('form').submit();
  });
});

My form looks like this (in HAML):

- form_class = task.complete? ? "edit_task complete" : "edit_task"

= form_for task, remote: true, html: {:class => form_class } do |f|
  = f.check_box :complete
  = f.label :complete, task.name
  = link_to task_path(task.id), remote: true, method: :delete, class: "delete-task" do
    %i.icon-remove.pull-right

The output HTML is this:

<form accept-charset="UTF-8" action="/tasks/338" class="edit_task" data-remote="true" id="edit_task_338" method="post">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓">
<input name="_method" type="hidden" value="put">
<input name="authenticity_token" type="hidden" value="q7bvSGPr1IDf1p2/SKsssbdiQj+NBWmg/C6zPB3x+jM=">
</div>
<input name="task[complete]" type="hidden" value="0">
<input checked="checked" id="task_complete" name="task[complete]" type="checkbox" value="1">
<label class="338" for="task_complete" id="task-label">another task</label>
<a href="/tasks/338" class="delete-task" data-method="delete" data-remote="true" rel="nofollow">
<i class="icon-remove pull-right"></i></a>
</form>

The problem is that when I click ANY checkbox, instead of finding that particular task's form, it only ever selects and toggles the very first task on the page.

Any help would be much appreciated.

Thanks

Are your forms nested? Also, try .closest instead of .parents. — Blender
– Blender, Commented Mar 9, 2013 at 22:15

Sam · Accepted Answer · 2013-03-09 22:50:27Z

3

As Blender suggested, try using closest instead of parents.

$('input:checkbox').click(function(e){
  $(this).closest('form').submit();
});

answered Mar 9, 2013 at 22:50

Sam

3,06818 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

KALBB · Accepted Answer · 2013-03-09 22:57:56Z

This is the correct behavior. Since you are using input:checkbox this refers to any input element of type checkbox on the page. So it seems since the jQuery set contains all the check boxes of every form, it only processes the first one maybe because submit() cannot process more than one form at a time.

Instead what you may like to try either of the following. One uses $.parent('form') instead of parents().

$(function(){
  $('input:checkbox').on('click', function(){
    $(this).parent('form').submit(); //get my immediate parent which is type form.
  });
});

or add the id of the form to the checkbox, and use to find its parent. This is good if your inputs are nested deeper within the form, which means parent() wont work.

<input data-form="edit_task_338" checked="checked" id="task_complete" name="task[complete]" type="checkbox" value="1">

//then
$(function(){
      $('input:checkbox').on('click', function(){
        //use the data-attr to retrive the form's id i.e edit_task_338
        $('form[id='+ $(this).data('form')) +']').submit(); 
      });
    });

They are a few more ways but it involved a different HTML setup.

Jack · Accepted Answer · 2013-03-18 01:36:48Z

0

I tried all that but none of it worked. I eventually figured it out by adding the id of the task to the label and checkbox input like so:

= f.check_box :complete, id: "task-#{task.id}"
= f.label :name, task.name, for: "task-#{task.id}"

Now it works to submit the proper form. Thanks for your input.

answered Mar 18, 2013 at 1:36

Jack

1,1631 gold badge13 silver badges29 bronze badges

Collectives™ on Stack Overflow

Form submit on jQuery click event only selecting very first form

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related