How to POST to two different pages after a single click

25 06 2008

Recently my friend asked me for help with his work. He was trying to make a web based panel for his clients. At one page he has got some variables – let’s say two of them: login and password. For simplicity we won’t consider any security issues. Those variables were in scope of a PHP script (let’s say panel.php). The first step was to send those variables to a second PHP script (other.php). Obviously, his first approach didn’t work. What he did was:

<?php
//... here we have $login and $passw ...
header('Location: other.php');
?>

Of course, neither $login nor $passw variables were accessible in other.php. I suggested him to use a session as the simplest solution. He hasn’t got, however, an access to the source of the second page and the mechanism of session was not implemented there. As he noticed, the only mean to transfer the values was a HTTP request sent by a POST method. To do so, we just needed to create a hidden form on panel.php and submit it behind user’s eyes to other.php. At the beginning, he wanted a link that could do it after being clicked. Simple task with JavaScript – you just need to execute the submit() method on the form object.

The second step made the problem more complex. Besides submitting the form, he wanted to update something in his database, but only if the user tries to pass to other.php. His first approach, since he works in PHP, was to create a intermediate page (let’s call it medium.php). Than, he could submit his form in panel.php to medium.php, update the database and send back to the user a hidden form which could be automatically submitted (via JavaScript) to other.php. It seemed to be technically not so hard to code.

Passing values with an intermediate layer - schema

I suggested a different approach, though. Instead of passing by medium.php we could develop our submit part of JavaScript and add an AJAX request to update the database. To make life easier, I chose jQuery. Don’t ask me why. Voilà, what I have done:

Using AJAX to pass the values - schema

Here’s the complete panel.php

<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
   <meta http-equiv="content-type" content="text/html;
charset=utf-8">
   <script type="text/javascript" src="jquery-1.2.6.min.js">
   </script>
   <script type="text/javascript">
     function execute() {
       var input_login =
           document.getElementById("login").value;
       var input_passw =
           document.getElementById("passw").value;

       $.post(
         "update.php",
         { login: input_login, passw: input_passw },
         function(data) {$("form")[0].submit()}
       );
   }
   </script>
   <title>test</title>
 </head>
 <body>
   <form id="form1" action="other.php" method="post">
       <input type="hidden" name="login"
       id="login" value="nigol" />
       <input type="hidden" name="passw"
       id="passw" value="wssap" />
   <form>
   <!--[if lte IE 6]>
       <a href="javascript:execute();">
       click [IE6-]
       </a>
   <![endif]-->
   <![if gt IE 6]>
       <a href="#" onclick="javascript:execute(); return false;">
       click
       </a>
   <![endif]>
 </body>
</html>

Just to check whether it works or not, I give other scripts as well.

other.php

<?php
   echo '<h1>Welcome!</h1>';
   echo '<hr /><h2>POST</h2>';
   echo '<pre>';
   var_dump($_POST);
   echo '</pre>';
?>

update.php

<?php
   $h = fopen('database.txt', 'a+');
   fputs($h, $_POST['login'] . "\r\n");
   fclose($h);
?>

The conditional comments are intended to fix IE6 (nothing new, huh?).

Let’s draw some conclusion. First of all, the second approach seems to be more complicated, than the first one. But in fact, the latter is easier to implement with a JavaScript toolkit. It’s a single line of code witch does all we need! Moreover, the user experience is far much better in the second solution. It’s represented by a dashed line on the images, by the way. The user clicks, waits (as AJAX request is being processed) and gets the final page. That’s all.

You can grab jQuery at http://jquery.com/.

Advertisements

Actions

Information

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




%d bloggers like this: