William Jiang

JavaScript,PHP,Node,Perl,LAMP Web Developer – http://williamjxj.com; https://github.com/williamjxj?tab=repositories

PHP and jQuery: send email

I wrote a very compact, simple web app: send email via a web page.
The functions use PHP and jQuery(version 1.5.1), include:

  • form validation
    I use a excellent jQuery plugin: Validation Engine to do the form validation.
  • Ajax Style send email
    use jQuery’s $.ajax(), and ‘click’ event to send email instead of form submit.

(1) the header part: to launch all the need js and css file.

<script language="javascript" type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.validationEngine-en.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.validationEngine.js"></script>
<link rel="stylesheet" type="text/css" href="css/validationEngine.jquery.css" />

(2) form and its javascript action:

<form id="request_form" method="post" action="<?=$_SERVER['PHP_SELF'];?>">
  <div class="inputbg">
    <input id="organization" name="organization" type="text"  class="input validate[required]" onFocus="this.select();" />
  <div class="inputbg">
    <input id="name" name="name" class="input validate[required]" type="text" onFocus="this.select();" />
  <div class="inputbg">
    <input id="email" name="email" type="text" class="input validate[required,custom[email]]" onFocus="this.select();" />
  <p>Phone #:</p>
  <div class="inputbg">
    <input id="phone" name="phone" class="input validate[required,custom[telephone]]" type="text" onFocus="this.select();" />
  <input id="request_submit" value="Send Request" type="submit">
<script language="javascript" type="text/javascript">
$(document).ready(function() {
  $("#request_submit").click( function(event) {
	if ($("#request_form").validationEngine({returnIsValid:true})) {
		alert( $("#request_form").serialize());
			type: $("#request_form").attr('method'),
			url: $("#request_form").attr('action'),
			data: $("#request_form").serialize(),
			success: function(data) {
				$("#request_form").append('<p>Successfully send out this email request!</p>');

(3) PHP process:


if(isset($_POST['email'])) {
	if ( !check_email( trim($_POST['email']) )) {
		echo 'Please enter a valid email address<br />';
	else send_email();
function check_email($emailAddress) {
	if (preg_match('/\b[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b/i', $emailAddress)){
		$emailArray = explode("@",$emailAddress);
		if (checkdnsrr($emailArray[1])){
			return true;
	return false;
function send_email() {
	$message = "\nOrganization: " . $_POST['organization'] . 
		"\nName: " . $_POST['name'] .
		"\nEmail: " . $_POST['email'] .
		"\nPhone: " . $_POST['phone'];
	$message .= "\n\nBrowser Info: " . $_SERVER["HTTP_USER_AGENT"] .
		"\nIP: " . $_SERVER["REMOTE_ADDR"] .
		"\n\nDate: " . date("Y-m-d h:i:s");

	$siteEmail = 'test@test.com';
	$emailTitle = 'Request from examples.com';
	$thankYouMessage = "Thank you for contacting us, we'll get back to you shortly.";   

	if(! mail($siteEmail, $emailTitle, $message, 'From: ' . $_POST['name'] . ' <' . $_POST['email'] . '>'))
		echo 'Mail can not sent.';

It works pretty cool.


3 responses to “PHP and jQuery: send email

  1. vagnok 10/26/2011 at 12:24 pm


    It doesn’t work to me, can you send an example file?


    • williamjxj 10/26/2011 at 2:08 pm

      1. first, make sure the Linux command ‘mail’ works ($ type mail or: $ which mail to make it path is available).

      2. has your smtp server setup ok?

      I will send you the codes later when I got time. the benefits to use it are: form validation, simple, and ajax.

    • williamjxj 10/26/2011 at 2:45 pm

      I created the ‘send email sample’ which is available from here:


      1. it includes all the necessary files together, so directly runs send_email.php, it would work.

      2. before that, change the receiving email address which refers to you on send_email.php.

      3. that’s it.
      By the way, if you want to make your form looks better, add jqtransform.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: