Edit: in addition to the earlier edits below about points being moot if you're doing an SPA, this entire question becomes essentially moot with the use of progressive enhancement SSR frameworks like Remix.
Prior to widespread AJAX use and DHTML a form was submitted and the browser would refresh by loading the response to that POST HTTP request which replaced the previous (form) page in the viewport. Now, with AJAX being in common use, there are two ways to go about it.
I am trying to come up with some general guidelines of when it's better to use each particular approach. Here's what I came up with. I'd love to see if there is an existing set of use cases that is better than my rough attempt, or if there are other general use cases I haven't considered.
use AJAX submission when:
- form submits 'to itself' (we show the same form after submission)
- form is only a part of a larger view (such as a search form where search results may be dynamically added to an area on the page, such as a table or thumbnail grid)
use regular form submission when:
- following submission we intend to have the user end up at a different page edit: this point is moot if using a single-page application architecture
- form data submitted will change the data in the db or the application state in such a significant manner that the page should be 're-run' rather than attempting to submit via AJAX and then do an inordinate amount of work on the client to make the existing page reflect the changes (though I think in many cases changes may be simple enough that client-side view manipulation to reflect the new data/state will be appropriate) edit: this point is moot if using a reactive view library/framework (such as React)
Also be good to know if there are reasons why these guesses might produce a sub-optimal UX.