efim/Learning-HTMX
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(15): adding dynamic form data source

Browse Source
This commit is contained in:
efim
2023-07-15 12:05:40 +00:00
parent 076dc76ca4
commit 998cc778e6
5 changed files with 64 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
15-multi-step-form/src/main/resources/templates/step1.html
View File

@@ -38,7 +38,7 @@
<form
class="flex flex-col items-center w-screen h-screen md:grid md:items-start md:p-5 md:bg-white md:rounded-2xl md:grid-cols-[auto_1fr] md:w-desktop-form md:h-desktop-form md:drop-shadow-2xl"
id="form-step"
th:fragment="formFragment(formData)"
th:fragment="formFragment(formData.userAnswers)"
hx-post="/submit-step/1/2"
hx-swap="outerHTML"
action="/submit-step/1/2"
@@ -105,7 +105,7 @@
<label for="name" class="pt-3 text-sm md:pt-5 md:pb-2 text-marine-blue">Name</label>
<input
id="name"
th:value="${formData.step1.name}"
th:value="${formData.userAnswers.step1.name}"
name="name"
type="text"
placeholder="e.g. Stephen King"
@@ -116,7 +116,7 @@
>
<input
id="email"
th:value="${formData.step1.email}"
th:value="${formData.userAnswers.step1.email}"
name="email"
type="email"
placeholder="e.g. stephenking@lorem.com"
@@ -127,7 +127,7 @@
>
<input
id="phone"
th:value="${formData.step1.phone}"
th:value="${formData.userAnswers.step1.phone}"
name="phone"
type="tel"
placeholder="e.g. +1 234 567 890"

10
15-multi-step-form/src/main/resources/templates/step2.html
View File

@@ -43,7 +43,7 @@
hx-swap="outerHTML"
action="/submit-step/2/3"
method="post"
th:fragment="formFragment(formData)"
th:fragment="formFragment(formData.userAnswers)"
>
<summary
class="w-full h-44 bg-no-repeat md:row-span-2 bg-sidebar-mobile marker:text-white md:bg-sidebar-desktop md:h-[568px] md:w-[274px]"
@@ -119,7 +119,7 @@
name="plan-type"
value="Arcade"
class="hidden peer"
th:checked="${formData.step2.planType.toString()} == 'Arcade'"
th:checked="${formData.userAnswers.step2.planType.toString()} == 'Arcade'"
checked
/>
<div
@@ -136,7 +136,7 @@
name="plan-type"
value="Advanced"
class="hidden peer"
th:checked="${formData.step2.planType.toString()} == 'Advanced'"
th:checked="${formData.userAnswers.step2.planType.toString()} == 'Advanced'"
/>
<div
class="absolute inset-y-0 inset-x-0 rounded-lg border border-cool-gray peer-checked:border-purplish-blue peer-checked:bg-magnolia"
@@ -152,7 +152,7 @@
name="plan-type"
value="Pro"
class="hidden peer"
th:checked="${formData.step2.planType.toString()} == 'Pro'"
th:checked="${formData.userAnswers.step2.planType.toString()} == 'Pro'"
/>
<div
class="absolute inset-y-0 inset-x-0 rounded-lg border border-cool-gray peer-checked:border-purplish-blue peer-checked:bg-magnolia"
@@ -172,7 +172,7 @@
name="isPackageYearly"
role="switch"
id="packageDuration"
th:checked="${formData.step2.isYearly}"
th:checked="${formData.userAnswers.step2.isYearly}"
/>
<span class="row-start-1 text-marine-blue peer-checked:text-cool-gray">Monthly</span>
<span class="row-start-1 text-cool-gray peer-checked:text-marine-blue">Yearly</span>

8
15-multi-step-form/src/main/resources/templates/step3.html
View File

@@ -43,7 +43,7 @@
hx-swap="outerHTML"
action="/submit-step/3/4"
method="post"
th:fragment="formFragment(formData)"
th:fragment="formFragment(formData.userAnswers)"
>
<summary
class="w-full h-44 bg-no-repeat md:row-span-2 bg-sidebar-mobile marker:text-white md:bg-sidebar-desktop md:h-[568px] md:w-[274px]"
@@ -117,7 +117,7 @@
value="OnlineService"
name="addon-services"
class="my-7 w-6 h-6 peer"
th:checked="${formData.step3.containsAddon('OnlineService')}"
th:checked="${formData.userAnswers.step3.containsAddon('OnlineService')}"
/>
<div
class="absolute inset-y-0 inset-x-0 rounded-lg border border-cool-gray peer-checked:border-purplish-blue peer-checked:bg-magnolia/50"
@@ -141,7 +141,7 @@
name="addon-services"
value="LargerStorage"
class="my-7 w-6 h-6 peer"
th:checked="${formData.step3.containsAddon('LargerStorage')}"
th:checked="${formData.userAnswers.step3.containsAddon('LargerStorage')}"
/>
<div
class="absolute inset-y-0 inset-x-0 rounded-lg border border-cool-gray peer-checked:border-purplish-blue peer-checked:bg-magnolia/50"
@@ -165,7 +165,7 @@
name="addon-services"
value="CustomProfile"
class="my-7 w-6 h-6 peer"
th:checked="${formData.step3.containsAddon('CustomProfile')}"
th:checked="${formData.userAnswers.step3.containsAddon('CustomProfile')}"
/>
<div
class="absolute inset-y-0 inset-x-0 rounded-lg border border-cool-gray peer-checked:border-purplish-blue peer-checked:bg-magnolia/50"