Page Code Problems for Sending Selected Checkboxes Values to SendGrid E-mail Alert

Ask the community
,
1

I’m trying to collect the information from the checkboxes present in a form and send them to my email each time it is filled, but I’m facing the following problems:

1 - When I select ALL the checkboxes, the email that I receive from the alert is missing the values ​​referring to some of the selected boxes. The order of the values ​​sent and not sent is random.

2 - When I select SOME of the check boxes, the email that I receive from the alert is missing values ​​referring to some of the selected boxes. The order of the values ​​sent and not sent is random.

I’ve followed the following steps to create the form and set up the page codes:

1 - I created the form on my website and configured the email notifications through SendGrid following this tutorial: https://www.youtube.com/watch?v=bPd7o7hUfGk&t=0s&index=6&list=PL9c-QNCP6mK3_0G4pmbgfEMzVGKkgmUMU

2 - I connected all the check boxes to their respective items in the Database

3 - Activated the “onClick” function of all the check boxes.

4 - I added the page codes to configure the values ​​for each of the check boxes and the events that will happen each time one of them is selected following this tutorial: https://www.youtube.com/watch?v=kc1YBFG2tXA&feature=youtu . be

Below are the code prints and the form print.

702×671 61.2 KB

598×1017 80.3 KB

1596×557 90.6 KB

400×915 31.8 KB

The line that I’m having this problems is:

