redirect to a new page with post data in Javascript

Question

I have a html form with the data by this post method

 'form  id='form1' name='form1' method='post' action='process.php'etc '

to a php page for processing into a mysql database . When the user has filled in the form BEFORE submitting it I have a button that the user can click to open up a new page to display a pdf of the data entered. The new pdf file is generated fine but what I need in it is the post data from the form. In the pdf page I can use POST to get the detail. What I need is a method of sending the data from the form to this new page without using the form tag above as it is needed for the processing of the form. What I am looking for is a js method to redirect to a new page with the post data intact

Can anybody help please ? , any help is much appreciated ! Mick

Answer 1

Generally you'll want to avoid using javascript as a major functionality tool, not everyone has it enabled, so your script could be easily broken for some, bad times!

There are some frameworks out there that allow for this, redirection and retaining the $_POST variable, Kohana 3.0 is one where you can simply type in your controller:

echo Request::factory('redirect location')->post($_POST)->execute();

That would do that without the use of javascript, heres a great article if you want to know more about how this works: http://techportal.inviqa.com/2010/02/22/scaling-web-applications-with-hmvc/

Hope that helps :)

Answer 2

I think I know what you mean. You want to post the form to a popup window, without the current page/form reloading or submitting.

You can actually open up a popup window, with a name, and then set the target of the form to this new popup window. Then change it right away back to "_TOP" and you should be fine.

I would recommend using jquery, if you aren't already. It makes javascript so much more workable.

Answer 3

There is no way to "redirect" with post data. You could use a separate hidden form tag and have the button submit the other form:

<form id="form1" name="form1" method="post" action="process.php">
  <!-- form1's inputs here -->
  <button type="button" onclick="document.getElementById('form2').submit()">
    Popup PDF!
  </button>
</form>
<form id="form2" name="form2" method="post" action="form.pdf">
   <input type="hidden" name="field1" value="some value" />
   <!-- etc... -->
</form>

Alternatively, if you want to post the same form to a different page, you could just change the action attribute temporarily and then change it back:

document.getElementById("popupButton").onclick = function ()
{
    var frm1 = document.getElementById("form1");
    frm1.action = "myPDF.pdf";
    frm1.submit();
    frm1.action = "process.php";
}