new auto_submit parameter in the form component

Author: lovasoa

CHANGELOG.md

@@ -11,6 +11,8 @@
   - The previous behavior is preserved (the `.sql` suffix is now optional), so this is a new feature, not a breaking change.
   - Big thanks to @guspower who made big contributions to this feature.
 - Update ApexCharts to [v4.4.0](https://github.com/apexcharts/apexcharts.js/releases/tag/v4.4.0): fixes multiple small bugs in the chart component.
+- Add a new `auto_submit` parameter to the form component. When set to true, the form will be automatically submitted when the user changes any of its fields, and the page will be reloaded with the new value. The validation button is removed.
+  - This is useful to quickly create filters at the top of a dashboard or report page, that will be automatically applied when the user changes them.
 
 ## 0.32.1 (2025-01-03)
 

examples/official-site/sqlpage/migrations/01_documentation.sql

@@ -274,6 +274,7 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S
     ('validate_outline', 'A color to outline the validation button.', 'COLOR', TRUE, TRUE),
     ('reset', 'The text to display in the button at the bottom of the form that resets the form to its original state. Omit this property not to show a reset button at all.', 'TEXT', TRUE, TRUE),
     ('id', 'A unique identifier for the form, which can then be used to validate the form from a button outside of the form.', 'TEXT', TRUE, TRUE),
+    ('auto_submit', 'Automatically submit the form when the user changes any of its fields, and remove the validation button.', 'BOOLEAN', TRUE, TRUE),
     -- item level
     ('type', 'The type of input to use: text for a simple text field, textarea for a multi-line text input control, number to accept only numbers, checkbox or radio for a button that is part of a group specified in the ''name'' parameter, hidden for a value that will be submitted but not shown to the user. text by default.', 'TEXT', FALSE, TRUE),
     ('name', 'The name of the input field, that you can use in the target page to get the value the user entered for the field.', 'TEXT', FALSE, FALSE),
@@ -436,6 +437,18 @@ In this example, depending on what the user clicks, the page will be reloaded wi
     {"name": "component", "type": "radio", "value": "map", "checked": true, "description": "Display a map based on database data", "label": "Map"},
     {"name": "component", "type": "radio", "value": "chart", "description": "Interactive plots of SQL query results", "label": "Chart"}
     ]')),
+    ('form', '
+### Dynamically refresh the page when the user changes the form
+
+The form will be automatically submitted when the user changes any of its fields, and the page will be reloaded with the new value.
+The validation button is removed.
+', json('[{"component":"form", "auto_submit": true},
+    {"name": "component", "type": "select", "autocomplete": false, "options": [
+        {"label": "Form", "value": "form", "selected": true},
+        {"label": "Map", "value": "map"},
+        {"label": "Chart", "value": "chart"}
+    ], "description": "Choose a component to view its documentation. No need to click a button, the page will be reloaded automatically.", "label": "Component"}
+    ]')),
     ('form', 'When you want to include some information in the form data, but not display it to the user, you can use a hidden field.
 
 This can be used to track simple data such as the current user''s id,

sqlpage/sqlpage.js

@@ -216,6 +216,11 @@ function sqlpage_form() {
       }
     });
   }
+
+  const auto_submit_forms = document.querySelectorAll("form[data-auto-submit]");
+  for (const form of auto_submit_forms) {
+    form.addEventListener("change", () => form.submit());
+  }
 }
 
 function get_tabler_color(name) {

sqlpage/templates/form.handlebars

@@ -7,6 +7,7 @@
     {{else}}
     {{#if id}}action="#{{id}}"{{/if}}
     {{/if}}
+    {{#if auto_submit}}data-auto-submit{{/if}}
 >
     <fieldset class="form-fieldset mb-1">
         {{#if title}}
@@ -130,7 +131,7 @@
             {{/if}}
         {{/each_row}}
         </div>
-        {{#if (ne validate '')}} 
+        {{#if (and (ne validate '') (not auto_submit))}}
             <input class="btn
             btn-{{default validate_color "primary"}}
             {{#if validate_shape}} btn-{{validate_shape}} {{/if}}