Modals, Single Page App questions

[NewMedia]

Just created my usual PHP doowahdiddee –
1-- login user credentials to verify we know you page,
2 – choose from different event/s form page,
3 – Thanks for registering (user session closed now) & check back for new events in the near future page

But now I want to try this as a one page Bootstrap 5 app.
Once login form is submitted then the Registration Form glides in from the right side completely over the login page.
The Registration form page and Thank you page are Protected.

User fills in form, makes choices and hits Save or Submit button – then Thank You page slides on to wrap things up.

form mockup page

Modal close mockup

Simple, yes. But using Wappler modals, conditional js, bootstrap 5 on a Responsive SPA is there a reason not to use Modals until the last page/slide?

Perhaps use Bootstrap OffCanvas for each step? Using Conditional Include at serverconnection to check if user credentials are valid?

@ben I believe you like using OffCanvas ?

Bootstrap 5 Sidebar Examples

[Apple]

You always have weird questions

Don’t see any problem with the modal only on last step

Not experienced enough on the front-end, but I suggest you take a look at the HTMX project, might be able to help you somehow

https://htmx.org/

[NewMedia]

Weird quesions are my specialty.

Although you follow up with "Not experienced enough on the front-end, "

So, you can’t answer the question I posed off the top of your head by your own experience.

But I get your response about the weirdness of the question.

But thank you for the link. It’s why I ask these questions (graduate of No Question Is A Dumb Question Academy).

I like to provoke people who DO KNOW by their own repeated experience who may contribute some little tidbits. To save me some hours of fiddling with something that looks straightforward until I discover something I should have known before I started.

Thank you for this link, again, @Apple

[Apple]

I had to answer, so you would at least have one reply

With HTMX I meant you could a achieve a sort of “SPA” experience by loading HTML fragments upon form submit - although the form steps would be loaded through HTML, not a true SPA where the form is already pre-loaded.

Wappler’s SPA on NodeJS is the same thing - it’s not a true “SPA”, because HTML fragments are loaded on-demand.

When I see a see a post by NewMedia I’m like “Oh! That awesome German/Swiss/Whatever is back with yet another puzzling question!” Good thing to have people like you floating around

[NewMedia]

I know, you took pity on me, again.
I appreciate it!

These pages you provided have some really cool stuff!

The genius you recognized in this Super HTML is down my alley!

I’m so glad I decided to risk getting weird again! I would not have run across this, most likely!

[NewMedia]

WOW.
The more I read the more I’m impressed with things like this –

Solving practical problems with simple syntax using html

If you’d rather prioritize the validation request over the submit request, you can use the drop strategy. This example will prioritize the validation request over the submit request so that if a validation request is in flight, the form cannot be submitted.

<form hx-post="/store">
    <input id="title" name="title" type="text" 
        hx-post="/validate" 
        hx-trigger="change"
        hx-sync="closest form:drop"
    >
    <button type="submit">Submit</button>
</form>

https://htmx.org/attributes/hx-sync/