Sending email from Form Submit action

As per this guide: Velo Tutorial: Sending an Email on Form Submission | Help Center | Wix.com

Form saves data fine to the dataset.

I created two backend JS files and modified with my SendGrid key.

On the page code, I am getting this error: TypeError: $w(…).onAfterSave is not a function

I think something seems to be missing in the guide from Wix, the event handler? But what do I add the event handler to? I tried adding it to the Dataset onSave() event, but that’s not it.

Any help would be appreciated.

thanks

no one?

Hi Daniel,

The error you described seems to come from the line $w(“#sportDataset”).onAfterSave(sendFormData); as it appears in the guide’s example.

You need to use the correct ID of the dataset in this line of the code. The example assumes that you set the dataset’s ID to " sportDataset " (by default the dataset element gets an ID of a form dataset1 ).

Please make sure the used ID is correct indeed.
You can change the ID of an element by right-clicking on it, selecting the " View properties " option, and altering the ID property:

Here you can find more details on how to create a Form and configure the dataset - Velo Tutorial: Creating a Form to Store User Input in a Database Collection | Help Center | Wix.com

In case the issue remains, please share the front-end code you put on the page. Also a link to your site would help.

Alexander

Hi - Here is the page code:


import {sendEmail} from ‘backend/email’;

$w.onReady( function () {
$w(“#2018_RECREATIONAL”).onAfterSave(sendFormData);
});

function sendFormData() {
const subject = New Submission from ${$w("#page1").value};
const body = Gymnast First Name: ${$w("#fname")} \rGymnast Last Name: ${$w("#lname").value} \rDOG: ${$w("#dobPicker").value} \rPhone: ${$w("#phone").value} \rEmail: ${$w("#email").value} \rAddress: ${$w("#address").value} \rCity: ${$w("#city").value} \rProvince: ${$w("#provDropdown").value} \rPostal Code: ${$w("#postal").value} \rParent1: ${$w("#pname1").value} \rParent2: ${$w("#pname2").value} \rProgram Choice: ${$w("#progChoice").value};

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

I keep getting this error message: TypeError: $w(…)onAfterSave is not a function

site url: https://www.jusco.ca/sign-up
You can’t see the code here since I can’t publish this and wreck a functioning form page which saves data to the dataset. It’s only in my unpublished view at this time. You can see that I changed the dataset referenced in the example to the name of my dataset ID.

Ok i see what you meant… sorry the ID is now changed. All seems to be working (saving) but no email is received. I checked SendGrid console and there’s no request there listed.

Here is the latest code that works for saving the form data, but no email is sent (no errors are shown either):

import {sendEmail} from ‘backend/email’;
$w.onReady( function () {
$w(“#dataset1”).onAfterSave(sendFormData);
});

function sendFormData() {
const subject = New Submission **from** Jusco;
const body = Gymnast First Name: ${$w("#fname")} \rGymnast Last Name: ${$w("#lname").value} \rDOB: ${$w("#dobPicker").value} \rPhone: ${$w("#phone").value} \rEmail: ${$w("#email").value} \rAddress: ${$w("#address").value} \rCity: ${$w("#city").value} \rProvince: ${$w("#provDropdown").value} \rPostal Code: ${$w("#postal").value} \rParent1: ${$w("#pname1").value} \rParent2: ${$w("#pname2").value} \rProgram Choice: ${$w("#progChoice").value};

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

Your code looks valid. [You might want to fix though the “First Name” part - you missed the .value: you use " ${$w(" #fname ")} " instead of " ${$w(" #fname ") .value } ". But this is definitely not the issue.]

It might be a problem on the SendGrid’s side or an issue with the SendGrid key. Do you see any messages in the Preview 's console?

I would suggest to try adding the following code in your email.jsw file to get more details:
Assuming you have this line:

return sendWithService(key, sender, recipient, subject, body)

replace it with:

return sendWithService(key, sender, recipient, subject, body)
  .then(result => {
    console.log(`Sent result: ${JSON.stringify(result)}`);
    return result;
  })
  .catch(error => {
    console.log(`Error occurred: ${error}`);
    throw error;
  });

Then try to submit the form in the Preview mode and check the messages in the console. You should see something like this (in this case the SendGrid key was invalid):

Yeah thanks I figured it out - my key was incorrect and I was not seeing anything in the console. I grabbed Postman and made sure it worked directly submitting a request and that’s when I saw i had the wrong key… all working now thanks.