Traditional Feedback Form
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`)
);
(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.
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.
blog comments powered by Disqus