get selected value from dropdown without page load

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.

Possible duplicate of [I want to load ajax response data into dropdown](http://stackoverflow.com/questions/21958619/i-want-to-load-ajax-response-data-into-dropdown) — Tirthraj Barot, Apr 17 '17 at 07:53
"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?" unfortunately you can send it either using form submission or session to save the limitation value — hassan, Apr 17 '17 at 07:53

Rohan Kumar · Answer 1 · 2017-04-17T10:13:40.513

If you are calling AJAX to get data then you can pass it with form data like,

data:$('form').serialize()+'&limit='+$('#view-limit').val(),
...

You have to pass the view-limit again to your HTML content,

For exmaple, you are getting view-limit in PHP page like,

$limit=$_REQUEST['limit']; // you can use $_POST if post method is used

Then, on HTML page pass this variable and for making an option selected try the below code,

<div class="view-limit">
   View:&nbsp; <select name="view-limit" id="view-limit" class="form-control" style="display:inline-block;">
      <option value="10" <?php echo ($limit==10?'selected="selected"':'')?>>10</option>
      <option value="20" <?php echo ($limit==20?'selected="selected"':'')?>>20</option>
      <option value="30" <?php echo ($limit==30?'selected="selected"':'')?>>30</option>
      <option value="50" <?php echo ($limit==50?'selected="selected"':'')?>>50</option>
      <option value="100" <?php echo ($limit==100?'selected="selected"':'')?>>100</option>
   </select>
</div>

score 0 · Accepted Answer · answered Apr 17 '17 at 10:05

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

get selected value from dropdown without page load

2 Answers2