常规表单中的 jQuery 远程表单 - 远程表单被隐藏

Question

我有一个用于编辑对象（恰好是组对象）的页面，其中有一个搜索表单，它应该刷新可添加到组的人员列表。我想将其设置为内部表单是远程表单，调用“/groups/person_search”。这意味着远程表单的提交按钮不应提交外部“组”表单。

这是我目前拥有的 - 在我的 rails 模板中（为了清楚起见，剪掉了一些部分）：

<%= form_for @group, :class => "disable_empty_fields" do |f| %>  
  <div class="main">

    <%= f.label :name, "Group name" %><br/>
    <%= f.text_field :name, :size => "60" %><br/>    

    <%= f.label :description, "Group description" %><br/>
    <%= f.text_area :description, :size => "60x8" %><br/>

    <div class="section peoplesearch">
      <%= form_tag "/groups/person_search", :method => :get, :class => "xxx", :remote => true do %>
        <div class="block">
          <div class="main">
            <label>Search</label>
            <%= text_field_tag "search[term]", params[:search][:term], :class => "searchinput", :placeholder => "Search for someone" %>
            <%= button_to_function "Go", "jQuery(this).parents('form').eq(0).submit();" %>
          </div>
        </div>
      <% end %>
    </div><!-- /.section -->
  </div><!-- /.main -->        
  <div class="block submitblock">
    <div class="main">
      <button type="submit">Save</button>                                    
    </div>
  </div>
  <div class="block cancelblock">
    <div class="main">
      <%= link_to "<b>X</b> Cancel changes".html_safe, task_path(@group), :class => "button" %>        
    </div>
  </div>                
<% end %>     

在生成的html中：

<form accept-charset="UTF-8" action="/groups/1" class="edit_group" id="edit_group_1" method="post">
  <div style="margin:0;padding:0;display:inline">
    <input name="utf8" type="hidden" value="&#x2713;" />
    <input name="_method" type="hidden" value="put" />
    <input name="authenticity_token" type="hidden" value="vxGXV8vv2gvuk+7IIQwwsHcvFoVvET/h7eHcQUKuMco=" />
  </div>  
  <div class="main"> 
    <label for="group_name">Group name</label><br/> 
    <input id="group_name" name="group[name]" size="60" type="text" value="First group" /><br/>    
    <label for="group_description">Group description</label><br/> 
    <textarea cols="60" id="group_description" name="group[description]" rows="8">blah blah</textarea><br/> 

    <div class="section peoplesearch"> 
      <form accept-charset="UTF-8" action="groups/person_search" class="xxx" data-remote="true" method="get">
        <div style="margin:0;padding:0;display:inline">
          <input name="utf8" type="hidden" value="&#x2713;" />
        </div> 
        <div class="block"> 
          <div class="main"> 
              <label>Search</label> 
            <input class="searchinput" id="search_term" name="search[term]" placeholder="Search for someone" type="text" /> 
              <input onclick="jQuery(this).parents('form').eq(0).submit();" type="button" value="Go" /> 
          </div> 
        </div> 
      </form> 
    </div>
  </div> <!-- /main -->
  <div class="block submitblock"> 
    <div class="main"> 
      <button type="submit">Save</button>                                    
    </div> 
  </div> 
  <div class="block cancelblock"> 
    <div class="main"> 
      <a href="/tasks/1" class="button"><b>X</b> Cancel changes</a>        
    </div> 
  </div>    
</form>  

表单上的“xxx”类只是为了让我可以在页面源中快速找到它。

查看生成的 html，一切看起来都很好，但是当我单击应该提交内部表单的“开始”按钮时，它正在提交外部表单。内部形式没有出现在 chrome 的 dom 检查器中，在控制台中执行 jQuery("form").size() 给了我 1，再次好像内部形式不存在一样，即使我 可以看到它在页面源中。

这可能是愚蠢的，有人可以纠正我吗？干杯

Answer 1

HTML does not support nested forms. HTML5 确实允许将输入连接到独立于文档结构的表单。