sendEmail / sendEmailWithRecipient Undefined

I am trying to implement the SendEmail on Submit of a form. After changing the code to fit my needs I am getting Errors on the Page code for both the JWS and the JS. If you click the red dot it shows “sendEmailWithRecipient” is undefined" and “sendEmail is undefined”. Both ARE shown in the “backend” section with no errors. Here is the code:

Page Code:
//comments

$w.onReady(function () {
//TODO: write your page related code here…

});

function sendFormData() {
const subject = Registry History Request For Dash #${$w("#input3").value};
const body = May I Please Have Access To The History For Dash#: ${$w("#input3").value} \rName: ${$w("#input1").value} \rEmail: ${$w("#input2").value};
const recipient = $w(“#input1”).value;

sendEmailWithRecipient(subject, body, recipient)
.then(response => console.log(response));

sendEmail(subject, body)
.then(response => console.log(response));
}


//email.jsw

import {sendWithService} from ‘backend/sendGrid’;

export function sendEmail(subject, body) {
const key = “< MY KEY>”;
const sender = “cwvega76@gmail.com”;
const recipient = “cwvega76@gmail.com”;
return sendWithService(key, sender, recipient, subject, body);
}

export function sendEmailWithRecipient(subject, body, recipient) {
const key = “< MY KEY>”;
const sender = “cwvega76@gmail.com”;
return sendWithService(key, sender, recipient, subject, body);
}

//sendGrid.js

import {fetch} from ‘wix-fetch’;

export function sendWithService(key, sender, recipient, subject, body) {
const url = “https://api.sendgrid.com/api/mail.send.json”;

const headers = {
“Authorization”: "Bearer " + key,
“Content-Type”: “application/x-www-form-urlencoded”
};

const data = from=${sender}&to=${recipient}&subject=${subject}&text=${body};

const request = {
“method”: “post”,
“headers”: headers,
“body”: data
};

return fetch(url, request)
.then(response => response.json());
}

You need to include import statements at the beginning of your page code:

import {sendEmail} from 'backend/email'; 
import {sendEmailWithRecipient} from 'backend/email';

Thank You Very Much!

OK. No errors anywhere, only a warning on the line: function sendFormData() {
Click the warning triangle it show: Function sendFormData is unused

I tested the form submission, the form data was inserted into the database. Testing with SendGrid integration procedure… it says its not getting my email request???

You’re getting the warning because you never call the sendFormData() function.

Go to the Event Handler section of the tutorial, and you will see that you omitted the the call to sendFormData():

$w.onReady(function () {
   $w("#dataset1").onAfterSave(sendFormData);
});

Make sure you use your dataset name in the code.

Also, am I correct in assuming that you use your API code where you have < MY KEY >?

Yes, I am using my API code key that I got from sendGrid. Also, I just went back to the YouTube video and heard him say… “You have to use a Wix custom input form for this to work”. I had just created User Input boxes with a Submit button.

Take a look at the tutorial How to Send an Email on Form Submission . This tutorial uses a standard Wix Code form. Seems to me that the Youtube project will also work with a standard form - don’t see why not. In any case, take a look at the tutorial - that should get you going OK.

I had looked at the tutorial before as well as the You Tube. I just went back to the tutorial and actually copied and pasted that Page code and made the necessary changes. Now I am getting error at 1st line stating:
“ESLint failed to validate this file because an error occurred: Unknown character at position 4”

Sorry, can’t tell what’s wrong without seeing the code.

I don’t see anything wrong. If I move it down to line two… same. I i delete it, line 3 gets the ESLint error???

Please post the URL of your site so I can inspect. Only authorized Wix personnel can get access to your site in the editor.

Thanks, The URL is: https://jds-cvoa.wixsite.com/cvoa

The page is a LightBox named Registry History Request

Cool site!

Umm, I looked at the page and I get an error, but not the one who pointed out.

On this line:
$w(“#CV-Emails”).onAfterSave(sendFormData);
I get this error:
TypeError: $w(…).onAfterSave is not a function

I believe that you’re trying to access the dataset, so the code should be:
$w(“#dataset1”).onAfterSave(sendFormData);

What do you think?

Yisrael

The name of the dataset where the emails are stored in CV-Emails. The How To said that dataset1 should be changed to match your dataset?

You should be using the ID and not the name. The ID is #dataset1:

That was it!. Its working now!

Thanks much for your help… and patience.
JD

Glad to help.