从没有页面加载的下拉列表中获取选定的值

Question

I have a page with multiple filters to search data from Database. It has a view limit dropdown at the end of the page that is out of the main search form. View limit asks the user how many records does he want on a single page. when user selects the record limit, ajax loads the results with selected limit, now when the user (who is on page 1) clicks the next page button to see recrods on page 2 the view limit dropdown resets itself to default value, for example if there are 60 products for his search and he selected 20 record per page on page 1, when he goes to page 2 the view limit dropdown will show 10 instead of 20 on next page in view limit dropdown. I want the view limit value on next page that he selected on first page i.e 10.

<div class="view-limit">
                View:&nbsp; <select name="view-limit" id="view-limit" class="form-control" style="display:inline-block;">
                    <option value="10">10</option>
                    <option value="20">20</option>
                    <option value="30">30</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                </select>
            </div>

This is my view limit html, I dont want to include it in the form and send this data with the search filters. Is there any way that I can send this data to next page without form submission? I tried to send it using a variable in URL but i cant get the value of view limit in a variable until any request is sent to the server.

Answer 1

I figured out the way to pass variable to next page through URL Here is how i did it:

$(document).on("click","#pager",function(e) {
    e.preventDefault();
    location.href = this.href +'?view='+ escape($('#view-limit').val());
    return false;
});

pager is the id for the link htat is clicked when user wants to go to next page