navigate to another page with post request through link

I know this question is almost 4 years old and there is already an accepted answer, but I would like to provide an alternative solution as well as point out your mistake.

Part 1: The Solution

The conventional solution for navigating with a POST request is a form, which the accepted answer uses. I will build on top of this by presenting a solution to programmatically create forms using DOM.

var payload = {
  name: 'John',
  time: '2pm'
};
var form = document.createElement('form');
form.style.visibility = 'hidden'; // no user interaction is necessary
form.method = 'POST'; // forms by default use GET query strings
form.action = 'index.html';
for (key in Object.keys(payload)) {
  var input = document.createElement('input');
  input.name = key;
  input.value = payload[key];
  form.appendChild(input); // add key/value pair to form
}
document.body.appendChild(form); // forms cannot be submitted outside of body
form.submit(); // send the payload and navigate

I used index.html as per your original code, but I would take the accepted answer's advice and use PHP to accept and process the POST data.

Part 2: The Problem

The main problem with your original solution is that it used $.post, a helper function built on top of $.ajax. AJAX is meant to be used when retrieving data from a server and using it within current page, rather than navigating to another page.


Create an html form with all the data you need to send and specify as action the page you need to forward the user.

<form method="post" id="theForm" action="REDIRECT_PAGE.php">

Then put some hidden fields in that form.

<input type="hidden" name="name" value="John">
<input type="hidden" name="time" value="2pm">
</form>

Wrap this inside of your doRedirect function and the redirect will work while correctly submitting your POST data.

document.getElementById('theForm').submit()

As a side note, you may want to redirect the user to a .php page not a .html one if you need to read POST data. This depends on your server configuration but, by default, I don't think you can run PHP code inside of a .html file.