Autofill a from inside a lightbox from a form in the main page

Ask the community
, ,
1

Question:
[I have a table with some filters on the top; I have a “submit search” btn that when clicked it opens up a lightbox and in that lightbox there is a form, I want that form to be auto filled by the first page selections.]

Product:
Wix Studio

What are you trying to achieve:
when user uses filters and clicks button it will open up lightbox and autofill those dropdowns

What have you already tried:
$w(‘#submitSearch’).onClick(() => {

    const data = {
        tier: $w('#dropdown5').value,
        region: $w('#dropdown6').value,
        state: $w('#dropdown1').value,
        capRate: $w('#dropdown4').value,
        occupancy: $w('#dropdown8').value,
        configuration: $w('#dropdown7').value
    };

     wixWindow.openLightbox('YourLightboxName', data)
        .then(() => {
            console.log('Lightbox opened successfully with data:', data);
        })
        .catch((error) => {
            console.error('Error opening lightbox:', error);
        });
});

});
------------------------ inside of Lightbox
import wixWindow from ‘wix-window’;

$w.onReady(function () {
// Retrieve the data passed from the main page
const receivedData = wixWindow.lightbox.getContext();
console.log(‘Received data in lightbox:’, receivedData);

// Populate form fields based on received data
if (receivedData.tier) {
    $w('#tierDrop').value = receivedData.tier;
}
if (receivedData.region) {
    $w('#regionDrop').value = receivedData.region;
}
if (receivedData.state) {
    $w('#stateDrop').value = receivedData.state;
}
if (receivedData.capRate) {
    $w('#capRate').value = receivedData.capRate;
}
if (receivedData.occupancy) {
    $w('#occDrop').value = receivedData.occupancy;
}
if (receivedData.configuration) {
    $w('#configDrop').value = receivedData.configuration;
}

// Log to verify values are set
console.log('Values set in lightbox:', {
    tier: $w('#tierDrop').value,
    region: $w('#regionDrop').value,
    state: $w('#stateDrop').value,
    capRate: $w('#capRate').value,
    occupancy: $w('#occDrop').value,
    configuration: $w('#configDrop').value
});

});

2

First thing I would check is whether the Lightbox is receiving the data you are intending to autofill the form with.

console.log(‘Received data in lightbox:’, receivedData);

Does this line return the expected data?

I also noticed you added a “Drop” suffix to the element id names within the Lightbox. Does that mean these are Dropdown elements?

If so, I would check to make sure the sure the choices have the exact label/value being passed from the page.

2 Likes
3

Thank you , I forgot to update the feed.
I ended up using another route instead, by collecting the info before the lightbox opens up.

1 Like