Connect button text with dataset

info29590 · January 22, 2020, 2:15pm

Hi!

I am designing a multi-steps form on Wix.
On the first five questions the visitor does not need to type any information, he/she just has to click the correct information and it moves automatically to the next question.
I cannot find how to connect the clicked button text with my dataset.

For example: First question is “Do you own your house?”
2 option buttons : “Yes” or “No”
If the visitor clicks on “Yes” I would like that “Yes” shows up in my dataset board.

Thanks for your help.

J.D · January 22, 2020, 2:40pm

The question is not clear. What is “dataset board”? Maybe you can add screenshots with the desired flow.

info29590 · January 22, 2020, 2:56pm

Thanks for stopping by.
You can see the form at the following address: https://www.bhenv.fr/form-test

Dataset board is the database board where the form inputs are saved after submission:

For example, in the"Maison individuelle" column I would like the information chosen by the visitor at this step “Oui” or “Non” to appear.

When the customer clicks on “Yes” it then goes to the next question and here again I would like the information chosen by the visitor to appear in the second colum of database board.

I hope it is clearer.

Thanks

J.D · January 22, 2020, 3:27pm

Do you want to submit all the answers together to the collection?
Then you can do something like:

import wixData from 'wix-data';
import wixUsers from 'wix-users';
let userId = wixUsers.currentUser.id;
$w.onReady(() => {
    let toSave = {_id: userId};
    $w("#ouiButton, #nonButton, #mongarageButton,  /*etc... all buttons*/").onClick(event => {
    switch(event.target.id){
        case "ouiButton":
            toSave.maisonIndividuelle = "oui";
            break;
        case "nonButton":
            toSave.maisonIndividuelle = "non";
            break;
        case "mongarageButton":
            toSave.anotherFieldKey = "Mon garage";
            break;
            }
    })
    $w("#submitButton").onClick(event => {
        wixData.save("Collection Name", toSave);
    })
})

J.D · January 22, 2020, 3:29pm

P.S. maybe someone can give you a simpler solution.

info29590 · January 22, 2020, 3:51pm

Thanks a lot. Yes I want to connect all the answers to the appropriate collection columns.

