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());
}
Glad to help.
That was it!. Its working now!
Thanks much for your help... and patience.
JD
You should be using the ID and not the name. The ID is #dataset1:
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?
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
Thanks, The URL is: https://jds-cvoa.wixsite.com/cvoa
The page is a LightBox named Registry History Request
Please post the URL of your site so I can inspect. Only authorized Wix personnel can get access to your site in the editor.
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????
Sorry, can't tell what's wrong without seeing the code.
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"
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.
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.
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 >?
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???
Thank You Very Much!
You need to include import statements at the beginning of your page code:
import {sendEmail} from 'backend/email'; import {sendEmailWithRecipient} from 'backend/email';