Dynamic Submit Form using jQuery and Ajax

Contact Forms and Submit forms are a prerequisite for any website or Blog. These days there are a lot of websites which provide you dynamic contact forms, ajax enabled, but not for free. So here is a simple tutorial, which will enable you to create your own dynamic Contact/Submit Form with Ajax.

Download the Script

Database Design 

  Form table :  

CREATE TABLE form (
id INT PRIMARY KEY AUTO_INCREMENT,
name VARCHAR(50),
email VARCHAR(60),
detail VARCHAR(250));

  Index.php  

<div id="container">
<form action="#" method="POST">
<h2>Name :</h2>
<div><input type="text" name="name" placeholder="Enter your Name..." class="textbox" id="name"/></div>
<h2>Email :</h2>
<div><input type="text" name="email" placeholder="Enter your Email Address..." class="textbox" id="email"/></div>
<h2>Details :</h2>
<div>&lt'textarea name="name" placeholder="Write your message..." id="detail"></textarea></div>
<div><input type="submit" class="btn" value="Submit" id="form_submit"></div>
</form>
</div>

You can also add more fields to the Form as per your requirements, just follow the same code to implement them too.

  Javascript  

$(function() {
$("#form_submit").click(function() 
{
var name = $("#name").val();
var email = $("#email").val();
var detail = $("#detail").val();
var dataString = 'name='+ name + '&email='+ email + '&detail='+ detail;
if(name=='' || email=='' || detail=='')
{
alert('Please fill all textboxes');
}
else
{
$.ajax({
type: "POST",
url: "save_form.php",
data: dataString,
cache: false,
success: function(html){
$("#name").val('');
$("#email").val('');
$("#detail").val('');
$("#container").append(html);
}
});
}return false;
}); 
});

  save_form.php  

This is where the Ajax Posted values are received and saved to the Database, along with the output success message appended below the Submit/Contact Form.

<?php
include("db.php");
if($_POST)
{
$name=$_POST['name'];
$email=$_POST['email'];
$detail=$_POST['detail'];
$sql="INSERT INTO form(name,email,detail) VALUES ('$name','$email','$detail')";
$command=mysql_query($sql);
echo "<div class='message_box'>Thanks for contacting us. We will very soon revert back to you.</div>";
}
?>

We hope, this Dynamic Ajax based Form helps you to stay in touch with your website's or Blog' viewers. Do share your query with us through your comments.