title: jQuery remote form inside a regular form - remote form is hidden
body: <p>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.  </p>
  
  <p>Here's what i have at the moment - in my rails template (with some sections cut out for clarity):</p>
  
  <pre><code>&lt;%= form_for @group, :class =&gt; "disable_empty_fields" do |f| %&gt;  
    &lt;div class="main"&gt;
  
      &lt;%= f.label :name, "Group name" %&gt;&lt;br/&gt;
      &lt;%= f.text_field :name, :size =&gt; "60" %&gt;&lt;br/&gt;    
  
      &lt;%= f.label :description, "Group description" %&gt;&lt;br/&gt;
      &lt;%= f.text_area :description, :size =&gt; "60x8" %&gt;&lt;br/&gt;
  
      &lt;div class="section peoplesearch"&gt;
        &lt;%= form_tag "/groups/person_search", :method =&gt; :get, :class =&gt; "xxx", :remote =&gt; true do %&gt;
          &lt;div class="block"&gt;
            &lt;div class="main"&gt;
              &lt;label&gt;Search&lt;/label&gt;
              &lt;%= text_field_tag "search[term]", params[:search][:term], :class =&gt; "searchinput", :placeholder =&gt; "Search for someone" %&gt;
              &lt;%= button_to_function "Go", "jQuery(this).parents('form').eq(0).submit();" %&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;% end %&gt;
      &lt;/div&gt;&lt;!-- /.section --&gt;
    &lt;/div&gt;&lt;!-- /.main --&gt;        
    &lt;div class="block submitblock"&gt;
      &lt;div class="main"&gt;
        &lt;button type="submit"&gt;Save&lt;/button&gt;                                    
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="block cancelblock"&gt;
      &lt;div class="main"&gt;
        &lt;%= link_to "&lt;b&gt;X&lt;/b&gt; Cancel changes".html_safe, task_path(@group), :class =&gt; "button" %&gt;        
      &lt;/div&gt;
    &lt;/div&gt;                
  &lt;% end %&gt;     
  </code></pre>
  
  <p>and in the generated html:</p>
  
  <pre><code>&lt;form accept-charset="UTF-8" action="/groups/1" class="edit_group" id="edit_group_1" method="post"&gt;
    &lt;div style="margin:0;padding:0;display:inline"&gt;
      &lt;input name="utf8" type="hidden" value="&amp;#x2713;" /&gt;
      &lt;input name="_method" type="hidden" value="put" /&gt;
      &lt;input name="authenticity_token" type="hidden" value="vxGXV8vv2gvuk+7IIQwwsHcvFoVvET/h7eHcQUKuMco=" /&gt;
    &lt;/div&gt;  
    &lt;div class="main"&gt; 
      &lt;label for="group_name"&gt;Group name&lt;/label&gt;&lt;br/&gt; 
      &lt;input id="group_name" name="group[name]" size="60" type="text" value="First group" /&gt;&lt;br/&gt;    
      &lt;label for="group_description"&gt;Group description&lt;/label&gt;&lt;br/&gt; 
      &lt;textarea cols="60" id="group_description" name="group[description]" rows="8"&gt;blah blah&lt;/textarea&gt;&lt;br/&gt; 
  
      &lt;div class="section peoplesearch"&gt; 
        &lt;form accept-charset="UTF-8" action="groups/person_search" class="xxx" data-remote="true" method="get"&gt;
          &lt;div style="margin:0;padding:0;display:inline"&gt;
            &lt;input name="utf8" type="hidden" value="&amp;#x2713;" /&gt;
          &lt;/div&gt; 
          &lt;div class="block"&gt; 
            &lt;div class="main"&gt; 
                &lt;label&gt;Search&lt;/label&gt; 
              &lt;input class="searchinput" id="search_term" name="search[term]" placeholder="Search for someone" type="text" /&gt; 
                &lt;input onclick="jQuery(this).parents('form').eq(0).submit();" type="button" value="Go" /&gt; 
            &lt;/div&gt; 
          &lt;/div&gt; 
        &lt;/form&gt; 
      &lt;/div&gt;
    &lt;/div&gt; &lt;!-- /main --&gt;
    &lt;div class="block submitblock"&gt; 
      &lt;div class="main"&gt; 
        &lt;button type="submit"&gt;Save&lt;/button&gt;                                    
      &lt;/div&gt; 
    &lt;/div&gt; 
    &lt;div class="block cancelblock"&gt; 
      &lt;div class="main"&gt; 
        &lt;a href="/tasks/1" class="button"&gt;&lt;b&gt;X&lt;/b&gt; Cancel changes&lt;/a&gt;        
      &lt;/div&gt; 
    &lt;/div&gt;    
  &lt;/form&gt;  
  </code></pre>
  
  <p>The "xxx" class on the form is just so i could find it quickly in the page source.</p>
  
  <p>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 <code>jQuery("form").size()</code> in the console gives me <code>1</code>, again as if the inner form isn't there, even though i <em>can</em> see it in the page source.</p>
  
  <p>It's probably something dumb, can someone set me straight?  cheers</p>