Pagination (Passing 4 Get Name/Value Pairs)

[StephenM]

Hi,

 

I'm on the final step to finishing chapter 10 but I have encountered some sort of problem/quirk.

I am adding pagination.

 

A total of 4 name/value pairs need to be passed by the GET method.

 

2 variables that php computes are the $start and $pages variable.

 

$start = $_GET['s']

$pages = $_GET['p']

 

2 features (number of rows and sorting) the user will be able to modify with a <select> form.

 

NUMBER OF ROWS:

using the variable $display = $_GET['d'].

 

SORTING

using the variable $sort = $_GET['sort']

 

The problem though is that despite having the form set-up to send these variables,

only one is actually sent in the browser ( I can only see one variable being passed in the address bar) but when I view the source, all variables show up in the link! I would have expected that once the link is clicked that it will show up all of the name/value pairs in the address bar?

This must be the cause of the problem but I don't know how to fix it.

 

Here are the forms:

<p> Sort Results by:
<form method="get">
<select name="sort" onchange="this.form.submit()">
<option value="fn"';
if ($sort == "fn" ){ echo ' selected="selected"';}
echo'> <a href="banking_example.php?sort=fn&d='.$display;
echo'&p='.$pages;
echo'&s='.$start;
echo'">First Name</a> </option>
<option value="ln"';
if ($sort == "ln" ){ echo ' selected="selected"';}
echo'> <a href="banking_example.php?sort=ln&d='.$display;
echo'&p='.$pages;
echo'&s='.$start;
echo'">Last Name</a> </option>
</select>
</form>
</p>



<p> Results per page:
<form method="get">
<select name="d" onchange="this.form.submit()">
<option value="5"';
if ($display == 5 ){ echo ' selected="selected"';}
echo'> <a href="banking_example.php?d=5&sort='.$sort;
echo'&p='.$pages;
echo'&s='.$start;
echo'">5</a> </option>
<option value="10"';
if ($display == 10 ){ echo ' selected="selected"';}
echo'> <a href="banking_example.php?d=10&sort='.$sort;
echo'&p='.$pages;
echo'&s='.$start;
echo '">10</a> </option>
<option value="15"';
if ($display == 15 ){ echo ' selected="selected"';}
echo'> <a href="banking_example.php?d=15&sort='.$sort;
echo'&p='.$pages;
echo'&p='.$pages;
echo'&s='.$start;
echo
'">15</a> </option>
<option value="25"';
if ($display == 25 ){ echo ' selected="selected"';}
echo'> <a href="banking_example.php?d=25&sort='.$sort;
echo'&p='.$pages;
echo'&s='.$start;
echo'">25</a> </option>
<option value="50"';
if ($display == 50 ){ echo ' selected="selected"';}
echo'> <a href="banking_example.php?d=50&sort='.$sort;
echo'&p='.$pages;
echo'&s='.$start;
echo'">50</a> </option>
</select>
</form>
</p>

Here is an example of the output if I click on form 2 for example:

<p> Sort Results by:
<form method="get">
<select name="sort" onchange="this.form.submit()">
<option value="fn" selected="selected"> <a href="banking_example.php?sort=fn&d=10&p=3&s=0">First Name</a> </option>
<option value="ln"> <a href="banking_example.php?sort=ln&d=10&p=3&s=0">Last Name</a> </option>
</select>
</form>
</p>

<p> Results per page:
<form method="get">
<select name="d" onchange="this.form.submit()">
<option value="5"> <a href="banking_example.php?d=5&sort=fn&p=3&s=0">5</a> </option>
<option value="10" selected="selected"> <a href="banking_example.php?d=10&sort=fn&p=3&s=0">10</a> </option>
<option value="15"> <a href="banking_example.php?d=15&sort=fn&p=3&p=3&s=0">15</a> </option>
<option value="25"> <a href="banking_example.php?d=25&sort=fn&p=3&s=0">25</a> </option>
<option value="50"> <a href="banking_example.php?d=50&sort=fn&p=3&s=0">50</a> </option>
</select>
</form>
</p>

but all that shows up in the browser address bar is the following (for example):

/banking_example.php?sort=fn

or if I click on the display link

banking_example.php?d=25

the 3 other variables don't show up in the address bar despite being present in the html source code so this is why they don't get passed on.

 

But how do I fix it?

[Larry]

You're combining two things that can't be combined in this way: SELECT menus and links. You're only seeing the value you're seeing in the URL because that's the value of an OPTION in the SELECT menu. The HREF part of the links which in turn are part of the displayed part of the OPTIONs aren't accessible in this manner. 

 

Also, you have two separate forms, so a person can indicate their Sort Results preference OR their Results Per Page preference but not both.

 

You'll need to rethink your approach here.

[StephenM]

You're combining two things that can't be combined in this way: SELECT menus and links. You're only seeing the value you're seeing in the URL because that's the value of an OPTION in the SELECT menu. The HREF part of the links which in turn are part of the displayed part of the OPTIONs aren't accessible in this manner. 

 

Also, you have two separate forms, so a person can indicate their Sort Results preference OR their Results Per Page preference but not both.

 

You'll need to rethink your approach here.

 

Thanks for the answer, I understand now. So effectively the link in the select menu is redundant. I didn't realize that.

That's a pity because I do very much like the interface that a select menu offers and I was hoping that 2 separate menus could be used.

I'll dwell on this for a while and post back (hopefully with a not too disparate solution).

[StephenM]

okay, so I think I have found a solution to this part of the pagination task.

Following your suggestions, I reviewed the approach.

 

Changes made:

• reduced to one form.
• Removed the onchange.submit() function and added a submit button (so all filters can be selected simultaneously).
• Remove the redundant links in the select menu <option> elements
• Put necessary GET name/value pairs into the name of a select menu and value section respectively for the $display and $sort variables. Also, add an if statement so the correct one is selected.
• Added 2 hidden inputs for the start and pages variables
• I had to change the validation for the $pages variable because it changes if the $display variable changes.

Here is the new form and it works:

<form action="banking_example.php" method="get" id="form1">

    <div class="row">
            <p> Sort Results by:
                <select name="sort">
                    <option value="fn" <?php if ( $sort == "fn") { echo ' selected="selected"'; } ?> > First Name</option>
                    <option value="ln" <?php if ( $sort == "ln") { echo ' selected="selected"'; } ?> > Last Name</option>
                </select>
            </p>
    </div>

    <div class="row">
            <p> Results per page:
                <select name="d">
                    <option value="5" <?php if ( $display == 5) { echo ' selected="selected"'; } ?> >  5  </option>
                    <option value="10"<?php if ( $display == 10) { echo ' selected="selected"';}?> >   10  </option>
                    <option value="25"<?php if ( $display == 25) { echo ' selected="selected"'; } ?>>   25 </option>
                    <option value="50" <?php if ( $display == 50) { echo ' selected="selected"'; } ?> >  50  </option>
                </select>
            </p>
    </div>

    <input type="hidden" name="s" value="<?php echo $start; ?>" />

    <input type="hidden" name="p" value="<?php echo $pages; ?>" />

    <div class="row">
            <p>
                <button type="submit" form="form1"> Go </button>
            </p>
    </div>

</form>

That was it.

 

 

Next to add the page numbers at the bottom of the page.

[Larry]

Glad it's working and thanks for sharing!