How can I send the data to another page without appending it in a URL?

Question

I have a scenario where a user when clicks on a link, they are directed to a page in which I want to add a code to fetch a variable and redirect to another page.

i.e. user clicks on <a href="sample.tpl">click here</a>

on sample.tpl I want to write a code to redirect him to another page

<script>
window.location="http://example.com/?page_id=10"

but I want to send a variable too on this new link without appending it to the URL for security reasons.

How can I do it with some safe procedure?

Do ask me questions if it is not clear.

Did you try saving that in a cookie then accessing it in the other page ? — Issa Qandil, Oct 08 '12 at 08:14
Is the target page yours or not? What you mean by **security reasons**? — Michal Klouda, Oct 08 '12 at 08:15
yes target page is mine, and for cookies what if cookies are disabled — atif, Oct 08 '12 at 08:17
It may help if you explain exactly what you are trying to do and why, there may be a better complete solution. Not much is truly secure in the webworld, unless you're using a form over SSL. — Dale K, Oct 08 '12 at 08:20
actually i want only the registered users to see that page, but that user authentication comes from another database. so i don't want it to be appendid to url as anyone will come and access the page — atif, Oct 08 '12 at 08:20

Fabrizio Calderan · Accepted Answer · 2012-10-08T09:37:09.537

You could create a form with method="post", a hidden input with the value you want to pass and a submit button styled as a regular link (if you want to also manually send the form).

Then just submit the form manually or programmatically through the submit() method

Example (with automatic redirect after 3 seconds after page load) http://jsbin.com/avacoj/1/edit

Html

<form method="post" action="http://mydomain.com/" id="f">
   <input type="hidden" name="page_id" value="10">
   <noscript><button type="submit">Continue</button></noscript> /* see below */
</form>

Js

window.onload = function() {
  var frm = document.getElementById('f');
  setTimeout(function() {
      frm.submit();
  }, 3000);
};

As a side note you may consider to insert a submit button inside <noscript></noscript> tag so the redirect will be possibile even when js is not available on the user device, so the page is still accessible.

good idea, let me try it and then will be back to comment it or mark it as answer, meanwhile if you can provide me with an example , will be much appreciated — atif, Oct 08 '12 at 08:19

score 4 · Answer 2 · edited May 23 '17 at 11:52

Further to Fabrizio's answer someone has written a javascript function which will allow you to build the form and send it via POST at runtime.

POST is like GET (Where the variable is appended to the url) except the variable is sent via the headers. It is still possible to fake a POST request so you must perform some kind of validation on the data.

function post_to_url(path, params, method) {
    method = method || "post"; // Set method to post by default, if not specified.

    // The rest of this code assumes you are not using a library.
    // It can be made less wordy if you use one.
    var form = document.createElement("form");
    form.setAttribute("method", method);
    form.setAttribute("action", path);

    for(var key in params) {
        if(params.hasOwnProperty(key)) {
            var hiddenField = document.createElement("input");
            hiddenField.setAttribute("type", "hidden");
            hiddenField.setAttribute("name", key);
            hiddenField.setAttribute("value", params[key]);

            form.appendChild(hiddenField);
         }
    }

    document.body.appendChild(form);
    form.submit();
}

Used like so:

post_to_url("http://mydomain.com/", {'page_id':'10'}, "post");

Source: JavaScript post request like a form submit

How can I send the data to another page without appending it in a URL?

2 Answers2

Linked