Form submission with button component. #113

Author: lovasoa

CHANGELOG.md

@@ -10,6 +10,7 @@
  - Revert a change introduced in v0.15.0:
     - Re-add the systematic `CAST(? AS TEXT)` around variables, which helps the database know which type it is dealing with in advance. This fixes a regression in 0.15 where some SQLite websites were broken because of missing affinity information. In SQLite `SELECT '1' = 1` returns `false` but `SELECT CAST('1' AS TEXT) = 1` returns `true`.
  - Fix a bug where [cookie](https://sql.ophir.dev/documentation.sql?component=cookie#component) removal set the cookie value to the empty string instead of removing the cookie completely.
+ - Support form submission using the [button](https://sql.ophir.dev/documentation.sql?component=button#component) component using its new `form` property. This allows you to create a form with multiple submit buttons that submit the form to different targets.
 
 ## 0.15.0 (2023-10-29)
  - New function: [`sqlpage.path`](https://sql.ophir.dev/functions.sql?function=path#function) to get the path of the current page.

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

@@ -235,6 +235,7 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S
     ('validate_color', 'The color of the button at the bottom of the form that submits the values. Omit this property to use the default color.', 'COLOR', TRUE, TRUE),
     ('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),
     -- item level
     ('type', 'The type of input to use: text for a simple text field, textarea for a multi-line text input control, number for field that accepts only numbers, checkbox or radio for a button that is part of a group specified in the ''name'' parameter. This is set to "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),

examples/official-site/sqlpage/migrations/18_button.sql

@@ -11,13 +11,14 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S
     ('size', 'The size of the buttons (e.g., sm, lg).', 'TEXT', TRUE, TRUE),
     ('shape', 'Shape of the buttons (e.g., pill, square)', 'TEXT', TRUE, TRUE),
     -- Item-level parameters (for each button)
-    ('link', 'The URL to which the button should navigate when clicked.', 'URL', FALSE, TRUE),
+    ('link', 'The URL to which the button should navigate when clicked. If the form attribute is specified, then this overrides the page to which the form is submitted.', 'URL', FALSE, TRUE),
     ('color', 'The color of the button (e.g., red, green, blue, but also primary, warning, danger, orange, etc.).', 'COLOR', FALSE, TRUE),
     ('title', 'The text displayed on the button.', 'TEXT', FALSE, TRUE),
     ('disabled', 'Whether the button is disabled or not.', 'BOOLEAN', FALSE, TRUE),
     ('outline', 'Outline color of the button (e.g. red, purple, ...)', 'COLOR', FALSE, TRUE),
     ('space_after', 'Whether there should be extra space to the right of the button. In a line of buttons, this will put the buttons before this one on the left, and the ones after on the right.', 'BOOLEAN', FALSE, TRUE),
-    ('icon', 'Name of an icon to be displayed on the left side of the button.', 'ICON', FALSE, TRUE)
+    ('icon', 'Name of an icon to be displayed on the left side of the button.', 'ICON', FALSE, TRUE),
+    ('form', 'Identifier (id) of the form to which the button should submit.', 'TEXT', FALSE, TRUE)
 ) x;
 
 -- Inserting example information for the button component
@@ -58,4 +59,19 @@ INSERT INTO example(component, description, properties) VALUES
         {"link":"#", "color":"green", "title":"Save" },
         {"link":"#", "color":"orange", "title":"Cancel", "space_after":true},
         {"link":"#", "outline":"indigo", "title":"Preview" }]')
+    );
+
+INSERT INTO example(component, description, properties) VALUES
+    ('button', 'Multiple buttons sending the same form to different pages.
+
+We use `'''' AS validate` to remove the submit button from inside the form itself,
+and instead use the button component to submit the form to pages with different GET variables.
+
+In the target page, we could then use the GET variable `$action` to determine what to do with the form data.
+    ',
+    json('[{"component":"form", "id": "poem", "validate": ""},
+        {"type": "textarea", "name": "Poem", "placeholder": "Write a poem"},
+        {"component":"button"}, 
+        {"link":"?action=save", "form":"poem", "color":"primary", "title":"Save" },
+        {"link":"?action=preview", "form":"poem", "outline":"yellow", "title":"Preview" }]')
     );

sqlpage/templates/button.handlebars

@@ -1,6 +1,10 @@
 <div class="btn-list mb-2 {{#if justify}}justify-content-{{justify}}{{/if}}">
 {{#each_row}}
+    {{#if form}}
+    <button type="submit" form="{{form}}" {{#if link}}formaction="{{link}}"{{/if}} 
+    {{else}}
     <a href="{{link}}"
+    {{/if}}
         class="btn {{#if disabled}} disabled{{/if}}
         {{~#if color}} btn-{{color}}{{/if}}
         {{~#if ../size}} btn-{{../size}}{{/if}}
@@ -12,6 +16,10 @@
             <span class="me-1">{{~icon_img icon~}}</span>
         {{~/if~}}
         {{~title~}}
+    {{#if form}}
+    </button>
+    {{else}}
     </a>
+    {{/if}}
 {{/each_row}}
 </div>

sqlpage/templates/form.handlebars

@@ -1,4 +1,9 @@
-<form class="my-3" method="{{default method "post"}}" {{#if action}}action="{{action}}"{{/if}}>
+<form 
+    {{#if id}}id="{{id}}"{{/if}}
+    class="my-3"
+    method="{{default method "post"}}"
+    {{#if action}}action="{{action}}"{{/if}}
+>
     <fieldset class="form-fieldset">
         {{#if title}}
             <h2 class="text-center mb-3">{{title}}</h2>