\ rServices: $ {$ w (“# textBox1”). value} + $ {$ w (“# checkbox2”). value} + $ {$ w (“# checkbox3” “# checkbox4”). value} + $ {$ w (“# checkbox5”). value} + $ {$ w (“# checkbox6”).

Any suggestions for me to be able to improve this code and have the values ​​of the checkboxes that was selected in the email I receive from SendGrid?

Thank you so much, guys!

Regards!

2

Use $w(“#checkbox1”).checked to know if a checkbox is checked or not.
read more here

3

Thanks for the reply Moshe!

On which part / line should I use this code?

Regards!

4

Hi! anywhere you used $w(" #checkbox_ id").value you should use $w(" #checkbox_ id").checked

replace " checkbox_ id" with the right id

5

Thanks again, brother. I’m going crazy with this and I do not find anywhere how to solve it. You were the only person helping me. I love you!

I did exactly what you taught: I override all $w(“#checkbox_id”).value for $w(“#checkbox_id”)

However, after completing the form selecting all the checkboxes the email I receive is written “true true true true true true true” in the respective part.

Below is the changed code for the entire page, the completed form and the email I received.

432×571 43.7 KB

531×1023 82.1 KB

1713×600 96.5 KB

388×907 23.5 KB

6

You’re doing it wrong…
the first part, you want to set all check boxes to be unchecked you do this:
$w(“#checkbox_id”).checked = false

then, you can delete all the checkbox click event handlers, they are not needed.
you can add all the services by going over all the check boxes, seeing if they are checked and adding the text to the email.

example:

let services = ‘’

if($w(“checkbox1”).checked)
services += “service 1”

if($w(“checkbox2”).checked)
services += “service 2”

and so forth…

7

Thank you so much again, brother!

I’m feeling dumb because now I don’t receiving the email.

What’s wrong with my code, or with me?

Here is my code following your instruction:

$w.onReady(function () {
$w(“#checkbox1”).checked = false;
$w(“#checkbox2”).checked = false;
$w(“#checkbox3”).checked = false;
$w(“#checkbox4”).checked = false;
$w(“#checkbox5”).checked = false;
$w(“#checkbox6”).checked = false;
$w(“#checkbox7”).checked = false;
});

let services = ‘’

if($w(“checkbox1”).checked)
services += “Captação de Imagens”

if($w(“checkbox2”).checked)
services += “Captação de Áudio”

if($w(“checkbox3”).checked)
services += “Iluminação LED”

if($w(“checkbox2”).checked)
services += “Imagens Aéreas”

if($w(“checkbox2”).checked)
services += “Estabilização de Imagens”

if($w(“checkbox2”).checked)
services += “Edição”

if($w(“checkbox2”).checked)
services += “Motion Graphics”

$w.onReady(function () {
//TODO: write your page related code here…

});

import { sendEmail, sendEmailWithRecipient } from ‘backend/email’;

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

function sendFormData() {
const subject = Nova Solicitação de Orçamento de ${$w("#input1").value};
const body = Nova Solicitação de Orçamento de ${$w("#input1").value} \rNome: ${$w("#input1").value} \rEmpresa: ${$w("#input4").value} \rTelefone: ${$w("#input2").value} \rEmail: ${$w("#input3").value} \rObjetivo do Vídeo: ${$w("#textBox1").value} \rReferência: ${$w("#input8").value} \rData: ${$w("#input6").value} \rLocal: ${$w("#input7").value} \rServices: ${$w("#checkbox1").checked} + ${$w("#checkbox2").checked} + ${$w("#checkbox3").checked} + ${$w("#checkbox4").checked} + ${$w("#checkbox5").checked} + ${$w("#checkbox6").checked} + ${$w("#checkbox7").checked} \rDuração aproximada do vídeo: ${$w("#dropdown1").value} \rVídeo Finalizado em: ${$w("#input5").value};
const recipient = $w(“#input3”).value;

sendEmailWithRecipient(subject, body, recipient)
.then(response => console.log(response));

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

}

8
  1. the new code should be inside the sendFormData function
  2. \rServices: ${$w(" #checkbox1 “).checked} + ${$w(” #checkbox2 “).checked} + ${$w(” #checkbox3 “).checked} + ${$w(” #checkbox4 “).checked} + ${$w(” #checkbox5 “).checked} + ${$w(” #checkbox6 “).checked} + ${$w(” #checkbox7 ").checked}

should be
\rServices: ${services}

9

My gosh, not working…

I did what you told me and now in the e-mail I received the Services part is in blank even though I select all of the check boxes in the test I did.

Is it impossible for Wix to accomplish what I want? Because I did every step you teach me.

Look at the print of the e-mail that I received bellow.

Here’s is the final page code:

$w.onReady( function () {
//TODO: write your page related code here…

});

import { sendEmail, sendEmailWithRecipient } from ‘backend/email’;

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

function sendFormData() {
const subject = Nova Solicitação de Orçamento de ${$w("#input1").value};
const body = Nova Solicitação de Orçamento de ${$w("#input1").value} \rNome: ${$w("#input1").value} \rEmpresa: ${$w("#input4").value} \rTelefone: ${$w("#input2").value} \rEmail: ${$w("#input3").value} \rObjetivo **do** Vídeo: ${$w("#textBox1").value} \rReferência: ${$w("#input8").value} \rData: ${$w("#input6").value} \rLocal: ${$w("#input7").value} \rServices: ${services} \rDuração aproximada **do** vídeo: ${$w("#dropdown1").value} \rVídeo Finalizado em: ${$w("#input5").value};
const recipient = $w(“#input3”).value;

sendEmailWithRecipient(subject, body, recipient)
.then(response => console.log(response));

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

}

$w.onReady( function () {
$w(“#checkbox1”).checked = false ;
$w(“#checkbox2”).checked = false ;
$w(“#checkbox3”).checked = false ;
$w(“#checkbox4”).checked = false ;
$w(“#checkbox5”).checked = false ;
$w(“#checkbox6”).checked = false ;
$w(“#checkbox7”).checked = false ;
});

let services = ‘’

if ($w(“checkbox1”).checked)
services += “Captação de Imagens”

if ($w(“checkbox2”).checked)
services += “Captação de Áudio”

if ($w(“checkbox3”).checked)
services += “Iluminação LED”

if ($w(“checkbox4”).checked)
services += “Imagens Aéreas”

if ($w(“checkbox5”).checked)
services += “Estabilização de Imagens”

if ($w(“checkbox6”).checked)
services += “Edição”

if ($w(“checkbox7”).checked)
services += “Motion Graphics”

10

Any suggestions, Moshe?

11

you placed the services clause in the wrong position…
this is how it should look


function sendFormData() {  
  const subject = `Nova Solicitação de Orçamento de ${$w("#input1").value}`;  
  
  let services = ''
  if($w("checkbox1").checked)   
    services += "Captação de Imagens"  
  if($w("checkbox2").checked)   
    services += "Captação de Áudio"  
  if($w("checkbox3").checked)   
    services += "Iluminação LED"  
  if($w("checkbox4").checked)   
    services += "Imagens Aéreas"  
  if($w("checkbox5").checked)   
    services += "Estabilização de Imagens"  
  if($w("checkbox6").checked)   
    services += "Edição"  
  if($w("checkbox7").checked)   
    services += "Motion Graphics" 
  
  const body = `Nova Solicitação de Orçamento de ${$w("#input1").value}     
  \rNome: ${$w("#input1").value}     \rEmpresa: ${$w("#input4").value}     
  \rTelefone: ${$w("#input2").value}     \rEmail: ${$w("#input3").value}     
  \rObjetivo do Vídeo: ${$w("#textBox1").value}     
  \rReferência: ${$w("#input8").value}     
  \rData: ${$w("#input6").value}     
  \rLocal: ${$w("#input7").value}     
  \rServices: ${services}     
  \rDuração aproximada do vídeo: ${$w("#dropdown1").value}     
  \rVídeo Finalizado em: ${$w("#input5").value}`;  
  
  const recipient = $w("#input3").value;     
  sendEmailWithRecipient(subject, body, recipient)         
    .then(response => console.log(response));
     
  sendEmail(subject, body)         
    .then(response => console.log(response));
}
12

I did and now, after selecting all the boxes, the email I receive in the “Services” section does not come with any information.

Below is the new code and the test prints I made (Form Filled and E-mail Received).

$w.onReady( function () {
$w(“#checkbox1”).checked = false ;
$w(“#checkbox2”).checked = false ;
$w(“#checkbox3”).checked = false ;
$w(“#checkbox4”).checked = false ;
$w(“#checkbox5”).checked = false ;
$w(“#checkbox6”).checked = false ;
$w(“#checkbox7”).checked = false ;
});

$w.onReady( function () {
//TODO: write your page related code here…

});

import { sendEmail, sendEmailWithRecipient } from ‘backend/email’;

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

function sendFormData() {
const subject = Nova Solicitação de Orçamento de ${$w("#input1").value};

let services = ‘’
if ($w(“checkbox1”).checked)
services += “Captação de Imagens”
if ($w(“checkbox2”).checked)
services += “Captação de Áudio”
if ($w(“checkbox3”).checked)
services += “Iluminação LED”
if ($w(“checkbox4”).checked)
services += “Imagens Aéreas”
if ($w(“checkbox5”).checked)
services += “Estabilização de Imagens”
if ($w(“checkbox6”).checked)
services += “Edição”
if ($w(“checkbox7”).checked)
services += “Motion Graphics”

const body = Nova Solicitação de Orçamento de ${$w("#input1").value} \rNome: ${$w("#input1").value} \rEmpresa: ${$w("#input4").value} \rTelefone: ${$w("#input2").value} \rEmail: ${$w("#input3").value} \rObjetivo **do** Vídeo: ${$w("#textBox1").value} \rReferência: ${$w("#input8").value} \rData: ${$w("#input6").value} \rLocal: ${$w("#input7").value} \rServiços: ${services} \rDuração aproximada **do** vídeo: ${$w("#dropdown1").value} \rVídeo Finalizado em: ${$w("#input5").value};
const recipient = $w(“#input3”).value;

sendEmailWithRecipient(subject, body, recipient)
.then(response => console.log(response));

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

}

404×912 29.2 KB

13

please provide a link to your website, this should work.

14

Here is the page with the form https://www.ranierefigueiredo.com/solicitacao-de-orcamento-2

15

The element names are wrong! You need to use $(‘#checkbox1’) not $w(‘checkbox1’) - note how the color of the element name changes when you have it right. Add the missing # and all should be well :wink:

16

what stcroppe said should resolve the issue. add “#” to all checkbox selectors

17

Worked perfectly!

Thank you so much guys! Really, thank you very much to both of you!

Regards!