Search Results Pagination with multiple form fields

Question

I have a search form containing 1 text field and 2 checkbox groups.

Text field is called: keywords and the checkbox groups are called: services[] and locations[].

The search works fine if I don't try to pagination the results.

When I try to paginate the results, say I set the limit to 9 entries per page, my first page has the 9 entries listed and I get next page link to go to page 2 but when I click the next page link, I don't get the 2nd page as expected. The results have cleared? Page "reset".

How can I paginate my form containing multiple fields?

I have already tried craft.request.getQueryStringWithoutPath(), the "solution" in another question but it does not work for me with checkbox groups as my 2 other form fields.

Here is my code:

{% set services = craft.categories.group("services").status("live").find() %}
{% set locations = craft.categories.group("locations").status("live").find() %}

{% set queryKeywords = craft.request.getParam("keywords") | trim %}
{% set queryServices = craft.request.getParam("services") %}
{% set queryLocations = craft.request.getParam("locations") %}

<form action="" method="POST">
    <input type="text" name="keywords" value="">
    {% if services | length %}
        {% for service in services %}
        <label>{{ service.title }}<input type="checkbox" name="services[]" value="{{ service.slug }}" /></label>
        {% endfor %}
    {% endif %}
    {% if locations | length %}
        {% for location in locations %}
        <label>{{ location.title }} <input type="checkbox" name="locations[]" value="{{ location.slug }}"/></label>                                     
        {% endfor %}
    {% endif %}
    <button type="submit">Refine</button>
</form>




{% set originalKeywords = craft.request.getParam("keywords") | trim %}
{% set keywords = originalKeywords | replace({ "*" : "" }) %}
{% set services = craft.request.getParam("services") %}
{% set locations = craft.request.getParam("locations") %}

{% if (keywords | length) or (services | length) or (locations | length) %}
    {% set relatedTo = ["and"] %}


    {% set serviceCategoryIds = [] %}
    {% set locationCategoryIds = [] %}


    {% set serviceCategories = craft.categories.group("services") %}
    {% set locationCategories = craft.categories.group("locations") %}


    {% set servicesCategories = services | join(", ") | trim %}
    {% if services | length %}
        {% for service in services %}
            {% set serviceCategoryIds = serviceCategories.slug(servicesCategories).ids() %}
        {% endfor %}
    {% endif %}
    {% if serviceCategoryIds | length %}
        {% for serviceCategoryId in serviceCategoryIds %}
            {% set relatedTo = relatedTo | merge([serviceCategoryId]) %}
        {% endfor %}
    {% endif %}


    {% set locationsCategories = locations | join(", ") | trim %}
    {% if locations | length %}
        {% for location in locations %}
            {% set locationCategoryIds = locationCategories.slug(locationsCategories).ids() %}
        {% endfor %}
    {% endif %}
    {% if locationCategoryIds | length %}
        {% for locationCategoryId in locationCategoryIds %}
            {% set relatedTo = relatedTo | merge([locationCategoryId]) %}
        {% endfor %}
    {% endif %}


    {% set keywords = "*" ~ keywords | replace({ " " : "* *" }) ~ "*" %}


    {% set allMembers = craft.users.group("members").status("live").search(keywords).order("score") %}


    {% if (relatedTo | length) > 1 %}
        {% set allMembers = allMembers.relatedTo(relatedTo) %}
    {% endif %}


    <h3>{{ allMembers | length }} Result{% if (allMembers | length) == 1 %}{% else %}s{% endif %}</h3>


    {% if allMembers | length %}
        {% paginate allMembers as members %}

            <ul>
                {% for member in members %}
                <li>{{ member.fullName }}</li>
                {% endfor %}
            </ul>

            {% if paginate.totalPages > 1 %}
            <ul>
                <li><a href="{{ paginate.firstUrl }}" title="First Page">&laquo;</a></li>
                {% if paginate.prevUrl %}<li><a href="{{ paginate.prevUrl }}" title="Previous Page">&lsaquo;</a></li>{% endif %}
                {% for page, url in paginate.getPrevUrls(4) %}
                <li><a href="{{ url }}" title="Page {{ page }}">{{ page }}</a>
                {% endfor %}
                <li class="current"><a href="" title="Page {{ paginate.currentPage }}">{{ paginate.currentPage }}</a></li>
                {% for page, url in paginate.getNextUrls(4) %}
                <li><a href="{{ url }}" title="Page {{ page }}">{{ page }}</a>
                {% endfor %}
                {% if paginate.nextUrl %}<li><a href="{{ paginate.nextUrl }}" title="Next Page">&rsaquo;</a></li>{% endif %}
                <li><a href="{{ paginate.lastUrl }}" title="Last Page">&raquo;</a></li>
            </ul>
            {% endif %}

        {% endpaginate %}

    {% else %}
        <p>Your search didn&#39;t return any members.</p>
    {% endif %}

{% endif %}

Answer 1

To get this working, you will need to find a way to continue passing all of your form’s values to each of the additional pages.

There are a few ways you could do that, but the easiest and best option is to change your search form’s method attribute to "get" rather than "post".

<form method="get">

(Side note: there’s no need to add action="" – the default browser behavior if that attribute is omitted is for the form to submit to the current URL.)

Now when you submit your form you will see all of the form values show up in the resulting page’s query string. While that’s not quite as nice-looking, its advantages outweigh the ugly: browsers won’t ask users if they are sure they want to resubmit a form when they click the Back/Forward buttons, and the URLs will be sharable.

The next step is to update your pagination links to include the query string, which will effectively pass on the form’s values between each of the pages. We’ll use craft.request.getQueryStringWithoutPath() for that:

{% set qs = '?' ~ craft.request.getQueryStringWithoutPath() %}

<li><a href="{{ paginate.firstUrl ~ qs }}" title="First Page">&laquo;</a></li>
{% if paginate.prevUrl %}
   <li><a href="{{ paginate.prevUrl ~ qs }}" title="Previous Page">&lsaquo;</a></li>
{% endif %}
{% for page, url in paginate.getPrevUrls(4) %}
   <li><a href="{{ url ~ qs }}" title="Page {{ page }}">{{ page }}</a>
{% endfor %}
<li class="current"><a href="" title="Page {{ paginate.currentPage }}">{{ paginate.currentPage }}</a></li>
{% for page, url in paginate.getNextUrls(4) %}
   <li><a href="{{ url ~ qs }}" title="Page {{ page }}">{{ page }}</a>
{% endfor %}
{% if paginate.nextUrl %}
   <li><a href="{{ paginate.nextUrl ~ qs }}" title="Next Page">&rsaquo;</a></li>
{% endif %}
<li><a href="{{ paginate.lastUrl ~ qs }}" title="Last Page">&raquo;</a></li>