select option clears when page loads in php

Question

Hey guys,

the scenario is this: see select below

<form name="limit">
    <select name="limiter" onChange="limit(this.value)">
        <option selected="selected">&nbsp;</option>
        <option value="5">5</option>
        <option value="10">10</option>
        <option value="15">15</option>
    </select>
</form>

I want whenever any option is selected for 3 things to happen:

1.) js limit() function is called which all it does its takes current url, adds new query parameter 'limit' with the user selected value eg:

http://localhost/blahblah/apps/category.php?pg=1&catId=3021&limit=5

(this will cause the category.php page to be hit and # of product displayed limited to the value selected by user)

2.)Once the url is hit, it reloads but i DONT want the value selected to reset back to the default (which it currently does). I want it to reflect the users selection after page reload.

3.) Also, when i move to the next page (pagination), i would like the state to be carried ova to the next page (ie. remembering the user selection).

Answer 1

Just assign the selected value using PHP:

<form name="limit">
    <select name="limiter" onChange="limit()">
        <option <?php if(!isset($_POST['limiter'])) echo ' selected="selected"'; ?>>&nbsp;</option>
        <option <?php if(isset($_POST['limiter']) && $_POST['limiter'] == 5) echo ' selected="selected"'; ?> value="5">5</option>
        <option <?php if(isset($_POST['limiter']) && $_POST['limiter'] == 10) echo ' selected="selected"'; ?> value="10">10</option>
        <option <?php if(isset($_POST['limiter']) && $_POST['limiter'] == 15) echo ' selected="selected"'; ?> value="15">15</option>
    </select>
</form>

As the code gets hard to read, you could do a loop instead with PHP:

<form name="limit">
    <select name="limiter" onChange="limit()">
        <option <?php if(!isset($_POST['limiter'])) echo ' selected="selected"'; ?>>&nbsp;</option>
        <?php foreach(array(5, 10, 15) as $p): ?>
        <option <?php if(isset($_POST['limiter']) && $_POST['limiter'] == $p) echo ' selected="selected"'; ?> value="<?php echo $p; ?>">
            <?php echo $p; ?>
        </option>
        <?php endforeach; ?>
    </select>
</form>

Answer 2

<script type="text/javascript">
    function limit(value)
    {
        url = "localhost/yourapp?limiter="+value;
    }
</script>

<form name="limit">
    <select name="limiter" onChange="limit(this.value)">
        <option>&nbsp;</option>
        <option value="5" <?php if($_REQUEST['limiter'] == 5) {echo "selected";}?>>5</option>
        <option value="10" <?php if($_REQUEST['limiter'] == 10) {echo "selected";}?>>10</option>
        <option value="15" <?php if($_REQUEST['limiter'] == 15) {echo "selected";}?>>15</option>
    </select>
</form>

I am using $_REQUEST here because I don't know your form's method. Use accordingly.

Answer 3

Tatu Ulmanen's answer handles the part of displaying select. To do the pagination part, simply pass the limit as a parameter in the query string.

For example, if you're currently using page links that look like this:

<a href="http://localhost/blahblah/apps/category.php?pg=1&amp;catId=3021"&gt;1&lt;/a&gt;

Change them to include your limit parameter so it gets passed over:

<a href="http://localhost/blahblah/apps/category.php?pg=1&amp;catId-3021&amp;limit=5"&gt;1&lt;/a&gt;

Just make sure to change your pagination code to account for the fact that each page is only "limit" items long. To help you do that, I need to know how you were doing your pagination.

Answer 4

can you check whether it works?

<script type="text/javascript">
function limit(myvalue)
{
location.href="http://yoursite?limit="+myvalue;
}

function querySt() {
hu = window.location.search.substring(1);
gy = hu.split("&");
for (i=0;i<gy.length;i++) {
ft = gy[i].split("=");
if (ft[0] == 'limit') {
for (var idx=0;idx<document.getElementById('limiter').options.length;idx++) {
            if (document.getElementById('limiter').value==ft[1]) {
                  document.getElementById('limiter').selectedIndex=idx;


                  }

                  }
}
}

}

   </script>

 </head>
 <body onload="querySt()">
 <form name="limits"> 
    <select onchange="limit(this.value)" id="limiter"> 
        <option selected="selected">&nbsp;</option> 
        <option value="5">5</option> 
        <option value="10">10</option> 
        <option value="15">15</option> 
    </select> 
</form> 

 </body>