Question

I’m having a noobie problem getting my head round how I can make this work.

I have a page listing products from my DB. Above the list of products is a GET form with two dropdowns in it to choose how many products per-page, and the sort order.

Then to the left of my listing I have a sidebox containing a POST form with all the sub-categories in a particular category presented with checkboxes so users can refine their search.

Because the sidebox contains lots of options it seems best to have this form as a POST otherwise I’ll end up with potentially urls with 10s of category_ids in it, however that means when I update either of the dropdowns in the GET form I need the info from POST to be sent along.

I’ve tried just having one big POST form covering both bits but because they’re in different s this doesn’t validate.

Whats the best way of doing this, I can’t figure it out!

EDIT: Here’s a fiddle of my attempt to put all elements into one POST form, it doesn’t validate because of the different divs and I can’t wrap them in one DIV because it’d bugger up my layout, ie there’s meant to be the list of products to the right of sidebox and under filterbar – http://jsfiddle.net/FwQNn/

<div id="prodlistFilterBarWrapper">
        <form name="filter" action="index.php?main_page=index&amp;cPath=45" method="post">
            <input type="hidden" name="main_page" value="index" />
            <div id="filterbarwrapper"><span class="filterBarTextperpage">&nbsp;per-page&nbsp;</span>
                <div id="perpagecontainer">
                    <select name="perpage" id="perpage" onchange="this.form.submit()">
                        <option value="20">20</option>
                        <option value="40">40</option>
                        <option value="60">60</option>
                        <option value="80">80</option>
                        <option value="100">100</option>
                    </select>
                </div>
                <div id="sortordercontainer">
                    <select name="sortorder" id="sortorder" onchange="this.form.submit()">
                        <option value="bestselling">Best Selling</option>
                        <option value="pricelowhigh" selected="selected">Price low-high</option>
                        <option value="pricehighlow">Price high-low</option>
                        <option value="nameaz">Name a-z</option>
                        <option value="nameza">Name z-a</option>
                    </select>
                </div>
            </div>   
        </div>
        <div style="clear:both"></div>
        <div id="sidebox">
        <div id="sideboxheaderbgtop"><span class="yellowText" style="margin-left:15px">Refine</span> <span class="whiteText">search</span></div>
        <div id="sideboxPriceRange"></div>
        <div id="sideboxCatsWithCheckBoxes">
        <div class="sideboxHeading">Irish Gifts &amp; Souvenirs</div>
        <div class="sideboxDotSpacer"></div>
        <div class='sideboxSubCat'><input type="checkbox" name="subcats[]" value="20" checked="checked" />&nbsp;&nbsp;&nbsp;Decorations</div>
        <div class='sideboxSubCat'><input type="checkbox" name="subcats[]" value="48" checked="checked" />&nbsp;&nbsp;&nbsp;Keyrings</div>
        <div class='sideboxSubCat'><input type="checkbox" name="subcats[]" value="25" checked="checked" />&nbsp;&nbsp;&nbsp;Whiskey </div>
        <div class='sideboxSubCat'><input type="checkbox" name="subcats[]" value="15" checked="checked" />&nbsp;&nbsp;&nbsp;Novelties</div>
        <div class='sideboxSubCat'><input type="checkbox" name="subcats[]" value="44" checked="checked" />&nbsp;&nbsp;&nbsp;Titanic</div>
        <div class='sideboxSubCat'><input type="checkbox" name="subcats[]" value="18" checked="checked" />&nbsp;&nbsp;&nbsp;Glassware</div>
        <div class='sideboxSubCat'><input type="checkbox" name="subcats[]" value="43" checked="checked" />&nbsp;&nbsp;&nbsp;football</div>
        <div class='sideboxSubCat'><input type="checkbox" name="subcats[]" value="8" checked="checked" />&nbsp;&nbsp;&nbsp;Dolls</div>
        <input type="image" src="update.png" alt="Update" title=" Update " id="sideboxUpdateButton" />
        </form>
        <div class="sideboxBottomSpace"></div>
    </div>

Answer 1

What I would do is
1. Change the Dropdown gets to posts if you have to pass along the left side data
2. Include hidden fields in the Dropdown form which are populated when you choose the different categories from the left side..This is easily done with a simple bit of javascript