Need to include #anchor after querystring list

Question

Hello,

Form is 'get' to a API which operates off of querystring.

One of the parameters is a PackageID which indicates a vacation package. In order for the packageID to appear I also need to append '#packages' to the end of the get request.

Since not all form 'get' have a package I need this to be dynamic. I've tried adding a hidden field with '#packages' as the value - however the '#' is automatically encoded and therefore not registered when the server grabs the URL.

What would be the best way for me to dynamically include '#packages' as it appears in the querystring via javascript? Thanks!

Answer 1

You can't dynamically append an anchor by using a regular form submit.

You could intercept the submit event and change the target attribute of the form to a URL that includes the anchor. At least in Firefox, the browser will insert the query string in the right place (before the anchor.)

For example:

<form action="test.htm" method="get" onsubmit="this.action += '#anchor'">
<input type="hidden" name="foo" value="bar">
<input type="submit">
</form>

(Note: This is for illustration purposes. I wouldn't include the submit event handler inline with my HTML.)

Alternatively, you could try constructing your very own URL (including the query string and the anchor) and then setting document.location to that.