In present day every one want fast result and he can wait for result. That’s why we want the user to get better and faster results. So better way use form submit without page loading. This is saves the time required to reload the entire page.
I’ll share with you how to submit any form without refresh page, it’s actually very easy to use jquery. You are using this .serialize() and .ajax() jquery function.
It doesn’t matter how many fields in your form you can serialize all of your form data , and send it to server. You can follow the below example.
contactFrom.html
!DOCTYPE html>
<html>
<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>Send Contact Form Without Page Refresh in jQuery</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div class="panel panel-info" style="width:50%;margin:0 auto;">
<div class="panel-heading"><h3>Contact Form</h3></div>
<div class="panel-body" >
<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>
</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>
</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>
</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-info 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: 'contactform.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"
});
});
});
</script>
</body>
</html>
contactForm.php
<?php
echo "Data received successfully.";
print_r($_REQUEST);
?>