Sending Data to a Form inside a Lightbox

Ask the community
,
1

I have a lightbox (#lightbox1) which has a email form inside it. One of the fields inside the form is an item name which the email would be about. I want this field to be filled in automatically based on which button on the page I clicked on to open the lightbox. How can I achieve this?

I tried the following code, but it doesn’t work with the form fields:

export function button3_click(event, $w) {
	const data = {
		Equipment Name: 'Item name',
		Details: '123'
	};
	wixWindow.openLightbox('#lightbox1', data).then(dataBack => {
		console.log(dataBack);
		console.log('Bye!');
	})
}

Equipment Name is the name of the field inside the contact form. This code doesn’t open the lightbox either. Any help would be appreciated. Thanks

2

Looks to me like you’re using the lightbox ID instead of its name. That should solve the problem of the lightbox not opening. Once you get that working, let us know if you’re still having problems sending information between the lightbox and the page.

3

The lightbox still won’t open. Does it have anything to do with the fact that the buttons are inside a repeater element. If I change the ID of one button, they all change. How can I write code to distinguish which button is pressed?

Here is the updated code:

export function repeaterButton2_click(event, $w) {
	const data = {
		"Item Name": 'Hello world',
		"Details": 'Text'
	};
	wixWindow.openLightbox('SideBox', data).then(dataBack => {
		console.log(dataBack);
		console.log('Bye!');
	});
}

Thank again.

4

Have you solved this issue? I want to do the same!

5

Please let me know.

6

Unfortunately No, still trying. It’s a little difficult when you’re using a language exclusive to Wix.

Anyone with WixCode knowledge, would appreciate the help.

7

Hi there,
Did you solve this problem?

8

Hey,
Yes, my problem is solved. You could check it here: https://www.imperialnews.com/rumor-mill

I will make new post on it and give link.

9

Hi Siyn U,

Do you still need an assistance with the issue above?

Best Regards.
Dmitry

10

Did Someone solve This?

11

Did someone solve this? I am trying to do the same

12 
//in the page that will pass data to a lightbox 

import {session} from 'wix-storage';

export function button1_click(event, $w) {
session.setItem('PassingData', $w('#input1').value); //setting a data to pass, an name it as PassingData
}

// in the lightbox that will recevie data.
 
import {session} from 'wix-storage';

$w.onReady(function () {
 const Data = session.getItem('PassingData');
    $w('#hello').text = "Data";

    });
13

Thank you azevedo.bang! A couple of questions to clarify tho as I’m still quite new to coding.

In the first section, the ‘#input1’ - what does it refer to? Is it the specific field within the repeater who’s data you would like to pass on to the lightbox? So for example, I want to pass on the Title of whichever repeater element is clicked, would I replace ‘#input1’ with the ID of my title text box in the repeater? Because I tried that and it is telling me ‘‘value’ does not exist on #title’

And then for the second portion, what field does ‘#hello’ refer to? Is that the ID of input field you are trying to fill in the lightbox? Because again I tried that and it said ‘‘text’ does not exist on #input’

Thanks!!!

14

Also - I noticed that when I implemented the onClick function for the button in the repeater, it would no longer open the lightbox…

15

Hi Anna,
Feel free to paste your code here and we will try to help.
Roi.

16

Thanks Roi. So just for a bit of background, on my page I have a repeater that is hooked up to my database. The repeater has a picture, title, author, description, and a ‘request button’. I also have a search implemented of the database so that as a user types, the search automatically narrows down the items in the repeater. I got the code from the Wix Code video examples and it works flawlessly. Since I am trying to build a Lending Library I need to now add a function that when the button in the repeater is clicked, the page remembers which repeater is selected (specifically the title of the book) and then opens a Lightbox with a fillable form and auto-fills one of the inputs with that book title.

This is the code on the page. At the end the onClick function is what I implemented based on azevedo.bang suggestion. And everything before that is for the search from Wix Code examples. Input1 here is the text box that contains the title in the repeater.

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

});

import wixData from ‘wix-data’;

let debounceTimer;
export function iTitle_keyPress(event, $w) {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w(‘#iTitle’).value);
}, 200);
}

let lastFilterTitle
function filter(title) {
if (lastFilterTitle !== title) {
$w(‘#dataset1’).setFilter(wixData.filter().contains(‘title’, title));
lastFilterTitle = title;
}
}

export function buttonR_click(event, $w) {
session.setItem(‘PassingData’, $w(‘#input1’).value);
}

And this is what I have in the lightbox. Again input1 is an input box that is supposed to be automatically filled.

import {session} from ‘wix-storage’;

$w.onReady( function () {
const Data = session.getItem(‘PassingData’);
$w(‘#input1’).text = “Data”;

});

Sorry for the long explanation, I am still fairly new to Wix Coding (and coding in general).

Any help would be greatly appreciated!

17

Thank you, azevedo.bang, your example helped me a lot! There’s a small typo in your lightbox code: When setting the text for ‘#hello’ you refer to your const Data with quotes around it which results in the word “Data” being set instead of the value from the Data variable.

Here’s my working code to click a button on a page which then launches a lightbox, passes a value to it, and displays that value in a text field:

Code on the page:

import {session} from 'wix-storage';
import wixWindow from 'wix-window';

export function deleteClassmateButton_click(event) {
    session.setItem('PassDeleteClassmate', $w('#editNameInSchool').value);
    wixWindow.openLightbox("Delete Classmate Confirm");
}

  1. The button deleteClassmateButton’s onClick calls function deleteClassmateButton_click

  2. The value from text field editNameInSchool is stored into session variable PassDeleteClassmate

  3. The lightbox Delete Classmate Confirm is launched

Code on the lightbox:

import {session} from 'wix-storage';

$w.onReady(function () {
 const Name = session.getItem('PassDeleteClassmate');
    $w('#classmateName').text = Name;
});

  1. Constant variable Name is set to the data in session variable PassDeleteClassmate

  2. The value for text field classmateName is set to data in Name variable

Thanks again, happy coding!

18

Thank you all. I have a similar problem. I’d like to tie the LightBox SUBMIT button to the CUSTOMER flag, so only customers can submit comments. Can anyone point me to some examples that might help?