Ajax form submission by jquery


In this tutorial, we will learn form submission using jQuery without navigate out from the page. It accepts user input, processes it and sends it to a php file called “process.php”. The PHP script will send a notification email to the recipient. Of course, in case browser couldn’t support javascript/XMLHttpRequest, we have a second plan ready, the form will submit the data using the normal form submission.

How do we do that? Easy, we specified POST and ACTION attributes in the FORM element, if browsers couldn’t support it, that will submit the form straight away. If the browsers could support it, the javascript will cancel the submit button default behaviour. And we need to code the PHP script to support both GET and POST methods and produce the result accordingly.

Example

jquery-ajaxform.php

——————————-

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title>Create a Ajax based form submission with jQuery</title>

<script type=”text/javascript” src=”http://code.jquery.com/jquery-latest.js”></script&gt;
<script type=”text/javascript”>
$(document).ready(function() {

//if submit button is clicked
$(‘#submit’).click(function () {

//Get the data from all the fields
var name = $(‘input[name=name]’);
var email = $(‘input[name=email]’);
var website = $(‘input[name=website]’);
var comment = $(‘textarea[name=comment]’);

//Simple validation to make sure user entered something
//If error found, add hightlight class to the text field
if (name.val()==”) {
name.addClass(‘hightlight’);
return false;
} else name.removeClass(‘hightlight’);

if (email.val()==”) {
email.addClass(‘hightlight’);
return false;
} else email.removeClass(‘hightlight’);

if (comment.val()==”) {
comment.addClass(‘hightlight’);
return false;
} else comment.removeClass(‘hightlight’);

//organize the data properly
var data = ‘name=’ + name.val() + ‘&email=’ + email.val() + ‘&website=’ +
website.val() + ‘&comment=’  + encodeURIComponent(comment.val());

//disabled all the text fields
$(‘.text’).attr(‘disabled’,’true’);

//show the loading sign
$(‘.loading’).show();

//start the ajax
$.ajax({
//this is the php file that processes the data and send mail
url: “process.php”,

//GET method is used
type: “GET”,

//pass the data
data: data,

//Do not cache the page
cache: false,

//success
success: function (html) {
//if process.php returned 1/true (send mail success)
if (html==1) {
//hide the form
$(‘.form’).fadeOut(‘slow’);

//show the success message
$(‘.done’).fadeIn(‘slow’);

//if process.php returned 0/false (send mail failed)
} else alert(‘Sorry, unexpected error. Please try again later.’);
}
});

//cancel the submit button default behaviours
return false;
});
});
</script>
<style>
body{text-align:center;}
.clear {
clear:both
}
.block {
width:400px;
margin:0 auto;
text-align:left;
}
.element * {
padding:5px;
margin:2px;
font-family:arial;
font-size:12px;
}
.element label {
float:left;
width:75px;
font-weight:700
}
.element input.text {
float:left;
width:270px;
padding-left:20px;
}
.element .textarea {
height:120px;
width:270px;
padding-left:20px;
}
.element .hightlight {
border:2px solid #9F1319;
background:url(iconCaution.gif) no-repeat 2px
}
.element #submit {
float:right;
margin-right:10px;
}
.loading {
float:right;
background:url(ajax-loader.gif) no-repeat 1px;
height:28px;
width:28px;
display:none;
}
.done {
background:url(iconIdea.gif) no-repeat 2px;
padding-left:20px;
font-family:arial;
font-size:12px;
width:70%;
margin:20px auto;
display:none
}
</style>
<body>

<div>
<div>
<b>Thank you !</b> We have received your message.
</div>
<div>
<form method=”post” action=”process.php”>
<div>
<label>Name</label>
<input type=”text” name=”name” />
</div>
<div>
<label>Email</label>
<input type=”text” name=”email” />
</div>
<div>
<label>Website</label>
<input type=”text” name=”website” />
</div>
<div>
<label>Comment</label>
<textarea name=”comment” /></textarea>
</div>
<div>

<input type=”submit” id=”submit”/>
<div></div>
</div>
</form>
</div>
</div>

<div></div>
</body>
</html>

process.php

———————–

<?php

//Retrieve form data.
//GET – user submitted data using AJAX
//POST – in case user does not support javascript, we’ll use POST instead
$name = ($_GET[‘name’]) ? $_GET[‘name’] : $_POST[‘name’];
$email = ($_GET[’email’]) ?$_GET[’email’] : $_POST[’email’];
$website = ($_GET[‘website’]) ?$_GET[‘website’] : $_POST[‘website’];
$comment = ($_GET[‘comment’]) ?$_GET[‘comment’] : $_POST[‘comment’];

//flag to indicate which method it uses. If POST set it to 1
if ($_POST) $post=1;

//Simple server side validation for POST data, of course, you should validate the email
if (!$name) $errors[count($errors)] = ‘Please enter your name.’;
if (!$email) $errors[count($errors)] = ‘Please enter your email.’;
if (!$comment) $errors[count($errors)] = ‘Please enter your comment.’;

//if the errors array is empty, send the mail / no errors found
if (!$errors) {

//if POST was used, display the message straight away
if ($_POST) {
echo ‘Thank you! We have received your message.’;

//This one for ajax
//1 means success, 0 means failed
} else {
echo ‘1’;
}

} else {
//display the errors message
for ($i=0; $i<count($errors); $i++) echo $errors[$i] . ‘<br/>’;
echo ‘<a href=”jquery-ajaxform.php”>Back</a>’;
exit;
}

?>

Advertisements