Form handling improvement (self-contains and AJAX like)

[SYip]

It would be beneficial for form components to manage their own submission logic internally. This approach offers several advantages:

Enhanced Reusability: Components become self-contained, handling submission and rendering updates independently. This allows for easy reuse across different pages and applications.

Improved Code Organization: Decoupling submission logic from page-level code leads to cleaner, more maintainable codebases, especially when dealing with multiple forms per page.

Support for AJAX-like Behavior: One feature that would greatly enhance Fresh's form handling capabilities is built-in support for AJAX-like behavior. This would allow developers to update forms without full page reloads, creating a smoother and more responsive user experience. Fresh currently supports Partial, however, it changes the url when a form is sumbitted.

This feature would provide a valuable alternative to traditional AJAX, enabling developers to create dynamic and responsive forms within the Fresh framework.

Related issues:

• Homepage partials example gets weird with the refresh button. #2559
• Fetching from own api route #398

[CAYdenberg]

Couldn't you just make a form inside an island that talks to a separate API route?

[SYip]

Thanks for your input! While the approach of using an island combined with the ajax form submission works, a dedicated Fresh form component could offer a more streamlined experience.

A first-class component would encapsulate AJAX logic, error handling, and self-rerendering out-of-the-box. This means less boilerplate for developers and a cleaner, more declarative way to build interactive forms, directly improving developer experience.

For example:

• Error Handling: Instead of manually coding how to display "Invalid email" next to the correct field after a failed submission, the form component could handle this automatically.
• Loading States: The component could inherently manage showing a loading indicator during submission, rather than requiring manual state updates in the island to show/hide a spinner.
• Reduced Repetition: If you have multiple forms, you wouldn't need to reimplement the ajax submission and error display logic each time; you'd just use the dedicated component, configured for each specific form.

This could also lead to more optimized form-specific updates.

How do you think?