Then respond to /bookings/23/calendar with HTML like this:
<main>\n <div class=\"calendar\">\n <h1>July 2025</h1>\n <button up-accept='\"2025-07-01 09:00\"'>2025-07-01 09:00</button>\n <button up-accept='\"2025-07-01 10:00\"'>2025-07-01 10:00</button>\n <button up-accept='\"2025-07-01 11:00\"'>2025-07-01 11:00</button>\n </div>\n\n <a href=\"/bookings/23/calendar?month=2025-06\">Previous month</a>\n <a href=\"/bookings/23/calendar?month=2025-08\">Next month</a>\n</main>The attribute value for [up-accept] is a JSON string with the selected time slot.
The links to other months will navigate within the overlay.
","upvoteCount":1,"url":"https://github.com/unpoly/unpoly/discussions/761#discussioncomment-13630240"}}}
Fill a form field value based on a clicked item in a new layer
#761
-
|
I have a form and i want to be able to select an appointment from a set of available time slots in a multi-week schedule (this is for scheduling a patient appointment in a medical application) I don't want to use a basic But I currently don't know how to do that nicely with unpoly. Especially transferring the selected value to update the original form. What is the recommended way to make that work? I can write my own JavaScript to do that but I want to use unpoly's cool features as much as possible. Thanks! |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 1 reply
-
|
I've just did something like it (except it was to select Seaport in a autocomplete list of seaport names). Take a look at I found the inspiration from the Unpoly Demo (specifically the New Project - Suggest Name feature). Worked like a charm. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks a lot for taking the time to link all relevant code sections! Very much appreciated. 🫶 I sometimes think @triskweline are some sort of AGI who understood fully what we needed, and now the rest of us are trying to unravel their thought process, discovering new unpoly functionalities every day. |
Beta Was this translation helpful? Give feedback.
-
|
Yes, the demo is full of examples where an overlay needs to communicate a selection back to the parent layer. A minimal solution could look something like this, starting with the form: <form action="/bookings/23/book" method="post">
<input type="text" name="slot" readonly>
<a href="/bookings/23/calendar" up-layer="new" up-on-accepted="this.previousSiblingElement = value">
Pick a slot
</a>
</form>Then respond to <main>
<div class="calendar">
<h1>July 2025</h1>
<button up-accept='"2025-07-01 09:00"'>2025-07-01 09:00</button>
<button up-accept='"2025-07-01 10:00"'>2025-07-01 10:00</button>
<button up-accept='"2025-07-01 11:00"'>2025-07-01 11:00</button>
</div>
<a href="/bookings/23/calendar?month=2025-06">Previous month</a>
<a href="/bookings/23/calendar?month=2025-08">Next month</a>
</main>The attribute value for The links to other months will navigate within the overlay. |
Beta Was this translation helpful? Give feedback.
Yes, the demo is full of examples where an overlay needs to communicate a selection back to the parent layer.
A minimal solution could look something like this, starting with the form:
Then respond to
/bookings/23/calendarwith HTML like this: