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 — Tirthraj Barot
– Tirthraj Barot, Commented Apr 17, 2017 at 7: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
– hassan, Commented Apr 17, 2017 at 7:53

Rohan Kumar · Accepted Answer · 2017-04-17 10:13:40Z

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>

Syed Haris Ali Ghaznavi · Accepted Answer · 2017-04-17 10:05:08Z

0

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

answered Apr 17, 2017 at 10:05

Syed Haris Ali Ghaznavi

7871 gold badge13 silver badges33 bronze badges

Collectives™ on Stack Overflow

get selected value from dropdown without page load

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related