How to execute a velo code *after* submit button is *successful*

Ask the community
, , ,
1

Question:
How to ensure that a velo code is only executed in the event when a submit button is successful (ie all mandatory fields are filled by the site visitor) - this is for input fields connected to a CMS.

Product:
Wix Studio

What are you trying to achieve:
I have “built” a “form”, that is actually a set of input fields connecting to a CMS (so, not a classic “form”, but enabled through CMS). It includes a submit button that puts all the input data into a CMS. There are some fields that are set to required inputs, such as obvious ones like ‘name’ and ‘email address’ etc.
(the submit button is defined through "click actions connects to ‘submit’, and a success message is being displayed)
All this is working well and as intended.

Then, I have added a velo code that is executed once the submit button is clicked (see below how it is implemented ). The aim of the code is to send an email to the site visitor [‘triggeredEmails’] and some additional features such as opening a lightbox [wixWindowFrontend.openLightbox(…)] etc
Basically, the code itself is running well, too!

However, the velo code is being executed at all circumstances when the submit button in clicked, even if some mandatory inputs are have not been done by the visitor.

The code starts with:
$w.onReady(function () {
$w(“#submit-button”).onClick(() => {
…
…
});

I do understand that the code is executed, as there is no “check” if the all the required fields are filled by the site visitor.

Finally, what I want to achieve:
So, I’d like to ensure that the code is only executed once the submit button is successful (or in other words: when the success message is being showed up, not for the “failure” message).

I am wonderig how to implement this - is it something that can be realized through/in the code or even straight in the editor?
Perhaps I can somehow implment an another query to check the visibilty of the success message (that is another text element with an ID)
Any ideas are more than welcome!

What have you already tried:

  • Fields are implemented and well connected to CMS, submit button in place
  • Code is executed when clicked
2

i’d remove the onclick and instead check for succesful submission

maybe something like this

$w.onReady(function () {
    // Select your dataset, assuming it is named "myDataset"
    const dataset = $w("#myDataset");

    // Triggered when the dataset's data is successfully saved
    dataset.onAfterSave(() => {
        // Your custom code that should run only on successful submit
        sendEmailAndOpenLightbox();
    });

    // Triggered when there is an error during save
    dataset.onError((error) => {
        console.error("Failed to save data:", error.message);
        // You can also display an error message to the user here if needed
    });
});

// Define your custom function for sending an email and opening a lightbox
function sendEmailAndOpenLightbox() {
    // Example: Sending triggered email
    wixCrm.emailContact('TRIGGERED_EMAIL_ID', {
        variables: {
            // Add variables as needed
            firstName: $w('#inputFirstName').value,
            email: $w('#inputEmail').value
        }
    }).then(() => {
        console.log('Email sent successfully');
    }).catch((error) => {
        console.error('Error sending email:', error);
    });

    // Example: Opening a lightbox
    wixWindow.openLightbox('LightboxName');
}
3

Dear Dan,

thank you very much for your prompt reply and support on this.
Indeed, this looks as a very promising way to do it.

In fact, I was not aware that I have straight access to the dataset in velo (“#myDatset”) - as I have wrongly assumed that any $w(“#…”) function is meant for elements that are “actively” positioned in the editor. I have found the dataset ID in the inspector CMS connections → dataset settings → Dataset ID.

Now, I have just tried out your suggestion.

Yeah, it is working well:
On the published site, the triggered email and open.lightbox functions are only executed when the submit button is pushed and all required fields are filled (as intented).

However, just one remark & question:
it seems that your error message code line is not working:
dataset.onError((error) => {
console.error(“Failed to save data:”, error.message);
});
→ as error is a string type.

I have checked the content (value) of “error” when the req’ fields are not filled. In this case, the value is “save”.

Now, when I run the code in the “preview mode” (not published site), in the case of “not allreq’ fields are filled”, there are red error warnings popping-up in the developer console:
"UserError: datasetApi ‘save’ operation failed
Caused by DatasetError: Some of the elements validation failed
Failed to save data: save"
[last line is coming from code " console.error(“Failed to save data:”, error);"]

So, I am wondering if this is a normal and expected procedure/behaviour (as this is something the site visitor does not see anyway), or is it beacuse of a not-optimal “error handling” ?

Sorry, this might be a stupid question - as you recoginze, I am not a velo/coding expert at all…

Thank you for your feedback and any recommendations!
Adrian