javascript - 如何处理使用两种不同表单或方法的提交

Question

我在表单外有一个复选框，为此我使用带有 id 的表单，如下所示:

我的表单，其id:'check-form'

<%= form_for(:execution, url:{controller:"executions", action:'create_multiple'}, html:{id:"check-form", class:"form-inline"}) do |form| %>
    <div class="input-group mb-3">
        <%= form.select :collaborator_id,@collaborators.collect 
           { |collaborator| [collaborator.name, collaborator.id] },
           {prompt: 'Selecione'}, {class:'form-control', required:true} %>
        <div class="input-group-append">
            <%= button_tag(type: "submit", class: "btn btn-raised btn-primary", form:'check-form') do %>
                <span><i class="far fa-play-circle"></i> Play</span>
            <% end %>
        </div>
    </div>
<% end %>

我的复选框带有 form:'check-form'

<%= check_box_tag 'execution[status_id][]', item.sector_status(sector.id).id, checked:false, 
{id:"check-#{item.sector_status(sector.id).id}", form:'check-form'}%>

我想要的是能够通过另一种方法以另一种形式使用复选框的值。有什么方法可以做到这一点，或者可以使用一个函数使表单通过两种可能的方法“工作”？

Answer 1

我会在这两种表单中设置一个隐藏字段，并向它们添加一个类:

<%= hidden_field_tag('execution[status_id][]', item.sector_status(sector.id).id, {class: 'my_checkbox_value'}) %>

然后在表单外部创建一个虚拟复选框，单击该复选框后，将为这些隐藏字段分配一个值:

<%= check_box_tag('dummyCheckbox', someValue , yourClickedValue, {id: 'my_dummy_checkbox') %>

最后将它们与 jQuery 点击处理程序结合在一起:

$("#my_dummy_checkbox").click(function() {
  if ($(this).prop("checked") == true) {
    $(".my_checkbox_value").val($(this).attr("value"))
  } else {
    $(".my_checkbox_value").val("")
  }
})

现在，当您提交表单时，如果单击了隐藏字段，则隐藏字段将具有复选框的值，如果没有单击，则隐藏字段将为空。