Email/SMS From JavaScript

When certain events happen within JavaScript on your page, an email or a text message can be sent to you. A few examples of events you may wish to be notified about are:

1. When a page is loaded (perhaps a page to test a feature or a sales page).

2. When a page is loaded by certain search engine robots — like Google or Bing.

3. When a JavaScript function is run to do something on the web page. Examples are a user submitting a form or remaining on a page over a certain length of time.

(If you prefer to log the information rather than receiving it in your email box or as a text message, see the Logging With JavaScript Willmaster article.)

How It Works

At whatever point in your JavaScript that you want to do it, Ajax sends the email subject and body content to a PHP script to send off.

The PHP script sends it to the email or SMS address that is hard coded within the script. (Because the destination address is hard coded within the PHP script, it can not be used by spammers to spam hundreds or thousands of addresses.)

That's it. The message composed by the JavaScript is sent to its destination by the PHP script.

Installation

Let's do the PHP script first so it's ready for testing when the JavaScript is put in place.

Installing the PHP Script

The PHP script has two variables to customize, the message "From" address and its destination address. Those will be talked about below this source code box.

<?php
/*
Email/SMS Sender
Version 1.0
November 27, 2021
Will Bontrager Software LLC
https://www.willmaster.com/
*/

/* Two customizations. */

// The From address:
$FromAddress = "name@example.com";

// The destination address (email or SMS):
$DestinationAddress = "name@example.net";

/* End of customization. */

if( isset($_POST['content']) ) { mail($DestinationAddress,$_POST['subject'],$_POST['content'],"From: $FromAddress"); }
exit;
?>

Customizations —

There are two places in the above PHP source code to customize.

1. At the $FromAddress variable, replace name@example.com with the address the email or text message is from. This is the address where a reply would be sent to.

2. At the $DestinationAddress variable, replace name@example.net with the email address or SMS text message address that is the destination of the message.

   A SMS text message address looks like an email address with the part before the "@" character being the destination telephone number and the part after the "@" character being the domain where the SMS is sent to. "1234567890@txt.att.net" is an example.

   The Willmaster article Send Text Message With PHP can be used to determine an SMS email address. The page has a link to an external site that can be used if the list of mobile carriers doesn't include the one you have.

When the customizations are completed, save the PHP script as JSmail.php or other *.php file name that you prefer. Make a note of its URL. (The rest of the instructions on this page assume https://example.com/JSmail.php is the URL.)

Now that the PHP script is ready, we can put the JavaScript on one or more pages.

Installing the JavaScript

The JavaScript is an Ajax function that connects to the PHP script. Other JavaScript can call the Ajax function with the subject and content of the email or SMS you wish to send. Examples are further below.

Here is the Ajax function JavaScript. There is one customization, addressed below the source code box.

<script style="text/javascript">
function SendMessage(subject,content)
{
   var url = "/JSmail.php";
   var http = new XMLHttpRequest();
   if(! http) { alert('No internet connection obtained.'); return; }
   var params = new Array();
   params.push( encodeURIComponent("subject") + "=" + encodeURIComponent(subject) );
   params.push( encodeURIComponent("content") + "=" + encodeURIComponent(content) );
   http.open("POST",url,true);
   http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   http.send(params.join("&"));
}
</script>

Customization —

Replace /JSmail.php with the relative URL to the JSmail.php PHP script you uploaded to your server in the previous step. The relative URL is the absolute url minus the leading http:// or https:// and domain name.

Example:
Absolute URL: https://example.com/JSmail.php
Relative URL: /JSmail.php

The above source code of function SendMessage() with the customization completed will need to be on every web page where other JavaScript needs to use it. The function may be pulled in from an external file instead of hard coded in the web page.

Using function SendMessage()

The function SendMessage() may be called from any JavaScript residing on the same web page. Here is the format:

SendMessage("SUBJECT","CONTENT");

Replace SUBJECT with the email or SMS subject. And replace CONTENT with the email or SMS content. (Remember that SMS content is limited, generally 140 characters maximum.)

Examples of use:

Here is an example of a function SendMessage() call within other JavaScript.

<script style="text/javascript">
function Something()
{
   [lines of JavaScript]
   SendMessage("Notice","Function Something() ran!");
   [lines of JavaScript]
}
</script>

And here is an example of a function SendMessage() call when a div is clicked.

<div onclick="SendMessage('Ha!','The div was clicked!')">
[div content]
</div>

You now know how to send an email or SMS from JavaScript. The JavaScript calls an Ajax function with the message subject and content. In turn, the Ajax functions sends the information to a PHP function that sends the message to its destination.

The email/SMS content destination is hard coded within the PHP function. This is for security, so spammers can't use the PHP function to spam dozens or thousands of people.

This article first appeared with an issue of the Possibilities newsletter.

Will Bontrager