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

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

以下是我目前拥有的——在我的rails模板中（为了清晰起见，删除了一些部分）：

“禁用空字段”do | f |%>


“60”%>



“60x8”%>

：get，：class=>xxx，：remote=>true do%>
搜寻
“searchinput”，：占位符=>“搜索某人”%>
拯救
“按钮”%>

在生成的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，一切看起来都很好，但是当我单击“Go”按钮时，它应该提交内部表单，而它正在提交外部表单。内部表单没有显示在chrome的dom inspector中，在控制台中执行

jQuery（“表单”）.size（）

会让我再次感觉到

1

，就好像内部表单不存在一样，即使我可以在页面源代码中看到它

---

可能是什么蠢事，有人能帮我澄清一下吗？cheers

HTML5确实允许将输入连接到独立于文档结构的表单。

啊，对了，特别是关于一些浏览器将内部视为外部的结束标记的部分。因此，我想我需要做一些类似的事情：取而代之的是使用一个div，让内部表单的（伪）提交按钮收集该div中的所有输入，并将它们推送到ajax调用的数据中？有没有更简单的方法？

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