Simple jQuery Ajax Contact Form Without Page Refresh

Hi, Today i am going to show you basic example of how to submit any form without page refresh, Actually it is very easy using jquery .serialize() and .ajax() function.

It doesn’t matter how many field’s in your form using this keyword you can serialize all your form data and send it to server using .ajax() function.


See below html page with some jquery script.

contact.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Simple jQuery Ajax Contact Form Without Page Refresh</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div class="panel panel-primary" style="width:50%;margin:0 auto; margin-top:10%">
<div class="panel-heading"><h3>Contact Form</h3></div>
<div class="panel-body" style="height:40%; text-align:center;" >
<p class="bg-info" id="msg"></p>
<form class="form-horizontal" role="form" id="contactForm" method="post">
<div class="form-group">
<label class="control-label col-sm-2" for="name">Name:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="name" placeholder="Enter name" required="required">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" name="email" placeholder="Enter email" required="required">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="subject">Subject:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="subject" placeholder="Enter subject" required="required">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="description">Description:</label>
<div class="col-sm-10">
<textarea class="form-control" name="description" placeholder="Enter Description"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button id="send" class="btn btn-primary btn-lg" type="button">
<span class="glyphicon glyphicon-send" ></span> Send
</button>
</div>
</div>
</form>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
$(function(){
$("#send").click(function(){
var formData = $("#contactForm").serialize();
$("#msg").text("Enquiry sending Please wait..");
$.ajax({
url: 'contact.php',
type: 'POST',
data: formData,
success: function(result) {
$("#msg").empty().text(result);
},
error: function(e) {
$("#msg").empty().text("There is some error to send enquiry, Error code:"+e.status +", Error message:"+e.statusText);
},
dataType: "html",
timeout: 60000
});
});
});
</script>
</body>
</html>

Now time to create your server file name contact.php in this page all form data will receive. using $_REQUEST function in php.

contact.php

<?php
echo "Data received successfully.";
print_r($_REQUEST);
?>

In contact.php page you can write code for sending form data in email or your mysql database as per your need.

By using firefox FIREBUGaddon you can check that your post data and response from server is right way or not.
contact-form
Below demo i have creted to sending email in nodejs here the only thing changed is server part here i am using nodejs in server side for sending mail, But client part is same as i explained above.

If you like this post please don’t forget to subscribe My Public Notebook for more useful stuff.