Sign In
Register
Help
Today I was thinking that I should write another tutorial but about what.. I suddenly found myself in Gmail and I saw that moving in it doesn't reload page.. So I was thinking I'll make a tutorial about sending emails and using AJAX for it.
I hope it helps somebody..
So let's start..
First you must make your HTML form.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <script src="jquery.js"></script> <script src="process.js"></script> <title>Sending emails with PHP & jQuery</title>
As you see I have included 2 files: jquery.js and process.js. First file "jQuery.js" is downloaded libary from jQuery site. Download it from here. Second file is "process.js". This is the file that we are creating.
Now let's add some style.
<style type="text/css">
body{
font-family: Verdana;
font-size: 11px;
}
input{
font-family: Verdana;
font-size: 11px;
}
table{
border: 1px solid #cccccc;
}
textarea{
font-family: Verdana;
font-size: 11px;
}
</style>
Now it's time for our form.
</head> <body> <table align="center" border="0" width="500"> <tr> <td>To:</td><td><input type="text" size="30" id="to" /><div style="display: none;" id="error-to"><font color="#FF0000">Insert email address!</font></div></td> </tr> <tr> <td>From:</td><td><input type="text" size="30" id="from" /><div style="display: none;" id="error-from"><font color="#FF0000">Your email/name here!</font></div></td> </tr> <tr> <td>Subject:</td><td><input type="text" size="30" id="subject" /><div style="display: none;" id="error-subject"><font color="#FF0000">Enter subject!</font></div></td> </tr> <tr> <td colspan="2"><textarea id="content" rows="9" cols="59"></textarea></td> </tr> <tr> <td width="10%"><input type="button" id="submit-button" value="Send" /></td> <td> <div style="display: none;" id="loading"><img src="loading.gif" /> <font color="#FF0000">Sending..</font></div> <div style="display: none;" id="message-sent"><font color="#008040">Message sent!</font></div> <div style="display: none;" id="error-content"><font color="#FF0000">Please enter come content!</font></div> </td> </tr> </table> </body> </html>
Now your HTML page should look like this:
As you have noticed that I have included error messages in div tags. I added
style="display: none;"
so that they won't be seen if they aren't nessesary.
Errors explanation:
<div style="display: none;" id="error-to"><font color="#FF0000">Insert email address!</font></div>
It will be triggered when "To:" isn't filled
<div style="display: none;" id="error-from"><font color="#FF0000">Your email/name here!</font></div>
This will be triggered when "From:" isn't filled
<div style="display: none;" id="error-subject"><font color="#FF0000">Enter subject!</font></div>
This will show up when subject isn't filled
<div style="display: none;" id="error-content"><font color="#FF0000">Please enter come content!</font></div>
You will see this when you haven't written anything into textarea.
Now you will see that there are some more things before textarea error. They are for you to see is your mail sent or not.
<div style="display: none;" id="loading"><img src="loading.gif" /> <font color="#FF0000">Sending..</font></div>
This is to show you that it's sending. This image there is just for the "coolness" element.
<div style="display: none;" id="message-sent"><font color="#008040">Message sent!</font></div>
This will show you that your message has been sent.
Now.. Form is done.. now it's time for process.js file.
Let's start our file with:
$(function(){Every jQuery script must start with thingy like this.
Now let's add this:
$("#submit-button").click(function(){This will tell us when "Send" button is pressed.. and when it's done, put the machine to work.
Now everything is working.. Let's show "Loading.." message:
$("#loading").fadeIn(100).show();Now when it's loading let's start moving things.
var from = $("#from").val();
var to = $("#to").val();
var subject = $("#subject").val();
var content = $("#content").val();
var data = "from=" + from + "&to=" + to + "&subject=" + subject + "&content=" + content;First let's get all info that we need. This part will take values of all fields.
if(to == ""){
$("#error-to").fadeIn(700).show();
$("#loading").fadeOut(100).hide();
}else if(from == ""){
$("#error-from").fadeIn(700).show();
$("#loading").fadeOut(100).hide();
}else if(subject == ""){
$("#error-subject").fadeIn(700).show();
$("#loading").fadeOut(100).hide();
}else if(content == ""){
$("#error-content").fadeIn(700).show();
$("#loading").fadeOut(100).hide();Little checking that everything is filled. If not let's take "Loading.." message away and display error message.
}else{
$.ajax({
type: "POST",
url: "send.php",
data: data,
success: function(){
$("#loading").fadeOut(100).hide();
$('#message-sent').fadeIn(500).show();
}
});
}
});
});Now when everything is fine.. let's send data to send.php file. When everything is done.. let's remove the "Loading.." message and display "Message sent!" message.
Now process.js is done.. Let's create our sending script and we are done.
Now it's time for send.php file.
<?php
$to = $_REQUEST['to'];
$from = $_REQUEST['from'];
$message = $_REQUEST['content'];
$subject = $_REQUEST['subject'];
$header = "From: <".$from.">" ."\r\n";[/PHP]
Let's gather all info that we need and create header for our email.
[PHP]$send = @mail($to, $subject, $message, $header);
if(!$send){
die();
}
?>This sends our message. Little error checking and we are done.
So here are the full codes:
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Jaan" />
<script src="jquery.js"></script>
<script src="process.js"></script>
<title>Sending emails with PHP & jQuery</title>
<style type="text/css">
body{
font-family: Verdana;
font-size: 11px;
}
input{
font-family: Verdana;
font-size: 11px;
}
table{
border: 1px solid #cccccc;
}
textarea{
font-family: Verdana;
font-size: 11px;
}
</style>
</head>
<body>
<table align="center" border="0" width="500">
<tr>
<td>To:</td><td><input type="text" size="30" id="to" /><div style="display: none;" id="error-to"><font color="#FF0000">Insert email address!</font></div></td>
</tr>
<tr>
<td>From:</td><td><input type="text" size="30" id="from" /><div style="display: none;" id="error-from"><font color="#FF0000">Your email/name here!</font></div></td>
</tr>
<tr>
<td>Subject:</td><td><input type="text" size="30" id="subject" /><div style="display: none;" id="error-subject"><font color="#FF0000">Enter subject!</font></div></td>
</tr>
<tr>
<td colspan="2"><textarea id="content" rows="9" cols="59"></textarea></td>
</tr>
<tr>
<td width="10%"><input type="button" id="submit-button" value="Send" /></td>
<td>
<div style="display: none;" id="loading"><img src="loading.gif" /> <font color="#FF0000">Sending..</font></div>
<div style="display: none;" id="message-sent"><font color="#008040">Message sent!</font></div>
<div style="display: none;" id="error-content"><font color="#FF0000">Please enter come content!</font></div>
</td>
</tr>
</table>
</body>
</html>process.js
$(function(){
$("#submit-button").click(function(){
$("#loading").fadeIn(100).show();
var from = $("#from").val();
var to = $("#to").val();
var subject = $("#subject").val();
var content = $("#content").val();
var data = "from=" + from + "&to=" + to + "&subject=" + subject + "&content=" + content;
if(to == ""){
$("#error-to").fadeIn(700).show();
$("#loading").fadeOut(100).hide();
}else if(from == ""){
$("#error-from").fadeIn(700).show();
$("#loading").fadeOut(100).hide();
}else if(subject == ""){
$("#error-subject").fadeIn(700).show();
$("#loading").fadeOut(100).hide();
}else if(content == ""){
$("#error-content").fadeIn(700).show();
$("#loading").fadeOut(100).hide();
}else{
$.ajax({
type: "POST",
url: "send.php",
data: data,
success: function(){
$("#loading").fadeOut(100).hide();
$('#message-sent').fadeIn(500).show();
}
});
}
});
});send.php
<?php
$to = $_REQUEST['to'];
$from = $_REQUEST['from'];
$message = $_REQUEST['content'];
$subject = $_REQUEST['subject'];
$header = "From: <".$from.">" ."\r\n";
$send = @mail($to, $subject, $message, $header);
if(!$send){
die();
}
?>And it's done..
I hope you liked it.
Regards,
Jaan
MultiQuote