html - 将值传递给 URL 的简单 HTML 表单

Question

我有一个简单的 HTML 表单，带有 select元素。目的是使用 Wordpress 的内置查询参数来允许用户对存档中的帖子进行排序。添加日期、标题等

<form action="" method="GET">
    <label id="sortLabel" for="orderby">Sort Songs:</label>
        <select name="orderby" id="sortbox">
            <option disabled selected>Sort by:</option>
            <option value="date&order=asc">Oldest First</option>
            <option value="date&order=dsc">Newest First</option>
            <option value="title&order=asc">Alphabetical (A-Z)</option>
            <option value="title&order=dsc">Alphabetical (Z-A</option>
        </select>
    <input type="submit" value="Filter" />
</form>

option值被传递到 URL 正常，但 URL 正在编码，导致 URL 看起来像这样: www.example.com/songs/?orderby=date%26order%3Dasc取而代之的是: www.example.com/songs/?orderby=date&order=asc

Answer 1

这就是 HTML 表单的工作方式。value属性是任意文本。浏览器正在向 www.example.com/songs/?orderby=<value> 发送表单请求，您碰巧正在设置 <value>至 "date&order=asc" , "date&order=dsc" ， 等等。orderby的值必须使其完好无损地传送到服务器。 &和 =是 URL 查询组件中的保留字符，这就是为什么当 orderby 时它们被百分比编码的原因。字段被添加到 URL 查询中，从而允许服务器正确接收 <value>用户为 orderby 选择的在 HTML 中。
为所欲为，需善待orderby和 order分别在 HTML 中。我会添加一个单独的 <select>为 order ，例如:

<form action="" method="GET">
    <label id="sortLabel" for="orderby">Sort Songs:</label>
    <select name="orderby" id="sortbox">
        <option disabled selected>Sort by:</option>
        <option value="date">Date</option>
        <option value="title">Title</option>
    </select>
    <select name="order" id="sortbox">
        <option disabled selected>Order by:</option>
        <option value="asc">Oldest First, Alphabetical (A-Z)</option>
        <option value="dsc">Newest First, Alphabetical (Z-A)</option>
    </select>
    <input type="submit" value="Filter" />
</form>

如果您想制作 order列表更清晰一些，您可以使用客户端脚本来操作 order 的显示文本。每当用户选择不同的选项时 orderby选项。