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




Let’s go!

19 06 2008

Hello everyone! It’s my pleasure to announce my first post on this blog. Although, it’s not the first blog in my life.

Somewhere around years 2000-2001 I wrote my own blog engine in PHP. I used simple flat-file based data storage. It was hosted on, free-of-charge at that time, www.phg.pl server. They offered really free PHP hosting but with quite limited disk space (I don’t remember the exact figures) and with no database support. As the virtual web space then was still an unknown area, a real terra incognita, a wild wild west… Web 2.0 was about to be born; everyone could have started his own portal, vortal, blog or any other web service. I had plans not only to start posting on my own blog but to share my tiny script with others. I caught two souls – people I have never met before. They found somehow my blog service, they started posting… It was so amazing!

But nothing lasts forever. I started my studies and the same year phg.pl cut off their free hosting service. I didn’t have enough time and motivation, nor money, to transfer that blog somewhere else or pay for the hosting. By the way, it wasn’t the only service I created and put there. The others were: a forum (PHP + flat-file storage) used by me and my school mates; a free e-mail gateway (I still hold www.email.prv.pl URL alias and it still points to, no more existing, FanEmail 1.04); and the last but not least www.japatam.phg.pl – the award-winning web site about extraterrestrial life created for the “Life in the Universe” European contest organized by CERN. Thanks to that site, me and my two friends won the first prize at the Polish national level and we went to Geneva for the Grande Finale. There were also a plan to establish a web design agency with my friend. I was so on the top of Web!

And again time passed. I lost my old hosting but I’ve got a new one. As I began my studies at Politechnika Gdanska, in my dorm I met our local network admin. After couples of talks I realized that I already know PHP pretty well – me, first-year student, was able not only to discuss with last-year big boss admin, but also give him some advices about some new features in PHP (version 4). In exchange, the guy gave me an account on a server administrated by students (double Intel Pentium Pro as far as I remember). As of Web, I fade in background. I coded my own PHP scripts but almost no one was aware of it. The first place in my professional life was my studies, so I delved into electronics and telecommunication leaving Web somewhere back. Fortunately, most of my work is still available on that students’ server. I said most, because, unfortunately, some of them I erased. You can still find, if you only search well, pages designed by me and hosted elsewhere.

The Web didn’t remain in one place. Web 2.0 is almost everywhere and companies that don’t have their own web site at all I could count on the fingers of one hand, as we say in Poland. I could, if I knew of their existence. Web not only is the integral part of our life, but it’s a huge marketplace. And I don’t mean only e-shops or auctions. Everything is for “sale” from people’s ideas “sold” in millions of blogs, forums, social networks etc. to highly appreciated by today’s bussines values like clients’ trust, well-promoted trademarks and, the most important, though virtual, information. In this context I return to the Web. However, I don’t really feel I was totally apart. I have a feeling I just didn’t follow the great transformation from Web 1.0 to Web 2.0; I didn’t have any homepage nor blog; I used to visit forums and others’ blogs as I did for Web 1.0 – with no interaction. It’s the high time to change it definitively! Now I’m 100% compatible! I start my new shining blog, I participate in discussions on some groups via Google Groups, I read feeds via Google Reader etc. And the most important thing is that I really feel like I can do or change something – put my own brick in the wall. Personal and professional parts as well as passion meet together. And that is it!

Just the last remark: I apologize in advance for any errors as English is only my second language.