[英]Simple HTML form to pass values to URL
I have a simple HTML form with a select
element.我有一个简单的 HTML 表单,其中包含
select
元素。 The purpose is this is to use Wordpress's built in query parameters to allow users to sort the posts in an archive.目的是使用 Wordpress 的内置查询参数来允许用户对存档中的帖子进行排序。 Date Added, Title, etc.
添加日期、标题等
<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>
The option
values are being passed through to the URL fine, but the URLs are encoding, causing the URL to look like this: option
值被传递给 URL 很好,但是 URL 正在编码,导致 URL 看起来像这样:
www.example.com/songs/?orderby=date%26order%3Dasc
Instead of this:而不是这个:
www.example.com/songs/?orderby=date&order=asc
The value
attributes are arbitrary text . value
属性是任意文本。 The browser is sending the form request to www.example.com/songs/?orderby=<value>
, where you happen to be setting the <value>
to "date&order=asc"
, "date&order=dsc"
, etc.浏览器将表单请求发送到
www.example.com/songs/?orderby=<value>
,您碰巧将<value>
设置为"date&order=asc"
、 "date&order=dsc"
等。
The orderby
's value has to make it to the server intact. orderby
的值必须完好无损地发送到服务器。 &
and =
are reserved characters in a URL's query component, so that is why they are being percent-encoded when the orderby
field is added to the URL query, thus allowing the server to properly receive the <value>
that the user selected for orderby
in the HTML. &
和=
是 URL 查询组件中的保留字符,这就是为什么在将orderby
字段添加到 URL 查询时对它们进行百分比编码的原因,从而允许服务器正确接收用户为orderby
选择的<value>
在 HTML 中。
To do what you want, you need to treat orderby
and order
separately in the HTML.要做你想做的,你需要在 HTML 中分别对待
orderby
和order
。 I would add a separate <select>
for order
, eg:我会为
order
添加一个单独的<select>
,例如:
<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>
If you wanted to make the order
list a little cleaner, you could use client-side scripting to manipulate the display texts of the order
options whenever the user selects a different orderby
option.如果您想让
order
列表更简洁一些,您可以在用户选择不同的orderby
选项时使用客户端脚本来操作order
选项的显示文本。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.