HTML: Anchor tag is converted to %23 on form GET request
I have an html form and I'm trying to use an anchor tag in its GET request, so that the user will be sent to a specific part of the page. I have it set up like this:
<form action="www.website.com/page/" method="get">
<select name="foo">
<option value="bar#myAnchor">Sample</option>
</select>
<input type="submit" value="Submit" />
</form>
The user is redirected to www.website.com/page/?foo=bar%23myAnchor.
Instead, I want to get the same result as the user following a direct link Link
I haven't been able to find the problem, but it seems like a browser issue since I can't get around it with an html entity or any other alternate coding.
What do you think?
I think you have to use javascript. A simple implementation might look like this.
function goToUrl(){
var url = 'http://' + window.location.hostname + '/' + document.querySelector('#urlSelector').value;
window.open(url);
//you could set window.location.href as well
}<select id="urlSelector">
<option>bar#myAnchor</option>
</select>
<button onclick="goToUrl()">Submit</button>This is expected. Whenever we submit a form, the values are URL encoded. Hence, in your case, when the form is submitted, the URL becomes
www.website.com/page/?foo=bar%23myAnchor
If you open the network tab, you can see this is the encoded version of foo=bar#myAnchor
If you just want the user to go to a link, use anchor tags and change the href property based on your logic.
Hope that helps!
链接地址: http://www.djcxy.com/p/89014.html上一篇: 意外的html锚定重定向