Entry Point: emailSender.ssp

Note:

Before you run this script, you must replace the URL root and the domain with one specific to your account.

          <%@ NApiVersion="2.x" %>
<html>
<head>
<!--add css, js packages here -->
<style>
    input::placeholder, textarea::placeholder {
        font-size: 12px;
    }

    .formfield * {
        vertical-align: middle;
    }
</style>
</head>
<body>
<div>
    <h2>Email Sender</h2>
    <form action="/" method="POST" id="email-form">
        <fieldset>
            <legend>Mandatory fields</legend>
            <p>
                <label for="recipients"><b>Email</b></label>
                <input type="email" placeholder="recipient1@example.com, recipient2@example.com,..." name="recipients" size="50" required>
            </p>
            <p>
                <label for="subject"><b>Subject</b></label>
                <input type="text" placeholder="Subject..." name="subject" size="50" required>
            </p>
            <p class="formfield">
                <label for="body"><b>Body</b></label>
                <textarea placeholder="Email body..." name="body" rows="10" cols="70"></textarea>
            </p>
        </fieldset>
        <fieldset>
            <legend>Optional fields</legend>
            <p>
                <label for="cc"><b>Cc</b></label>
                <input type="cc" placeholder="cc1@example.com, cc2@example.com,..." name="cc" size="50">
            </p>
            <p>
                <label for="bcc"><b>Bcc</b></label>
                <input type="bcc" placeholder="bcc1@example.com, bcc2@example.com,..." name="bcc" size="50">
            </p>
        </fieldset>
            <p>
                <input type="submit" id="send-email-button" value="Send Email">
                <input type="submit" id="send-email-in-bulk-button" value="Send Email In Bulk">
            </p>
    </form>
    <div id="service-response" hidden>
    </div>
</div>

<script language="JavaScript">
    const XHR = new XMLHttpRequest();
    XHR.onload = handleServiceResponse;
    XHR.onerror = handleServiceError;
    var sendEmailButton = document.getElementById('send-email-button');
    var sendEmailInBulkButton = document.getElementById('send-email-in-bulk-button');
   
    var submitForm = function(event) {
        event.preventDefault ? event.preventDefault() : (event.returnValue = false);
        var form = document.getElementById("email-form");
        sendData(form, this.value);
    };
   
    sendEmailButton.addEventListener('click', submitForm, false);
    sendEmailInBulkButton.addEventListener('click', submitForm, false);
   
    function sendData(form, submitter) {
        var formData = new FormData(form);
        formData.append("emailtype", submitter);
        XHR.open("POST", "https://advanced.localhostloopback.com/test-v2/emailService.ss", true);
        XHR.setRequestHeader("Content-Type", "application/json");
        XHR.send(formDataToJson(formData));
    }
   
    function formDataToJson(formData) {
        var jsonObject = {};
        for (const [key, value]  of formData.entries()) {
            jsonObject[key] = value;
        }
        return JSON.stringify(jsonObject);
    }
   
    function handleServiceResponse() {
        if (XHR.readyState == 4 && XHR.status == 200) {
            try {
                var response = JSON.parse(XHR.responseText);
            
                if(response.error) {
                    showServiceResponse(response.error);
                }
                else {
                    showServiceResponse("Email has been sent!");
                }
            }
            catch(e) {
                showServiceResponse(e.name + ": " + e.message);
            }
        }
        else {
            showServiceResponse("Error: " + XHR.statusText + " : " + XHR.responseText);
        }
    }
   
    function handleServiceError() {
        showServiceResponse("Error: " + XHR.statusText + " : " + XHR.responseText);
    }
   
    function showServiceResponse(response) {
        var responseElement = document.getElementById("service-response");
        responseElement.innerHTML = response;
        responseElement.style.display = "block";
        responseElement.style.fontWeight = "bold";
    }
</script>

</body>
</html>

Related Topics