jQuery submit method not submitting entire form

Question

I filter panel for filtering search results. When a user clicks a check box the ajax triggers a submit. However, it seems to only be submitting the value of that check box and not the others that may been clicked previously.

Any help would be really appreciated.

JS

$("#filter_menu2 input:checkbox").click ->
    console.log $(this).parents('form')
    $(this).prop('checked', true)
    $(this).parents('form').submit()
    return

search.js.erb

$("#products").html("<%= escape_javascript(render(:partial=>'new_shop/shop_search_results')).html_safe %>")

check boxes

<ul>
            <%= form_tag "/search", id: "styles", method: :get, remote: true do %>
                <% @styles.each do |style| %>
                    <li>
                      <label>
                        <%= check_box_tag "search", style.name.downcase, nil, id: style.name.downcase, rel: style.name.downcase %>
                        <%= style.name %>
                      </label>
                    </li>
                <% end %>
            <% end %>
          </ul>



<form accept-charset="UTF-8" action="/search" data-remote="true" id="styles" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>
                    <li>
                      <label>
                        <input id="classic" name="search" rel="classic" type="checkbox" value="classic" />
                        Classic
                      </label>
                    </li>
                    <li>
                      <label>
                        <input id="modern" name="search" rel="modern" type="checkbox" value="modern" />
                        Modern
                      </label>
                    </li>
                    <li>
                      <label>
                        <input id="contemporary" name="search" rel="contemporary" type="checkbox" value="contemporary" />
                        Contemporary
                      </label>
                    </li>
                    <li>
                      <label>
                        <input id="vintage" name="search" rel="vintage" type="checkbox" value="vintage" />
                        Vintage
                      </label>
                    </li>
                    <li>
                      <label>
                        <input id="urban" name="search" rel="urban" type="checkbox" value="urban" />
                        Urban
                      </label>
                    </li>
                    <li>
                      <label>
                        <input id="mid-century" name="search" rel="mid-century" type="checkbox" value="mid-century" />
                        Mid-Century
                      </label>
                    </li>
                    <li>
                      <label>
                        <input id="traditional " name="search" rel="traditional " type="checkbox" value="traditional " />
                        Traditional 
                      </label>
                    </li>
</form>

the puts'd params for the first submit when "classic" is checked

params = {"utf8"=>"✓", "search"=>"classic", "controller"=>"new_shop", "action"=>"search"}

the puts'd params for the first submit when "classic" was already checked and "modern" is checked

params = {"utf8"=>"✓", "search"=>"modern", "controller"=>"new_shop", "action"=>"search"}

Answer 1

i think this will help you, but feel free to ask more questions - http://jsfiddle.net/jayblanchard/UwLAS/

$("#styles :checkbox").click(function () {
    $('#styles :checkbox:checked').each(function() {
        console.log( $(this).val() );
    });
    $('#styles').submit();
});

In addition I just noticed that all of your checkboxes carry the same name -

name="search"

Because you can select multiples of this checkbox you should name them as if they are an array - and you'll deal with them as an array on the server -side when received:

name="search[]"