jQuery remote form inside a regular form - remote form is hidden

I have a page for editing an object (a Group object as it happens) that has a search form inside it, which should refresh the list of people available to add to the group. I want to set it up so that the inner form is a remote form, calling "/groups/person_search". This means that the submit button to the remote form should not submit the outer "group" form.

Here's what i have at the moment - in my rails template (with some sections cut out for clarity):

<%= 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 som开发者_StackOverflow社区eone" %>
            <%= 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 %>     

and in the generated 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>  

The "xxx" class on the form is just so i could find it quickly in the page source.

Looking at the generated html, it all looks fine, but when i click on the 'Go' button, which should submit the inner form, it's submitting the outer form. The inner form doesn't show up in chrome's dom inspector, and doing jQuery("form").size() in the console gives me 1, again as if the inner form isn't there, even though i can see it in the page source.

It's probably something dumb, can someone set me straight? cheers

HTML does not support nested forms. HTML5 does allow the connection of inputs to forms independent of the document structure.