Skip to content

Commit ce910ba

Browse files
madsrasmussenmadsrasmussen
committed
add submit handler example
1 parent 77b4bdb commit ce910ba

File tree

1 file changed

+111
-84
lines changed

1 file changed

+111
-84
lines changed

‎packages/uui-form/lib/uui-form.story.ts

Lines changed: 111 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -35,90 +35,117 @@ const _onSubmit = (e: SubmitEvent) => {
3535
}
3636
};
3737

38+
// TODO: Find a good way to have stories with both HTML and javascript
3839
export const Overview: Story = () => {
39-
return html` <uui-form>
40-
<form @submit="${_onSubmit}">
41-
<uui-form-layout-item>
42-
<uui-label slot="label">Checkbox</uui-label>
43-
<uui-checkbox
44-
name="checkbox"
45-
value="Bike"
46-
label="This is my checked checkbox"
47-
required>
48-
This is my checked checkbox
49-
</uui-checkbox>
50-
</uui-form-layout-item>
51-
52-
<uui-form-layout-item>
53-
<uui-label slot="label">Toggle</uui-label>
54-
<uui-toggle name="toggle" label="This is my toggle" required>
55-
This is my toggle
56-
</uui-toggle>
57-
</uui-form-layout-item>
58-
59-
<uui-form-layout-item>
60-
<uui-label slot="label">Radio Group</uui-label>
61-
<uui-radio-group
62-
name="radio"
63-
label="This is my radio"
64-
required
65-
@change=${_onRadioGroupChanged}>
66-
<uui-radio value="radio1" label="radio1" name="radio1"
67-
>Label</uui-radio
68-
>
69-
<uui-radio value="radio2" label="radio2" name="radio2"
70-
>Label</uui-radio
71-
>
72-
<uui-radio value="radio3" label="radio3" name="radio3"
73-
>Label</uui-radio
40+
return html`
41+
<uui-form>
42+
<form id="MyForm" @submit="${_onSubmit}">
43+
<uui-form-layout-item>
44+
<uui-label slot="label">Checkbox</uui-label>
45+
<uui-checkbox
46+
name="checkbox"
47+
value="Bike"
48+
label="This is my checked checkbox"
49+
required>
50+
This is my checked checkbox
51+
</uui-checkbox>
52+
</uui-form-layout-item>
53+
54+
<uui-form-layout-item>
55+
<uui-label slot="label">Toggle</uui-label>
56+
<uui-toggle name="toggle" label="This is my toggle" required>
57+
This is my toggle
58+
</uui-toggle>
59+
</uui-form-layout-item>
60+
61+
<uui-form-layout-item>
62+
<uui-label slot="label">Radio Group</uui-label>
63+
<uui-radio-group
64+
name="radio"
65+
label="This is my radio"
66+
required
67+
@change=${_onRadioGroupChanged}>
68+
<uui-radio value="radio1" label="radio1" name="radio1"
69+
>Label</uui-radio
70+
>
71+
<uui-radio value="radio2" label="radio2" name="radio2"
72+
>Label</uui-radio
73+
>
74+
<uui-radio value="radio3" label="radio3" name="radio3"
75+
>Label</uui-radio
76+
>
77+
</uui-radio-group>
78+
</uui-form-layout-item>
79+
80+
<uui-form-layout-item>
81+
<uui-label slot="label">Email</uui-label>
82+
<uui-input
83+
name="email"
84+
type="text"
85+
label="Email"
86+
required></uui-input>
87+
</uui-form-layout-item>
88+
89+
<uui-form-layout-item>
90+
<uui-label slot="label">Password</uui-label>
91+
<uui-input-password name="password" label="Password" required>
92+
</uui-input-password>
93+
</uui-form-layout-item>
94+
95+
<uui-form-layout-item>
96+
<uui-label slot="label">Slider</uui-label>
97+
<uui-slider
98+
label="Slider"
99+
name="slider"
100+
value="5.5"
101+
min="0"
102+
max="10"
103+
step="1"
104+
required>
105+
</uui-slider>
106+
</uui-form-layout-item>
107+
108+
<uui-form-layout-item>
109+
<uui-label slot="label">Textarea</uui-label>
110+
<uui-textarea
111+
label="Textarea"
112+
name="textarea"
113+
value="Some long text that needs more space"
114+
minlength="10"
115+
maxlength="30"
116+
required>
117+
</uui-textarea>
118+
</uui-form-layout-item>
119+
120+
<div>
121+
<uui-button type="reset" label="Reset" look="secondary"
122+
>Reset</uui-button
74123
>
75-
</uui-radio-group>
76-
</uui-form-layout-item>
77-
78-
<uui-form-layout-item>
79-
<uui-label slot="label">Email</uui-label>
80-
<uui-input name="email" type="text" label="Email" required></uui-input>
81-
</uui-form-layout-item>
82-
83-
<uui-form-layout-item>
84-
<uui-label slot="label">Password</uui-label>
85-
<uui-input-password name="password" label="Password" required>
86-
</uui-input-password>
87-
</uui-form-layout-item>
88-
89-
<uui-form-layout-item>
90-
<uui-label slot="label">Slider</uui-label>
91-
<uui-slider
92-
label="Slider"
93-
name="slider"
94-
value="5.5"
95-
min="0"
96-
max="10"
97-
step="1"
98-
required>
99-
</uui-slider>
100-
</uui-form-layout-item>
101-
102-
<uui-form-layout-item>
103-
<uui-label slot="label">Textarea</uui-label>
104-
<uui-textarea
105-
label="Textarea"
106-
name="textarea"
107-
value="Some long text that needs more space"
108-
minlength="10"
109-
maxlength="30"
110-
required>
111-
</uui-textarea>
112-
</uui-form-layout-item>
113-
114-
<div>
115-
<uui-button type="reset" label="Reset" look="secondary"
116-
>Reset</uui-button
117-
>
118-
<uui-button type="submit" label="Submit" look="positive">
119-
Submit
120-
</uui-button>
121-
</div>
122-
</form>
123-
</uui-form>`;
124+
<uui-button type="submit" label="Submit" look="positive">
125+
Submit
126+
</uui-button>
127+
</div>
128+
</form>
129+
</uui-form>
130+
131+
<!-- Submit Handler
132+
const form = document.getElementById('MyForm');
133+
134+
form.addEventHandler('submit', (e) => {
135+
e.preventDefault();
136+
137+
const isValid = form.checkValidity();
138+
139+
if (!isValid) {
140+
return;
141+
}
142+
143+
const formData = new FormData(form);
144+
145+
for (const value of formData.values()) {
146+
console.log(value);
147+
}
148+
});
149+
-->
150+
`;
124151
};

0 commit comments

Comments
 (0)