Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

navigate to another page with post request through link

Tags:

<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="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.

like image 324
Ravi Avatar asked Jun 29 '13 09:06

Ravi


People also ask

How to redirect a request to another page in JavaScript?

This can be because of load balancing, or for simple randomization. The simplest way of redirecting a request to another page is by using sendRedirect () method of response object. Following is the signature of this method − This method sends back the response to the browser along with the status code and new page location.

How do I redirect a post to another post in HTML?

Create an html form with all the data you need to send and specify as action the page you need to forward the user. Then put some hidden fields in that form. Wrap this inside of your doRedirect function and the redirect will work while correctly submitting your POST data.

How to programmatically navigate with a POST request?

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.

Why do I need to redirect to a new page/URL?

There are many reasons why you might want to redirect to a new page or URL. You changed your domain or URL structure You wan to redirect based on language, location or viewport The user has submitted a form and you want to direct them to the next page in the sequence The page may require authorization Redirect from HTTP to HTTPS


2 Answers

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.

like image 200
Saturnix Avatar answered Oct 24 '22 07:10

Saturnix


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.

like image 36
robbie Avatar answered Oct 24 '22 06:10

robbie