Does anyone no how to have a button on a Lightbox close the Lightbox after user input is submitted? I created a Lightbox, added a user input field for email and a button to submit that email to my collection. However I need the button to close the Lightbox right after.
I added this code to my Lightbox page but it closes the light box without submitting the data entered by the user into my collection first.
import wixWindow from ‘wix-window’;
$w.onReady(function () {
});
export function button10_click() {
wixWindow.lightbox.close(‘New Subscribe-Styves’);
}
How can I get it to submit the data first before closing the lightbox or simultaneously, it doesn’t matter.
Hi, i’m experiencing a very similar issue and the solution to this problem could probably solve mine as well.
I am wondering the same thing. I have a client who would like to collect user information such as name, email, and phone number, before they can view any properties on their real estate website.
The lightbox pops up as soon as the user gets to the web page with properties. I would like the lightbox to close once the information has been submitted.
Currently I have:
import wixWindow from ‘wix-window’;
$w.onReady(function () {
});
export function button7_click() {
wixWindow.lightbox.close(“#lightbox1”);
}
But this only closes the lightbox and doesn’t send the info submitted to my database collection. I am assuming this needs some send/receive data coding:
Hi everyone,
this feature requires using only code (without setting the button to submit using the editor).
The code for closing the lightbox should be placed in the lightbox code page.
Here is a sample code of how a function for submitting data and closing the lightbox:
import wixData from 'wix-data';
import wixWindow from 'wix-window';
function yourButton_click(event, $w) {
const toInsert = {
email: $w('#emailInputField').value,
name: $w('#emailInputField').value
}
wixData.insert('YourDatabaseCollection', toInsert)
.then(() => {
wixWindow.lightbox.close();
});
}
Good luck!
Roi.
Thanks Roi,
Can I read that data immediately after close the lightbox?
How can I show that “name” in the page after close the lightbox?
EX.: $w('#hi).text = "helo " + MYITEM.name “!”;
Hi,
You can close the lightbox with an object.
Then you can receive the data once it’s closed.
For more information:
Good luck!
Roi.
I Have use this code and it works perfectly fine. Now how can I make the email field mandatory?
Because user can close the light box without adding the data
Just make sure that on the user input that you are using for the email field that the toggle for required is set to on.
@givemeawhisky The required option is already on but then too you can close the lightbox without adding details on the user input element
Then put on the lightbox that email must be filled in and make sure that the ‘X Icon’ and ‘Close button’ are turned off in your ‘How does your lightbox close?’ settings, plus disable it in your overlay settings too so that visitors cannot click the overlay to close the lightbox.
Or simply take off the ‘X icon’ and disable overlay, then in your page code for the lightbox disable the close button until the email field has been filled in or require the user to tick a checkbox for example to say they have filled in their email which then lets the close button be used. This extra field can be added to the same dataset that you are using for the email addresses.
@givemeawhisky Thank you so much for the suggestion I have tried all these method which have said but again I am able to close the lightbox
Hi Roi, I have copied this code exactly and changed the names of the input elements to match the field keys in my collection then assigned my two elements. This code does enable me to enter data into the lightbox which is great but it still will not save the data on close to my collection. which isn’t good. Can you provide further clear instruction please?