Connect button text with dataset

J.D · January 23, 2020, 11:00am

The code is quite messy it’s a combination of several snippets that are necessary consistent.
Some of them make the code longer and less readable while others create real problems.
Try to do the following:

Have only 1 one single $w.onReady() function in your page (merge all the onReady functions into one).
Do not have different onClick() functions. i.e. cancel all the export function buttonX_click(event) and add their functionality to the switch cases.
Since you save the data directly to your collection, do not use dataset methods like .onAfterSave() .

Then the code will be more consistent and we’ll be able to see if there’re other fixes to do.

info29590 · January 23, 2020, 11:36am

@jonatandor35 Thanks, I know it is not perfect but at least the multiple export functions are working.

So if I understand the point 3, I should delete this part of code:

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

function sendFormData() {
const subject = Nouveau lead ${$w("#input1").value};
const body = Données du formulaire : ${$w("#input2").value} ${$w("#input1").value} ${$w("#input5").value} ${$w("#input6").value} ;

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

After deleting it, I run another test and:

still the last page inputs (Name, First Name, Postcode, Phone) are not showing in the database board.

How can I link the values typed by the visitor to the database?

Also, the email I receive does not contain any datas:

Someting must be wrong in the code:

$w(“#button24”).onClick(event => {
let emailEmailData = {info1: toSave.maisonIndividuelle, info2: toSave.pieceAIsoler, info3: toSave.foyer, info4: toSave.revenuAnnuel, info5: toSave.maisonIndividuelle}
wixData.save(“OneClickForm”, toSave)
.then(() => sendEmail(emailEmailData))
.then(() => wixLocation.to(“/formulaire-valide”));;
)

Should I replace “emailEmailData” with something?

Here is the better looking code:

FRONTEND:

import wixCRM from ‘wix-crm’;
import wixLocation from ‘wix-location’;
import wixData from ‘wix-data’;
import wixUsers from ‘wix-users’;
import {sendEmail} from ‘backend/email’;

// For full API documentation, including code examples, visit Velo API Reference - Wix.com
$w.onReady( function () {
});

//clicked buttons datas configuration
let userId = wixUsers.currentUser.id;
$w.onReady(() => {
let toSave = {_id: userId};
$w(“#button3, #button4, #button5, #button6, #button7, #button8, #button9, #button10, #button11, #button12, #button13, #button14, #button15, #button16, #button17, #button18, #button19, #button20, #button21, #button22, #button23”).onClick(event => {
switch (event.target.id){
case “button3”:
toSave.maisonIndividuelle = “oui”;
$w(‘#group4’).hide();
$w(‘#group5’).show();
break ;
case “button4”:
toSave.maisonIndividuelle = “non”;
break ;
case “button5”:
toSave.pieceAIsoler = “Combles et grenier”;
$w(‘#group5’).hide();
$w(‘#group6’).show();
break ;
case “button6”:
toSave.pieceAIsoler = “Sous-sol et cave”;
$w(‘#group5’).hide();
$w(‘#group6’).show();
break ;
case “button7”:
toSave.pieceAIsoler = “Garage”;
$w(‘#group5’).hide();
$w(‘#group6’).show();
break ;
case “button8”:
toSave.pieceAIsoler = “Toute ma maison”;
$w(‘#group5’).hide();
$w(‘#group6’).show();
break ;
case “button9”:
toSave.foyer = “1”;
$w(‘#group6’).hide();
$w(‘#group7’).show();
break ;
case “button10”:
toSave.foyer = “2”;
$w(‘#group6’).hide();
$w(‘#group7’).show();
break ;
case “button11”:
toSave.foyer = “3”;
$w(‘#group6’).hide();
$w(‘#group7’).show();
break ;
case “button12”:
toSave.foyer = “4”;
$w(‘#group6’).hide();
$w(‘#group7’).show();
break ;
case “button13”:
toSave.foyer = “5 et +”;
$w(‘#group6’).hide();
$w(‘#group7’).show();
break ;
case “button14”:
toSave.revenuAnnuel = “- de 19 074€”;
$w(‘#group7’).hide();
$w(‘#group8’).show();
break ;
case “button15”:
toSave.revenuAnnuel = “19 074€-27 896€”;
$w(‘#group7’).hide();
$w(‘#group8’).show();
break ;
case “button16”:
toSave.revenuAnnuel = “27 896€-33 547€”;
$w(‘#group7’).hide();
$w(‘#group8’).show();
break ;
case “button17”:
toSave.revenuAnnuel = “33 547€-39 192€”;
$w(‘#group7’).hide();
$w(‘#group8’).show();
break ;
case “button18”:
toSave.revenuAnnuel = “39 192€-44 860”;
$w(‘#group7’).hide();
$w(‘#group8’).show();
break ;
case “button19”:
toSave.revenuAnnuel = “+ de 44 860€”;
$w(‘#group7’).hide();
$w(‘#group8’).show();
break ;
case “button20”:
toSave.m2 = “-50m2”;
$w(‘#group8’).hide();
$w(‘#group9’).show();
break ;
case “button21”:
toSave.m2 = “50-100m2”;
$w(‘#group8’).hide();
$w(‘#group9’).show();
break ;
case “button22”:
toSave.m2 = “100-200m2”;
$w(‘#group8’).hide();
$w(‘#group9’).show();
break ;
case “button23”:
toSave.m2 = “+200m2”;
$w(‘#group8’).hide();
$w(‘#group9’).show();
break ;
}
})

//email notification configuration
$w(“#button24”).onClick(event => {
let emailEmailData = {info1: toSave.maisonIndividuelle, info2: toSave.pieceAIsoler, info3: toSave.foyer, info4: toSave.revenuAnnuel, info5: toSave.maisonIndividuelle}
wixData.save(“OneClickForm”, toSave)
.then(() => sendEmail(emailEmailData))
.then(() => wixLocation.to(“/formulaire-valide”));
})
})

BACKEND:

backend email.jsw:
import {sendWithService} from ‘backend/sendGrid’;
export function sendEmail(subject, body) {
const key = “sendgridAPIthativehidden”;
const sender = “myemail@address.com”;
const recipient = “myemail@address.com”;
return sendWithService(key, sender, recipient, subject, body); }

backend 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”;

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

J.D · January 23, 2020, 2:28pm

@info29590 basically -yes.
You can delete this part as well:

// For full API documentation, including code examples, visit http://wix.to/94BuAAs $w.onReady(function () { });
//clicked buttons datas configuration

But as for the email, your front end and back end are not in line with each other. i.e. you pass certain data to the backend and then you don’t treat it right (you pass and object of data from the front end, but on the backend you’re expect toget subject and body).
(Also it looks like you don’t use the SendGrid npm which is recommended. But it’s not a must)

info29590 · January 23, 2020, 4:54pm

@jonatandor35 So you reckon there is no mistakes in that code:

$w(" #button24 ").onClick(event => {
let emailEmailData = {info1: toSave.maisonIndividuelle, info2: toSave.pieceAIsoler, info3: toSave.foyer, info4: toSave.revenuAnnuel, info5: toSave.maisonIndividuelle} wixData.save(“OneClickForm”, toSave)
.then(() => sendEmail(emailEmailData))
.then(() => wixLocation.to(“/formulaire-valide”));
}) })

Can I find a tutorial for setting up SendGrid npm?
Do you think it will solve the issues I am facing?

Do you have any clue about the datas not saving correctly in th database board?

J.D · January 23, 2020, 5:20pm

@info29590 as I said it’s not in line with your backend code.
For example, according to your backend code, you should receive a subject and a body from the front end, while in your front end code you only pass the emailEmailData object (which I believe stands for the “body” variable).

Anyway, I’ve already posted an answer with an explanation how to use SendGrid (with npm), try to search the forum first.

J.D · January 23, 2020, 5:30pm

Basically, you first install the sendGrid npm:
https://support.wix.com/en/article/corvid-managing-external-code-libraries-with-the-package-manager

Then you create a jsw file with code like this:

import sgMail from '@sendgrid/mail';//top of the page
export function mySendgridFunction(sender, address, data) {
   sgMail.setApiKey(d-XXXXXXXXXXXXXXX);
let msg = {
       to: adress,
      from: sender,
       templateId: 'd-YYYYYYYYYYYYYYYY',
       dynamic_template_data: data;
       }; 
       sgMail.send(msg);
}

And on the front end, you first import the module.
And when you want to send an email you call the function and pass the variables (in this example: sender, address, data (object)).

info29590 · January 23, 2020, 5:51pm

@jonatandor35 Gonna give it a try thanks.

In the following code line:

emailEmailData = {info1: toSave.maisonIndividuelle, info2: toSave.pieceAIsoler, info3: toSave.foyer, info4: toSave.revenuAnnuel, info5: toSave.maisonIndividuelle}

The #inputs from last page (Name, First Name, Postcode and Phone) are not indicated.
How could I insert them?

Maybe something like:

emailEmailData = {info1: toSave.maisonIndividuelle, info2: toSave.pieceAIsoler, info3: toSave.foyer, info4: toSave.revenuAnnuel, info5: toSave.maisonIndividuelle, info6: #input1, info7: #input2, info8: #input3, info9: #input4}

?

info29590 · January 23, 2020, 7:26pm

@jonatandor35 Could you please copy/paste me an example of how it should look like on the npm frontend with my data names (maisonIndividuelle, pieceAIsoler, foyer etc…) because it’s not the same as the given example in forum.

Also I did not get why the last inputs are not register in the database.
Should I put in switch section:

case “input1”: toSave.nom = {$w(“#input1”).value} ;
case “input2”: toSave.prenom = {$w(“#input2”).value} ;

?

info29590 · January 24, 2020, 12:54pm

@jonatandor35 I should not be far from solve it, here is the code I have for saving and sending data:

$w(“#button24”).onClick(event => {

let subject = Nouveau lead : ${$w("#input1").value};
let body = Info1 : toSave.maisonIndividuelle, info2: toSave.m2};

wixData.save(“OneClickForm”, toSave)
.then(() => sendEmail(subject, body))
.then(() => wixLocation.to(“/formulaire-valide”));;
})
})
)
});
})
})
)
});
})
})
)

Thing is, in the email body I can’t find the trick to display the text from the clicked buttons (maisonIndividuelle or m2 in that case).

So the email I receive is like that:

Any clue on that?

J.D · January 26, 2020, 10:39am

@info29590 Have you created a template on SendGrid? If you have, then you can define there that it takes the subject from the data you pass to it.

info29590 · January 27, 2020, 4:43pm

@jonatandor35 No I don’t and I’m not sure how it could be useful. I’m just looking for the datas to be sent by email right after the form is submitted (don’t need for a particular template as I really just need the form datas to be sent).

On this form: https://www.bhenv.fr/isolation
The clicked datas from buttons are saving nicely in the database board.
But for the input datas from last page (Name, First name, Postcode, Phone) I can’t figure out the code needed to save this datas in the database board.

I just know it is with the toSave function but I dont know how to use it for input datas.

info29590 · January 27, 2020, 5:19pm

@jonatandor35 Edit: I found out how to save properly the input datas in the database board!
Now I just need that the email sent after form submission contains all the datas.

Here is what this code part looks like:

let body = Nom : ${$w("#input1").value} Prénom : ${$w("#input2").value} CP : ${$w("#input5").value} Tel : ${$w("#input6").value};

So I want to add in the body the clicked buttons datas.

Do you know if there is a function like “If button3 is clicked then include button3 text in email”?
A bit like the function you help me with for saving datas from clicked buttons:
" case “button3”:
toSave.maisonIndividuelle = “oui”;
case “button4”:
toSave.maisonIndividuelle = “non”;"…

but this time for putting data in the body and not saving it?

Or a function that could simply takes all the user datas saved and include them in the body?

info29590 · January 28, 2020, 9:32am

@jonatandor35 Hi! Don’t bother with the last message as I gave up on it for now.

So far, I succeeded to save all the datas in the database board and it is working fine when I’m running a test from the editor’s preview, but when I’m running a test on the website live version the sending button does not work.

You can give it a try at the following address: https://www.bhenv.fr/isolation

Also it seems that the toSave function is only working on the sandbox and not on live.

Here is my code if it can be of any help to solve those last issues:

import wixCRM from ‘wix-crm’;
import wixLocation from ‘wix-location’;
import wixData from ‘wix-data’;
import wixUsers from ‘wix-users’;
import {sendEmail} from ‘backend/email’;
// For full API documentation, including code examples, visit http://wix.to/94BuAAs

$w.onReady( function () {});

//Configuration données boutons cliquées
let userId = wixUsers.currentUser.id;
$w.onReady(() => {
let toSave = { _id: userId };
$w(“#button3, #button4, #button5, #button6, #button7, #button8, #button9, #button10, #button11, #button12, #button13, #button14, #button15, #button16, #button17, #button18, #button19, #button20, #button21, #button22, #button23”).onClick(event => {
switch (event.target.id) {
case “button3”:
toSave.maisonIndividuelle = “oui”;
$w(‘#group4’).hide();
$w(‘#group5’).show();
break ;
case “button4”:
toSave.maisonIndividuelle = “non”;
break ;
case “button5”:
toSave.pieceAIsoler = “Combles et grenier”;
$w(‘#group5’).hide();
$w(‘#group6’).show();
break ;
case “button6”:
toSave.pieceAIsoler = “Sous-sol et cave”;
$w(‘#group5’).hide();
$w(‘#group6’).show();
break ;
case “button7”:
toSave.pieceAIsoler = “Garage”;
$w(‘#group5’).hide();
$w(‘#group6’).show();
break ;
case “button8”:
toSave.pieceAIsoler = “Toute ma maison”;
$w(‘#group5’).hide();
$w(‘#group6’).show();
break ;
case “button9”:
toSave.foyer = “1”;
$w(‘#group6’).hide();
$w(‘#group7’).show();
break ;
case “button10”:
toSave.foyer = “2”;
$w(‘#group6’).hide();
$w(‘#group7’).show();
break ;
case “button11”:
toSave.foyer = “3”;
$w(‘#group6’).hide();
$w(‘#group7’).show();
break ;
case “button12”:
toSave.foyer = “4”;
$w(‘#group6’).hide();
$w(‘#group7’).show();
break ;
case “button13”:
toSave.foyer = “5 et +”;
$w(‘#group6’).hide();
$w(‘#group7’).show();
break ;
case “button14”:
toSave.revenuAnnuel = “- de 19 074€”;
$w(‘#group7’).hide();
$w(‘#group8’).show();
break ;
case “button15”:
toSave.revenuAnnuel = “19 074€-27 896€”;
$w(‘#group7’).hide();
$w(‘#group8’).show();
break ;
case “button16”:
toSave.revenuAnnuel = “27 896€-33 547€”;
$w(‘#group7’).hide();
$w(‘#group8’).show();
break ;
case “button17”:
toSave.revenuAnnuel = “33 547€-39 192€”;
$w(‘#group7’).hide();
$w(‘#group8’).show();
break ;
case “button18”:
toSave.revenuAnnuel = “39 192€-44 860”;
$w(‘#group7’).hide();
$w(‘#group8’).show();
break ;
case “button19”:
toSave.revenuAnnuel = “+ de 44 860€”;
$w(‘#group7’).hide();
$w(‘#group8’).show();
break ;
case “button20”:
toSave.m2 = “-50m2”;
$w(‘#group8’).hide();
$w(‘#group9’).show();
break ;
case “button21”:
toSave.m2 = “50-100m2”;
$w(‘#group8’).hide();
$w(‘#group9’).show();
break ;
case “button22”:
toSave.m2 = “100-200m2”;
$w(‘#group8’).hide();
$w(‘#group9’).show();
break ;
case “button23”:
toSave.m2 = “+200m2”;
$w(‘#group8’).hide();
$w(‘#group9’).show();
break ;
}
})

$w(“#button24”).onClick(event => {
toSave.nom = $w(“#input1”).value;
toSave.prenom = $w(“#input2”).value;
toSave.cp = $w(“#input5”).value;
toSave.tel = $w(“#input6”).value;

let subject = Nouveau lead : ${$w("#input1").value};
let body = Informations du lead : Nom : ${$w("#input1").value} Prénom : ${$w("#input2").value} Code postal : ${$w("#input5").value} Téléphone : ${$w("#input6").value};

console.log(“save”, toSave)
wixData.save(“OneClickForm”, toSave)
.then( (results) => {
let item = results; //see item below
console.log(“res”, results)
} )
.then(() => sendEmail(subject, body))
.then(() => wixLocation.to(“/formulaire-valide”));
})
})

J.D · January 28, 2020, 4:52pm

@info29590 ,

Check the collection permission. Make sure anyone can write and update it.
Sync the live collection with the sandbox to make sure the live collection scheme is fine.

info29590 · January 28, 2020, 5:12pm

@jonatandor35 Thanks for your reply.

Permissions are all set in order that anyone can read, write and update it.
I’ve sync the collection by replacing all elements from Sandbox by Live collection elements (Live => Sandbox) but I still can’t click on the Submit button when live testing…

info29590 · January 28, 2020, 5:21pm

@jonatandor35 Not sure if it can help but I created 2 forms on the website:

The first one (with submit button issue) at the following link: https://www.bhenv.fr/isolation
The second one at the following link: https://www.bhenv.fr/demande-isolation

The second one is working fine both on preview mode and on live website.

Here is its code (maybe it creates some conflicts with the first form and I shoul create different database board?):

import wixCRM from 'wix-crm';
import wixLocation from 'wix-location';
import wixData from 'wix-data';
import wixUsers from 'wix-users';
import {sendEmail} from 'backend/email';

let userId = wixUsers.currentUser.id;
$w.onReady(() => {
let toSave = {_id: userId};
$w("#button3, #button4").onClick(event => {
switch(event.target.id){
case "button3":
toSave.maisonIndividuelle = "oui";
$w('#group4').hide();
$w('#group9').show();
break;
}

$w("#dataset1").onAfterSave(sendFormData);
});
//email notification
function sendFormData() {
const subject = `Nouveau lead : ${$w("#input1").value}`;
const body = `Informations du lead :
Nom : ${$w("#input1").value}
Prénom : ${$w("#input2").value}
Code postal : ${$w("#input5").value}
Téléphone : ${$w("#input6").value}`;

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

Topic		Replies	Views
How to add text with a button without a dataset? Ask the community code , wix , wix-members-area	0	10	July 20, 2024
connect a dropdown list to a dataset Ask the community code , wix-forms , question	4	2625	April 24, 2020
How to add data to a dataset with a button Ask the community code , question	0	367	October 23, 2020
How to I create and image button connected to dataset? Ask the community wix-studio , code , wix , design , question	3	37	December 3, 2024
User input-->>drop menu-->>submit button Ask the community code , question	7	685	May 20, 2019

Connect button text with dataset

Related topics