Skip to content

Form improvement : A unique identifier for the input fields #250

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Mar 4, 2024
Merged

Form improvement : A unique identifier for the input fields #250

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion examples/official-site/sqlpage/migrations/01_documentation.sql
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,7 +237,8 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S
('class', 'A CSS class to apply to the form element.', 'TEXT', FALSE, TRUE),
('prefix_icon','Icon to display on the left side of the input field, on the same line.','ICON',FALSE,TRUE),
('prefix','Text to display on the left side of the input field, on the same line.','TEXT',FALSE,TRUE),
('suffix','Short text to display after th input, on the same line. Useful to add units or a currency symbol to an input.','TEXT',FALSE,TRUE)
('suffix','Short text to display after th input, on the same line. Useful to add units or a currency symbol to an input.','TEXT',FALSE,TRUE),
('id','A unique identifier for the input, which can then be used to select and manage the field with Javascript code. Usefull for advanced using as setting client side event listeners, interactive control of input field (disabled, visibility, read only, e.g.) and AJAX requests.','TEXT',FALSE,TRUE)
) x;
INSERT INTO example(component, description, properties) VALUES
(
Expand Down
9 changes: 6 additions & 3 deletions sqlpage/templates/form.handlebars
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
{{#if (or (eq type "radio") (eq type "checkbox"))}}
<div class="form-selectgroup form-selectgroup-boxes d-flex flex-column my-1 col-md-{{default width 12}}">
<label class="form-selectgroup-item flex-fill">
<input type="{{type}}" name="{{name}}" value="{{value}}" {{#if required}}required{{/if}} {{#if checked}}checked{{/if}} class="form-selectgroup-input">
<input type="{{type}}" {{#if id}}id="{{id}}" {{/if}}name="{{name}}" value="{{value}}" {{#if required}}required{{/if}} {{#if checked}}checked{{/if}} class="form-selectgroup-input">
<div class="form-selectgroup-label d-flex align-items-center p-3">
<div class="me-3">
<span class="form-selectgroup-check"></span>
Expand All @@ -35,7 +35,7 @@
</div>
{{else}}
{{~#if (eq type "hidden")}}
<input type="hidden" name="{{name}}" value="{{value}}">
<input type="hidden" name="{{name}}" {{#if id}}id="{{id}}" {{/if}}value="{{value}}">
{{else}}
<label class="form-label mb-2 col-md-{{default width 12}}">
{{default label name}}
Expand All @@ -48,7 +48,8 @@
class="form-control"
placeholder="{{placeholder}}"
rows="{{default rows 3}}"
{{#if value}}value="{{value}}" {{/if~}}
{{#if id}}id="{{id}}" {{/if~}}
{{~#if value}}value="{{value}}" {{/if~}}
{{~#if minlength}}minlength="{{minlength}}" {{/if~}}
{{~#if maxlength}}maxlength="{{maxlength}}" {{/if~}}
{{~#if required}}required="required" {{/if~}}
Expand All @@ -58,6 +59,7 @@
</textarea>
{{else}}{{#if (eq type 'select')}}
<select name="{{name}}" class="form-select"
{{~#if id}} id="{{id}}" {{/if~}}
{{~#if required}} required="required" {{/if~}}
{{~#if autofocus}} autofocus {{/if~}}
{{~#if multiple}} multiple {{/if~}}
Expand All @@ -71,6 +73,7 @@
{{#if prefix_icon}}<span class="input-group-text">{{icon_img prefix_icon}}</span>{{/if}}
{{#if prefix}}<span class="input-group-text">{{prefix}}</span>{{/if}}
<input name="{{name}}" class="form-control {{class}}"
{{~#if id}} id="{{id}}" {{/if~}}
{{~#if type}} type="{{type}}" {{/if~}}
{{~#if placeholder}} placeholder="{{placeholder}}" {{/if~}}
{{~#if value}} value="{{value}}" {{/if~}}
Expand Down