Question

Modal Window Questions - capture text? in a table?

Forms Version 11 Self-Hosted Forms Layout Designer

Updated 4 hours ago

asked one day ago • Show version history

Using: LF Forms 11 Update 5, Modern Designer, self-hosted

I've been wrestling with the JS that @████████ shared with us at Empower2025 in the Advanced JS course. I have a couple questions about that.

I can get the modal window to open and blur the background. It's just so cool ha ha. I am trying to get a text field in the modal window to populate a hidden field. Is this even possible? I can get the textarea to show in the modal window, but can't capture the text in it. Any suggestions on how to do that? It all exists in the temporary html of the modal window so the LFForm functions are not effective.

I have tried the section method as well, but let me share where I am trying to get to with this. I have a very busy dynamic timesheet that can vary the number of columns. Some users will have a very little space available on the table. Stakeholders now require a comment field per day. I thought of the modal window as a great way to capture a comment and only require space for a small button in the table.

Is it even possible to have a modal window per row of a table? I have thrown several hours trying to capture the index of the button onClick to no avail.

So here I am asking the community for a hand :)

Cheers friends, and thanks in advance as always.

0 0

Replies

replied one day ago

Glad to hear you're using my modal component! You can definitely accomplish what you need with the section modal. Here's what you would do:

add a section outside of the table with the fields you want to include in the modal
add the lf-modal class required to the section
in JS initialize the modal on the section by field id
put an "Add comment" button in each row
1. in JS define a function on the window "window.openModal = . . ." that shows the modal with modal.show()
2. in the button custom html add the "onclick=openModal()"
At this point testing the form should show the modal when you click the "Add comment" button and hides when you click "ok" in the modal
The tricky part is determining the row number of the button being clicked. The easiest way to do this is to listen to an onchange event on any column of the table and recreate the button with JS to pass the row number in the "onclick=openModal(1)"
now in your openModal function you can take the row number and use the LFForm object to copy any values you need to the section modal
Now all that is left is the inverse, register an on close event that takes the values from the section and copies it back to the row of the table that opened the modal

1 0

replied 4 hours ago

Thanks so much! I'm working through all this. First change was to use a checkbox instead of a button to detect the onChange event. I am successfully getting the index! I'm just wiring in the other details now.

0 0

You are not allowed to follow up in this post.

Question

Question

Modal Window Questions - capture text? in a table?

Replies

Sign in to reply to this post.