Question

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

这就是我目前所拥有的 - 在我的导轨模板中（为了清晰起见，切出了一些部分）：

<%= 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，它看起来都很好，但是当我点击“Go”按钮时，它应该提交内部表单，它正在提交外部表单。内部表单不会显示在chrome的dom检查器中，并且在控制台中执行jQuery("form").size()会给我1，就好像内部表单不存在一样，即使我可以< / em>在页面源中查看。

这可能是愚蠢的事，有人可以让我直截了当吗？欢呼声

Answer 1

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

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

1 个答案: