This simple JQuery codes will help you to submit forms using Ajax. The main methods,
ajaxForm and ajaxSubmit, gather information from the form element to decide how to handle the submit process. This is actually a very simple method to submit and show a success message to users without refreshing your entire page. Of course users will be happy if they don’t have to wait until the page reloads. Let’s startCreating Simple Form
Create a simple html form. Example is given below. You cna change fields as per your needs. (Note that you should have a file called “function.php” which does the message posting function)
<form id="testForm" action="comment.php" method="post">
Name: <input type="text" name="name" />
Message: <textarea name="message"></textarea>
<input type="submit" value="Post Message" />
</form>
Load JQuery script to your page. This will initialize when the DOM is ready
<html>
<head>
// loading jquery scripts to your page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script>
// waiting for loading DOM
$(document).ready(function() {
// bind 'testForm' and provide a simple callback function
$('#testForm').ajaxForm(function() {
alert("Thank you. Your message posted!");
});
});
</script>
</head>
...
Oh ..That’s all!
When you submit the form, name and message fields will be passed to function.php. If the status return by server is success then user will see Thank You message which you given.
Please give your valuable feedbacks in comments or using Contact Form. Thank you for reading