I just gave it a try (with only buttons #3 #4 & #5) and the datas still not show up in the collection board…

Maybe I am doing something wrong?

J.D · January 22, 2020, 4:10pm

it shouldn’t be case “#button3” but case “button3” without the #. (for all the cases.
It was only an example, meaning you should make adjustments for your case.
For example, you should replace the “anotherFieldKey” and use your actual field key (attention: field key, not field name).
Also I used the userId as the record _id , maybe you built your collection differently.
You should add more buttons the the onClick() selector and to the switch cases if needed.

info29590 · January 22, 2020, 4:17pm

Thanks a lot! It is working with Buttons 3, 4 & 5!
Going to add the other buttons and it should be just fine.

J.D · January 22, 2020, 4:19pm

You’re welcome

info29590 · January 22, 2020, 4:37pm

@jonatandor35 One last thing please :

Do you know how I can insert the button values in the form sent by email when visitor submitted?

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

@info29590 I use a 3rd party to send emails, but you can use Wix Triggered Emails, I believe someone who uses them here can advise.
You can also read this:
https://support.wix.com/en/article/creating-a-triggered-email

info29590 · January 22, 2020, 4:54pm

@jonatandor35 Another weird thing is that it is working on Sandbox but not on Live version…

On sandbox version the clicked datas are now showing up but the inputs datas are on a different row? Do you think it’s because of a browser cache issue?

On Live version the clicked datas are not showing up while I have published with the updates.

Thanks again for your help.

info29590 · January 22, 2020, 5:02pm

@jonatandor35 I’m using SendGrid as third party. I tried to add:
${$w(“#button3”).value}
${$w(“#button4”).value}
but it’s not working as there is not any value attached to it.

Is there anyway I could import all the datas to the email?

J.D · January 22, 2020, 5:06pm

@info29590 I’m not sure i got you, but first:

Check the collection permissions and make sure they are ok.
Make sure the “submit” button is not connected to the dataset via the editor. Save everything using code.
I use SendGrid as well. But I use it completely differently. Have you installed the SendGrid npm ? Are you calling SendGrid from your back end?

info29590 · January 22, 2020, 5:20pm

@jonatandor35 On sandbox, when I am running a test and submit a form, the datas are separated on 2 lines : 1 with the clicked datas and 1 with the input datas (Name, First Name, Phone)

Here are the permissions:

Administrateur = Admin
Tout le monde = Everybody can create content for the collection

The submit button is indeed connected to the dataset via the editor:

How could I do differently?

Yes I’m calling SendGrid from the backend with API Key.

J.D · January 22, 2020, 5:42pm

@info29590 as I said, the code I posted above will work as intended only if it’s not connected via the editor (otherwise it’ll submit twice with different contents).
You can either disconnect the form from the dataset, and use my code to submit all the data or use different code to submit it via the dataset.

As for sendGrid, I’m not sure how exactly you set it, but one way to do it is like:

//top of the page:
import sendEmail from 'backend/<your module>.jsw';
        ///code... until this line:
$w("#submitButton").onClick(event => {
        let emailEmailData = {info1: toSave.maisonIndividuelle, info2: /*etc..*/}
        wixData.save("Collection Name", toSave)
        .then(() => sendEmail(data));
    })

and use the data on the sendGrid backend function.

info29590 · January 22, 2020, 5:59pm

@jonatandor35 Thanks for your help. I am going to give it a try.

Regarding the submit button, when it is clicked it links to my website “thank you” page.
How is it supposed to send the datas if disconnected from database?

I don’t understand very well how this button is supposed to be rightly set.

J.D · January 22, 2020, 6:07pm

@info29590

//top of the code:
import wixLocation from 'wix-location';
//code...
//...code...
wixData.save("CollectionName", toSave)
        .then(() => sendEmail(data))
        .then(() => wixLocation.to("/thank-you-page-path"));
//.....

info29590 · January 23, 2020, 8:57am

The datas are still not showing correctly in the database board and the email I’m receiving after submission are now empty while before I had Name, First, Phone and PostCode that showed up.

Here is the full code I have if it’s better for you to see where I get wrong:

Thanks a lot for your help.

Frontend code:

import wixCRM from ‘wix-crm’;
import {sendEmail} from ‘backend/email’;
import wixLocation from ‘wix-location’;
// For full API documentation, including code examples, visit Velo API Reference - Wix.com
$w.onReady( function () {
//TODO: write your page related code here…
});
export function button3_click(event) {
$w(‘#group4’).hide();
$w(‘#group5’).show();
}
export function button5_click(event) {
$w(‘#group5’).hide();
$w(‘#group6’).show();
}
export function button6_click(event) {
$w(‘#group5’).hide();
$w(‘#group6’).show();
}
export function button7_click(event) {
$w(‘#group5’).hide();
$w(‘#group6’).show();
}
export function button8_click(event) {
$w(‘#group5’).hide();
$w(‘#group6’).show();
}
export function button9_click(event) {
$w(‘#group6’).hide();
$w(‘#group7’).show();
}
export function button10_click(event) {
$w(‘#group6’).hide();
$w(‘#group7’).show();
}
export function button11_click(event) {
$w(‘#group6’).hide();
$w(‘#group7’).show();
}
export function button12_click(event) {
$w(‘#group6’).hide();
$w(‘#group7’).show();
}
export function button13_click(event) {
$w(‘#group6’).hide();
$w(‘#group7’).show();
}
export function button14_click(event) {
$w(‘#group7’).hide();
$w(‘#group8’).show();
}
export function button15_click(event) {
$w(‘#group7’).hide();
$w(‘#group8’).show();
}
export function button16_click(event) {
$w(‘#group7’).hide();
$w(‘#group8’).show();
}
export function button17_click(event) {
$w(‘#group7’).hide();
$w(‘#group8’).show();
}
export function button18_click(event) {
$w(‘#group7’).hide();
$w(‘#group8’).show();
}
export function button19_click(event) {
$w(‘#group7’).hide();
$w(‘#group8’).show();
}
export function button20_click(event) {
$w(‘#group8’).hide();
$w(‘#group9’).show();
}
export function button21_click(event) {
$w(‘#group8’).hide();
$w(‘#group9’).show();
}
export function button22_click(event) {
$w(‘#group8’).hide();
$w(‘#group9’).show();
}
export function button23_click(event) {
$w(‘#group8’).hide();
$w(‘#group9’).show();
}
//Enregistrement des données boutons cliquées
import wixData from ‘wix-data’;
import wixUsers from ‘wix-users’;
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”;
break ;
case “button4”:
toSave.maisonIndividuelle = “non”;
break ;
case “button5”:
toSave.pieceAIsoler = “Combles et grenier”;
break ;
case “button6”:
toSave.pieceAIsoler = “Sous-sol et cave”;
break ;
case “button7”:
toSave.pieceAIsoler = “Garage”;
break ;
case “button8”:
toSave.pieceAIsoler = “Toute ma maison”;
break ;
case “button9”:
toSave.foyer = “1”;
break ;
case “button10”:
toSave.foyer = “2”;
break ;
case “button11”:
toSave.foyer = “3”;
break ;
case “button12”:
toSave.foyer = “4”;
break ;
case “button13”:
toSave.foyer = “5 et +”;
break ;
case “button14”:
toSave.revenuAnnuel = “- de 19 074€”;
break ;
case “button15”:
toSave.revenuAnnuel = “19 074€-27 896€”;
break ;
case “button16”:
toSave.revenuAnnuel = “27 896€-33 547€”;
break ;
case “button17”:
toSave.revenuAnnuel = “33 547€-39 192€”;
break ;
case “button18”:
toSave.revenuAnnuel = “39 192€-44 860”;
break ;
case “button19”:
toSave.revenuAnnuel = “+ de 44 860€”;
break ;
case “button20”:
toSave.m2 = “-50m2”;
break ;
case “button21”:
toSave.m2 = “50-100m2”;
break ;
case “button22”:
toSave.m2 = “100-200m2”;
break ;
case “button23”:
toSave.m2 = “+200m2”;
break ;
}
})
$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”));
})
})
$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));
}

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

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());
}

info29590 · January 23, 2020, 9:34am

@jonatandor35

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