Handling the browser URL with Express?

I have a multi-page form that keeps posting to /api/submit. I know which step they are on via hidden form field.

Issue with this approach is that the address bar shows /api/submit/. I would like it to show different urls (I think this is a better practice in general but am not sure on that point).

As I write this I guess a better setup would be: the form action on each page points to different endpoints which then res.render different templates, is this correct?

Normally with a multipage form, it’s done on the same page using JS: using actual different endpoints doesn’t make sense, because it’s still a single form - the fact it is multipage is a front-end implementation detail. You can do it that way, but that means you’d be submitting on each page, saving the intermediate state somewhere on the backend, then gluing everything together at the end, which is a. far more complex than it needs to be, and b. makes it exceptionally easy to have out-of-sync junk data (what happens if a client disconnects in the middle of submission?), c. completely breaks accessibility amongst other things (you expect a specific thing to be at a specific location, what you’re suggesting splits one thing up and puts bits of it in different locations)

If you want different URLs (ie you want to allow users to use the back button), do it front end and with JS manipulate the url using the history API (ie they aren’t really different URLs, they just act like them from the pov of the user)

1 Like