表单提交在jQuery单击事件中只选择第一个表单

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

我有一个用Rails构建的todo/任务列表类型。

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:

我在每个任务旁边都有一个复选框，当我单击它时，我希望提交特定任务的表单，并更新任务以完成/不完整。我有一个jQuery函数可以做到这一点:

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

My form looks like this (in HAML):

我的表格是这样的(在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:

输出HTML如下:

<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

谢谢

3 个解决方案

#1

As Blender suggested, try using closest instead of parents.

就像Blender建议的那样，用最亲密的而不是父母。

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

#2

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.

这是正确的行为。因为您正在使用输入:复选框，这是指页面上类型复选框的任何输入元素。因此，看起来jQuery集包含了所有表单的所有复选框，它只处理第一个复选框，因为提交()不能同时处理多个表单。

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

相反，你可以尝试以下任何一种。一个使用$.parent('form')而不是parent()。

$(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.

或者将表单的id添加到复选框中，并使用它来查找父元素。如果您的输入在表单中嵌套得更深，这很好，这意味着父()不会工作。

<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.

还有一些方法，但是涉及到不同的HTML设置。

#3

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:

我试了所有的方法，但都没有用。我最终通过将任务的id添加到标签和复选框输入中来解决:

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

现在它可以提交适当的表格。谢谢你的输入。

#1