Home arrow JavaScript arrow Page 3 - Programmatic POST Requests with JavaScript: Form Emulator in Action
JAVASCRIPT

Programmatic POST Requests with JavaScript: Form Emulator in Action


In the fourth and final part of our series, we examine the form emulator we built in the third part in the context of a practical example that puts the program to work. The form emulator can be used as a simple testing bed to help you build more robust and safer Web applications.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 23
August 03, 2005
TABLE OF CONTENTS:
  1. · Programmatic POST Requests with JavaScript: Form Emulator in Action
  2. · The first step in coding the example: listing the program’s functions
  3. · The second step in coding the example: defining the sample files
  4. · The third step in coding the example: running the form emulator program
  5. · The complete form emulator script: listing the full source code

print this article
SEARCH DEVARTICLES

Programmatic POST Requests with JavaScript: Form Emulator in Action - The second step in coding the example: defining the sample files
(Page 3 of 5 )

As I said before, the first sample file to be written is the form page that will be used by the script as the target to emulate its submission. Of course, the page code will be kept extremely simple, so I’ll get rid of all the possible CSS rules and unnecessary structural markup, and focus on the basic form’s markup. Below is the “post_form.htm” sample form page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">

<html>

<head>

<title>POST FORM EXAMPLE</title>

<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />

</head>

<body>

<form action="processform.php" method="post">

First Name <input type="text" name="fname"
size="30" /><br />

Last Name <input type="text" name="lname" size="30" /><br />

Email <input type="text" name="email" size="30" /><br />

<input type="submit" name="send" value="Send Data" />

</form>

</body>

</html>

As you can see, the above form page contains a few regular fields for collecting the usual user data, such as “First Name”, “Last Name” and “Email’. Now, let’s get the boring details out of the way and pay attention to the form’s action attribute. Notice that the form is pointed out to the file “processform.php”, which logically will process the data when the form is submitted.

In a regular situation, each time a visitor fills in the specified fields, the entered information will be sent as a separated block containing the name/value pairs to be hopefully validated on the server and processed accordingly.

Now, let’s take a look at the “processform.php” file, which look like this:

require_once 'clases/mysqlclass.php';

$db=new MySQL(array
('host'=>'host','user'=>'user','password'=>'password',
'database'=>'databasename'));

$fname=$_POST['fname'];

$lname=$_POST['lname'];

$email=$_POST['email'];

$query="INSERT INTO users VALUES
(NULL,'".$fname."','".$lname."','".$email."')";

$db->query($query);

echo 'Congratulations! The following information was
succesfully added :<br />';

echo 'First Name '.$_POST['fname'].'<br />Last Name '.$_POST
['lname'].'<br />Email '.$_POST['email'];

As you can appreciate, I’ve kept the code as simple as possible. Although the file actually contains some PHP statements, another server-side language could have been used to perform the same processing.

Essentially, the above file connects to the MySQL server, then inserts the user data into a database table and displays a basic message together with the data just entered. Specifically I’ve omitted any possible data validation process, so the code is easy to read. However, in many cases (but certainly not all of them), data will be verified at least by checking to make sure that the fields are not empty strings and the email address entered is well-formed.

Certainly I wouldn’t implement such an insecure verification mechanism in my own programs, but let’s be open-minded and think how many websites around present poor data checking. Since the Web is today’s largest development platform, real statistics say that there are thousands of cases where a correct validation process is often poorly implemented or omitted at all. Sad but true.

However, data validation is out of the scope of this article, so let’s pay attention to the scenario that I just described here. Now two simple files have been defined, which together work as functional script for collecting user data, so the next thing to do is run the form emulator program by pointing it to the form page file. Want to learn more? Keep reading.


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials