同一页面上的 GET 表单和 POST 表单答案

【问题标题】：A GET form and a POST form on the same page同一页面上的 GET 表单和 POST 表单
【发布时间】：2012-10-24 17:08:55
【问题描述】：

我有一个菜鸟问题，我想知道如何才能完成这项工作。

我有一个页面列出了我的数据库中的产品。产品列表上方是一个 GET 表单，其中有两个下拉菜单，用于选择每页的产品数量和排序顺序。

然后在我的列表左侧，我有一个包含 POST 表单的侧边栏，其中包含特定类别中的所有子类别，并带有复选框，以便用户可以优化他们的搜索。

因为边箱包含很多选项，所以最好将此表单作为 POST，否则我最终会得到可能包含 10 个 category_id 的 URL，但这意味着当我更新 GET 表单中的任一下拉列表时我需要一起发送来自 POST 的信息。

我试过只用一个大的 POST 表单来覆盖这两个位，但因为它们在不同的 s 中，所以这不起作用。

最好的方法是什么，我想不通！

编辑：这是我尝试将所有元素放入一个 POST 表单中的一个小技巧，由于 div 不同，它无法验证，我无法将它们包装在一个 DIV 中，因为它会破坏我的布局，即侧边栏右侧和过滤栏下方应该是产品列表 - 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>

【问题讨论】：

如果您需要两种形式的信息，那么它们应该只是一种形式。
你能写一些代码吗？这将有助于理解您的问题。
为什么使用一个表单时它不验证？它们在不同的框架中吗？
这里有一些代码 - 我曾尝试将它作为一个 POST 以一种形式使用，但它没有验证 - 这就是我所拥有的：jsfiddle.net/FwQNn
如果你查看你的小提琴，你会看到一个红色的div 和一个红色的form 标签。这意味着您的 html 结构在某种程度上是错误的，您的 div 可能太多/太少，这就是它无法验证的原因。但原则上你应该可以使用一种形式。

标签： html forms post get

【解决方案1】：

我会做的是 1.如果您必须传递左侧数据，请更改下拉列表获取帖子 2.在下拉表单中包含隐藏字段，当您从左侧选择不同的类别时填充这些字段..这很容易通过简单的javascript完成

【讨论】：