Before building the Ajaxed form, we will create a traditional version of it. This way we will make sure that our application will degrade gracefully. Graceful Degradation means that, whenever you decide to include features designed to take advantage of the latest technologies, you should do it in a way that older browsers can still allows access to the basic functionality of our page.
In our application, graceful degradation means that we should make sure that the form works even if the user have turned off their javascript or if they are using an old browser.
Required Database Structure
Before anything, we create the database required for storing the data. I am intensionally keeping the database as simple as possible. Feel free to make more complicated databases when trying this example on your own. For the basic functionality we just need to save two fields - the email field and the comment field. I also added an id and a time field.
CREATE TABLE `feedback` (
`feedback_id` int(11) NOT NULL auto_increment,
`feedback_email` varchar(255) NOT NULL default '',
`feedback_comment` mediumtext NOT NULL,
`feedback_time` datetime NOT NULL default '0000-00-00 00:00:00',
PRIMARY KEY (`feedback_id`)
) TYPE=MyISAM AUTO_INCREMENT=8 ;
(X)HTML Markup for the Feedback Form
Before any coding, we will create the required form. NOTE: The following form is a visual demo only - it will not save your comments. That is because the current server does not support PHP.
The above form is create using the code...
<form name="feedback_form" id="feedback_form" method="POST" action="save_data.php">
<fieldset>
<legend>A simple feedback form</legend>
<div id="form_elements">
<label for="comment">Comments</label><br />
<textarea name="comment" id="comment" rows="5" cols="30"></textarea><br />
<label for="email">E-Mail</label><br />
<input name="email" id="email" type="text" /><br />
<input name="action" id="action" type="submit" value="Submit" />
</div>
</fieldset>
</form>
PHP Code that Updates the Table
Keep this in the 'save_data.php' - the file that is given as the action of the above form. This is the file that does the server side duties - like saving the user entered values to the database
<?php
include('./connect.php'); //Connect to the database.
//Insert data into our database
mysql_query("INSERT INTO feedback(feedback_email,feedback_comment,feedback_time)
VALUES('$_REQUEST[email]','$_REQUEST[comment]',NOW())") or die("Cannot save : " . mysql_error());
?>
<html>
<head>
<title>Feedback Received</title>
</head>
<body>
<h1>Feedback Received</h1>
Thank you for your intrest - we will look into your comment as soon as possible.
</body>
</html>
Our traditional feedback form is functional now. In the next section we will see how to add the 'Ajax Effect' to this page.
[This the second part of a three part series on Basic Ajax progamming. See part one - A Gentle Introduction to Ajax]
UPDATE : The third part of the Tutorial - Ajax Feedback Form is now available.
1 Comment:
Other readers might need help with the connect.php file. Here's a brief tutorial on how to set up your db connection:
connect.php
Post a Comment