Emails in PHP without page navigation using AJAX

Emails in PHP without page navigation using AJAX

Sending emails in PHP is a common task. Emailing codes are very easy to implement. The PHP mail function is what we need. That’s it. Just fill in the required variables and you’re ready to go.

The PHP mail function works independently. So, there is no redirection involved in case of sending mails. What I mean is, when you are running a script for emails in PHP, the script runs on the same page without any change in the URL.

So, I thought I could add some more innovation to this. Well, this is not my innovation at all. In fact, this is being implemented all over the internet on various websites and plugins. Sending a mail through AJAX; that’s our target.

send-emails-using-ajax-jquery-no-navigation

Emails in PHP and their usage

Well, AJAX is a substitute for avoiding page navigation. You all know that. If you are still unaware of what AJAX can do, you might try reading this article.

For emails in PHP, we can try an AJAX alternative to achieve some interesting results –

  1. Suppose you have a popup box in a plain HTML page through JavaScript or JQuery. Now, if you want to implement a PHP email script in the popup box, you can use an AJAX call through JQuery to a PHP file.
  2. In external JavaScript files or JQuery files included in a PHP file or HTML file. JavaScript has the option to send emails, but it becomes a bit difficult and complex. So, when you are running JavaScript codes for validation or anything of that sort; you can send quick emails in PHP from your JQuery AJAX codes.

There are various other similar situations where you would find this method far more useful. AJAX calls an asynchronous method to access the PHP file script, so your page navigation would be avoided all the time.

Enabling emails in PHP through AJAX

The idea is simple. Just bind some event with the AJAX call. So, whenever this event is fired, the JQuery POST or GET method is called and the PHP script is activated.

The POST or GET method mentions the URL to the PHP file. This file contains the script for emails in PHP. The script in the PHP file is just a normal PHP mail function. So, it has the “headers”, “from”, “to”, “subject”, and “body” parameters.

Let us see an example. Here’s the JQuery code for binding an event to the AJAX call. We have bound the AJAX call to a button click. You can do otherwise.

$('#s').click(function(){
                    $('.main').children().slideUp('fast',function(){
                        // Fetching the data
                        var name = $('#n').val();
                        var email = $('#e').val();
                        var message = $('#m').val();
                        
                        // Sending wait message to the screen
                        $('.main').html('

Please wait…

');
                      
                        // Calling Email Script in PHP file
                        $.post('sendemail.php',{name:name,email:email,message:message},function(value){
                           $('.main').html('

‘+value+’

'); // writing return message to the screen 
                        });
                    })
                });

If you notice, we have a return value from the JQuery POST method callback function. This is plain HTML text that gets appended once the mail has been successfully sent. So, it behaves a sa confirmation.

For the above JQuery code, here’s the script for emails in PHP. The PHP file is named as “email.php” (you can see that we have mentioned this filename in the JQuery POST method “url” space).

$name=$_POST['name'];
    $email=$_POST['email'];
    $message=$_POST['message'];


//Sending mail
$from = 'admin@a100websolutions.in';
$to = $email;
$subject = 'Demo Mail from A 100 Web Solutions';
$body = '
This is a message featuring the demo of
Sending Emails with AJAX and JQuery

The message from the sender is as follows -‘
.$message.

    
';

// To send HTML mail, the Content-type header must be set
$headers  = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";

$headers .= 'From: '.$from. "\r\n" .
   'Reply-To: '.$from. "\r\n";

if(mail($to, $subject, $body, $headers)){

    echo 'Mail sent successfully';
}

An important aspect of the PHP code

Now we have a very important point to discuss. The POST method, as you might know has the data part. That is, you can send values to the PHP file in the form of JSON data.

In the above example, we have certain fixed data. So, for the above script for emails in PHP, the AJAX call would result in sending mails to a particular receiver from a particular sender. In fact, the data that is sent – the message subject and body; everything would be a fixed one.

So, in order to make it variable, we need to implement the JSON data passing mechanism. We would create some fields for the user to put values in and then capture that data and compose our mail accordingly.

The idea is nothing way different from what we have already done. The event remains same. It’s just that, within the event function, we capture the values in the different fields and send them via JSON data to append them to the emails in PHP.

In the PHP file, we collect the data just like we do when we retrieve data from database using AJAX and JQuery.

Once the data is collected, the rest is same.

Try this mechanism for sending emails in PHP with AJAX and let me know how it turned out.

Comments are closed.