Sunday, September 16, 2012

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.


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.




7 comments:

  1. my best tutorial
    thx sir for sharing.

    ReplyDelete
  2. Your article has proven useful to me. It’s very informative and you are obviously very knowledgeable in this area. You have opened my eyes to varying views on this topic
    with interesting and solid content.
    website design

    ReplyDelete
  3. I will find numerous blogs on this topic but this 1 states precisely what I think also. This is really a very fascinating post, thank you for sharing it with us. One can be more informative as this. It is very convincing and will definitely work.

    ReplyDelete
  4. A man is defined by its words, you tutorials get straight to the point, enriched with basic concepts of programming no beating around the bush, thanks for ur time in making all this come live to us..

    ReplyDelete
  5. I would like to thank you for this excellent information!! I am very interested for this post.This site is so helpful.

    ReplyDelete
  6. Why when i make $('#content').append(html); it double the same html ?? please help...

    ReplyDelete
    Replies
    1. because you are using append, instead try this code,

      $('#content').html(html)

      Delete