Connect button text with dataset

Ask the community
,
1

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.

2

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

3

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:

1039×234 17.1 KB

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

4

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);
    })
})
1 Like
5

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

6

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?

7
  1. it shouldn’t be case “#button3” but case “button3” without the #. (for all the cases.
  2. 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.
1 Like
8

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

9

You’re welcome :slight_smile:

10

@jonatandor35 One last thing please :

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

11

@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

1 Like
12

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

1120×301 38.5 KB

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?

1115×301 29.7 KB

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

Thanks again for your help.

13

@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?

14

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

  1. Check the collection permissions and make sure they are ok.
  2. Make sure the “submit” button is not connected to the dataset via the editor. Save everything using code.
  3. 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?
15

@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)

  1. Here are the permissions:

467×605 31.5 KB

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

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

How could I do differently?

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

@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.

17

@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.

18

@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"));
//.....
19

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

20

@jonatandor35