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

Question

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

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

score 1 · Accepted Answer · edited May 23 '17 at 12:12

1

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

edited May 23 '17 at 12:12

Community

1
1

answered Oct 06 '11 at 13:56

kevin cline

2,426
1
21
33

ah right - particularly the part about some browsers treating the inner as the end tag to the outer
. So, i guess i need to do something like: have a div instead, and have the (pseudo-)submit button of the inner form collect all the inputs inside that div and push them into the data of an ajax call? Is there a simpler way?
– Max Williams Oct 06 '11 at 15:04

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

1 Answers1