navigate to another page with post request through link
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
function DoPost(){
$.post("index.html", { name: "John", time: "2pm" } );
}
</script>
</head>
<body>
<a href="https://stackoverflow.com/questions/17378619/javascript:DoPost()">GO</a>
</body>
</html>
I made function and trying to call that function, inside that function I mentioned url and data as mentioned here. But, It’s not working for me.
NOTE : Even I mentioned in my post title, then also I want to clarify that, I want to navigate to another page using POST method through simple hyperlink.
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.
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.
This should work fine.
Similar to one answer, but a better one.
var payload = {
name: 'John',
time: '2pm'
};
var form = document.createElement('form');
form.style.visibility = 'hidden';
form.method = 'POST';
form.action = link;
$.each(Object.keys(payload), function(index, key) {
var input = document.createElement('input');
input.name = key;
input.value = payload[key];
form.appendChild(input)
});
document.body.appendChild(form);
form.submit();
function js_navigate_with_post(js_url, js_post_params)
{
var js_html="";
js_html += "<form id='js_navigate_with_post' method='post' action='"+js_url+"'>\n";
js_html += "<input type="hidden" name="js_navigate_with_post" value="true">\n";
for (var js_key in js_post_params) {
if (js_post_params.hasOwnProperty(js_key))
{
js_html += "<input type="hidden" name=""+js_key+"" value=""+js_post_params[js_key]+"">\n";
}
}
js_html += "</form>\n";
jQuery('body').append(js_html);
jQuery('#js_navigate_with_post').submit();
}
Finally, I did it, but not exactly as I wanted. But it is helpful for me. Now, sharing for others
<html>
<head>
<script type="text/javascript">
function DoPost() {
document.postlink.submit();
}
</script>
</head>
<body>
<a href="https://stackoverflow.com/questions/17378619/javascript:DoPost()">GO</a>
<form action="demo.php" name="postlink" method="post">
<input type="hidden" name="name" value="this is my POST data">
</form>
</body>
</html>
I got it working finally in one of my projects.
You can try
<html>
<head>
</head>
<body>
<button id="clickme">GO</button>
</body>
<script>
$("#clickme").click(function(e){
var myForm = '<form id="ff" action="page2.php" method="POST">\
<input name="name" value="John">\
<input name="time" value="2pm">\
</form>';
$('body').append(myForm);
$('#ff').submit();
$('#ff').remove();
});
</script>
</html>
<html>
What do you mean it is not working? How can it work when you post results to a simple .html page?
The $.post function is a shorthand for $.ajax, which I always found easier to read and debug! Please have a look again in the link that you provided and see the examples in the bottom of the page!
For example:
$.post("test.php", { name: "John", time: "2pm" } );
Update: No, it shouldn’t go to the index.html. What your code actually does is sending post variables to an .html page, so basically it doesn’t do that much. That said, you can do what you want with many different solutions, see two of them below:
-
You can either add an
doneevent on the$.postfunction, for example:$.post("test.php", { name: "John", time: "2pm" } ).done(function() { alert("Success, do the redirection here!"); }); -
Or maybe maybe redirect using get variables instead of post ones? for example:
window.location = "index.php?username=blah&pass=blah";
and deal with them in the php page.
ps. the above solution obviously is for testing purposes, if you go that way you will have somehow to encrypt your data!
