Accessing input elements on another page

Ask the community
,
1

I have a page with several text inputs that are linked to a collection via a dataset. On the same page is a button that brings up a lightbox that features more text inputs and a Submit button. The lightbox text inputs are linked to the same collection as the initiating page via a dataset. The collection is of the Form Submission type.

My question is how do I go about grabbing the inputs from the initiating page so I can save them to the collection along with the inputs from the lightbox? At present only the lightbox text inputs are being saved to the collection when I press the Submit button.

I think what I need to do is write code in the lightbox page to grab the value of the inputs on the initiating page, but I do not know how to reference elements on another page - up till now I have only dealt with elements on the same page, ie:

$w('myButton')

Can someone please point me in the right direction?

2

Hey there :raised_hand_with_fingers_splayed:

The best way is to collect all the values from the fields in your lightbox, then pass them back to the page where you opened the lightbox from, we do so by using returning the data from the lightbox when we close it.

Close Window API

Here’s a simple scenario: You have a checkout screen that has your name, shipping address and other info, and you have a button where you can click on it to open a lightbox and collect a card details or select saved ones to use it in the checkout, then return the entered card or the saved card to the checkout to complete the payment.

// The checkout page:
import wixWindow from 'wix-window';

// Add/Choose a card button
$w('#button').onClick(() => {
    // This will open the lightbox
    wixWindow.openLighbox('Select Card').then(card => {
        // This code block will run after closing the lighbox by code
        // card is the details returned from the lighbox;
        
        // Now place the card details in input fields:
        $w('#cardHolderName').value = card.holdername;
        $w('#cardNumber').value = card.number;
        $w('#cem').value = card.expiryMonth;
        $w('#cey').value = card.expiryYear;
        $w('#zip').value = card.zip;
    })
})

// Lighbox: Select Card
import wixWindow from 'wix-window';

// The submit button saves the form to the dataset and returns the values
$w('submit').onClick(() => {
    // Submit the values
    $w('#dataset').save().then(() => {
        // Collect the data to return them;
        const card = {
            holdername: $w('#cardHolderName').value,
            number: $w('#cardNumber').value,
            expiryMonth:  $w('#cem').value,
            expiryYear: $w('#cey').value,
            zip: $w('#zip').value
        }
        
        // close the lightbox with the card details
        wixWindow.lightbox.close(card);
    })
})

This example will demonstrate how to collect fields values from a lightbox and use them on the page where you you first open the lightbox.

Please note:

  1. If you close the lightbox with the “X” icon or with the “close” button, or any other method, no details will be returned, so make sure you disable these methods including closing the lightbox by clicking outside.

  2. You need to open the lightbox by code to be able to use the returned data.

Hope this helps~!
Ahmad

3

Thank you very much Ahmad! Your answer has introduced me to Wix methods that I did not know existed. I now have working code based on your approach, which is awesome.

Just FYI the last line of your lightbox code should read:

        // close the lightbox with the card details
        wixWindow.lightbox.close(card);
4

@rodneyelliott glad that my answer helped, and thank you for the note :wink: I write the code manually, so it was a typo, I forgot it :man_facepalming: