PHP Paginated Gallery with a form -- how to retain data across pages? jQuery the only way?

Question

Picture a 5 page gallery of images, each page with about 20 images on it. Each image is associated with 2 checkboxes, "web resolution" and "print resolution" for clients to order a digital copy of the image.

The page is built in PHP. When the client is finished selecting images across all 5 pages, she clicks "Submit Order" and is taken to a confirmation page that will display thumbnails of the selected images and ask for order and budget information.

What is the easiest way to retain which images have been selected across the pages? When this was a one page gallery, I was using this code which worked perfectly:

echo "<ul class=\"req-box nolist\">
    <li>";

    if (isset($_POST['photo-select']) && in_array($photoid . "-print", $_POST['photo-select'])) {
        echo "<input type=\"checkbox\" checked=\"checked\" name=\"photo-select[]\" id=\"{$photoid}-print\" value=\"{$photoid}-print\" />\n";
    } else {
        echo "<input type=\"checkbox\" name=\"photo-select[]\" id=\"{$photoid}-print\" value=\"{$photoid}-print\" />\n";
    }

    echo "<label for=\"{$photoid}-print\">print use</label></li>\n
    <li>";

    if (isset($_POST['photo-select']) && in_array($photoid . "-web", $_POST['photo-select'])) {
        echo "<input type=\"checkbox\" checked=\"checked\" name=\"photo-select[]\" id=\"{$photoid}-web\" value=\"{$photoid}-web\" />\n";
    } else {
        echo "<input type=\"checkbox\" name=\"photo-select[]\" id=\"{$photoid}-web\" value=\"{$photoid}-web\" />\n";
    }

    echo "<label for=\"{$photoid}-web\">web use</label></li>\n

</ul>\n";

But now this obviously won't work, since the links to the pages are <a> anchors and won't post to the $_POST array. I think this can be done using a jQuery AJAX POST event, but I'm not 100% sure, and I'm not sure if that's the best way to do it. If someone has JS disabled, the form won't work at all, right?

If that's the only way, then fine, but I need some advice from you all about that. Thanks!

Answer 1

An Ajax request is probably your best bet.

using jQuery, when they click to go to another page, you can fire an AJAX event to store the data in session. Or, you could do it everytime they click a checkbox, but that would probably a few to many requests.

If you are worried about them having Javascript disabled, you can have the page links point by default to the ajax script. Then when you make an Ajax call, pass a variable such as 'ajax=1' then, if the ajax variable is false, auto redirect the user to the next page. This way, this way, people with JavaScript enabled will get an AJAX request, and people who do not will go to the script, then get quickly redirected. Then, just change the process order code to check $_SESSION instead of $_POST when completing the orders.

Answer 2

you don't HAVE to use AJAX.

make your previous and next buttons form buttons (if they aren't already). doing it this way you could change your form method on the first four pages to GET. on the last page use POST to go to the other page. (although since you're not actually changing anything on your server you may want to stick with GET anyway)

with the previous and next page buttons being form buttons, your selections will be passed in the url.

page 1 might have selections 1-20 and the user selected 3 and 5. clicking next would go to url:

http://original/url/?sel[]=3&sel[]=5&page=2

page 2 has selections 21 - 40 and the user selected 27 and 32. now the next button goes to the url:

http://original/url/?sel[]=3&sel[]=5&sel[]=27&sel[]=32&page=3

and so on.

if you usually have users who pick ALL 100 images your urls might get a little long, but as mentioned before you can use sessions for that. you don't need the ajax for sessions though.

key: sel = photo-select