How can I POST a parameter so that it doesn't show up in the querystring, to make sure users can't change the value directly in the URL?

Question

I have a search results page that is paginated, and currently the page number is included in the querystring, like so:

mysite.com/search/database-search?name=smith&page=10

I don't want the user to be able to change the page number directly in the url, they should only be able to change the page by clicking on the page buttons. So I need to remove page from the querystring, but still pass page number as a parameter to get the appropriate page of results.

I thought I could accomplish this by using a POST instead of GET; my page buttons originally were set up as links with "href=/search/database-search?name=smith&page=xx," but I thought that if I used a form to submit the page number instead, that would pass the page number without showing it in the querystring.

This is the code that I tried:

function postToPage(page) {
    debugger;
    var url = window.location.href;
    var newForm = $("<form>", {
        "action": url
    }).append($("<input>", {
        "name": "page",
        "value": page,
        "type": "hidden"
    }));
    newForm.submit();
}

<a onclick="postToPage($(this).text());" href="javascript:void(0)" class="page-button">@pageNum</a>

However, it doesn't work as I expected. When I click a page button, the querystring in the url is ignored, and "page" still shows up in the querystring, so the result is kind of the opposite of what I'm trying to accomplish; I lose the query parameters that I need, and "page" is the only thing still included in the querystring.

When I click a page button, I'm taken to "/search/database-search?page=x"

Is there any way to use page as a query parameter without it showing up in the URL

EDIT: I changed my form method to "POST," but the "page" variable is getting lost. The parameters that are in the current querystring are included now, but the page value isn't being used.

possible duplicate of [What is the difference between POST and GET?](http://stackoverflow.com/questions/3477333/what-is-the-difference-between-post-and-get) — Praxis Ashelin, Apr 27 '15 at 14:49

score 7 · Accepted Answer · edited Apr 27 '15 at 14:52

7

Looks like you didn't set the method of the form to POST.

function postToPage(page) {
    debugger;
    var url = window.location.href;
    var newForm = $("<form>", {
        "action": url,
        "method": "POST" // set form to POST, instead of the default GET
    }).append($("<input>", {
        "name": "page",
        "value": page,
        "type": "hidden"
    }));
    newForm.submit();
}

edited Apr 27 '15 at 14:52

Praxis Ashelin

4,983
2
16
43

answered Apr 27 '15 at 14:46

ixchi

2,119
2
22
23

Thank you! I knew I was missing something, i don't use forms that often. – Erica Stockwell-Alpert Apr 27 '15 at 14:50
Mark his answer as Accepted – hakazvaka Apr 27 '15 at 14:51

How can I POST a parameter so that it doesn't show up in the querystring, to make sure users can't change the value directly in the URL?

1 Answers1