If you’ve found an error, spotted something missing, or feel a section could be clearer or better explained, we’d love to hear from you. Your feedback helps keep the documentation accurate and useful for everyone.
Please report issues or suggest improvements on GitHub. Community input is invaluable in making the docs stronger.
Not comfortable with GitHub? No problem — you can also get in touch with us directly via our contact form. We welcome all feedback.
Form Submission Feedback
When a form is submitted in Trongate MX, several automatic behaviors and visual feedback options help create a smooth user experience. This page explores the built-in features and customization options available during form submission.
Automatic Form Behaviors
When a form is submitted, Trongate MX automatically:
- Disables all form elements to prevent double submission.
- Re-enables the form elements once a response is received.
- Clears any existing validation errors from previous submissions.
These behaviors require no additional attributes - they're built into Trongate MX's form handling system.
Loading Indicators
Loading indicators provide visual feedback that a form submission is in progress. Here's how to implement this using Trongate's helper functions:
For those who prefer working with pure HTML, here's the equivalent implementation:
The spinner automatically appears during form submission and hides when complete. The mx-indicator class ensures proper initialization and cleanup.
Target Element Control
You can control how the form appears during submission using mx-target-loading. Two approaches are available:
1. Cloaking the Form
Here's how to implement form cloaking using Trongate's helper functions:
To achieve the same cloaking effect using standard HTML:
2. Showing a Loading Message
Using Trongate's form helper functions:
Here's how to implement the loading message using pure HTML:
Combining Multiple Feedback Methods
You can combine different feedback methods for a comprehensive user experience. Here's how to do it using Trongate's helper functions:
Here's the same comprehensive feedback implementation in straightforward HTML:
When using mx-indicator with forms, place the loading indicator outside the form to ensure it remains visible when the form elements are disabled.
Response Handling
After submission, Trongate MX automatically:
- Re-enables all form elements.
- Hides loading indicators.
- Restores original content if using
mx-target-loading. - Displays any validation errors if they exist.
When building or testing API integrations, you can use PHP's sleep() function to simulate realistic network latency. This is particularly useful for testing features like loading indicators, ensuring they appear correctly during delayed server responses.
For example, here's how you can introduce a 2-second delay to mimic a slow API response:
Summary
Trongate MX provides a robust set of tools for handling form submissions gracefully. The automatic form element disabling prevents double submissions, while visual feedback options like loading indicators and content replacement keep users informed of the submission status. By combining these features, you can create form submissions that are both user-friendly and resilient.