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.
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
comment field. I also added an
id and a
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.