Form Data
Explanation #
Setting the contentType
option to form
tells the @get()
action to look for the closest form, perform validation on it, and send all form elements within it to the backend. A selector
option can be provided to specify a form element. No signals are sent to the backend in this type of request.
1<form id="myform">
2 foo:<input type="checkbox" name="checkboxes" value="foo" />
3 bar:<input type="checkbox" name="checkboxes" value="bar" />
4 baz:<input type="checkbox" name="checkboxes" value="baz" />
5 <button data-on-click="@get('/endpoint', {contentType: 'form'})">
6 Submit GET request
7 </button>
8 <button data-on-click="@post('/endpoint', {contentType: 'form'})">
9 Submit POST request
10 </button>
11</form>
12
13<button data-on-click="@get('/endpoint', {contentType: 'form', selector: '#myform'})">
14 Submit GET request from outside the form
15</button>
Explanation #
In this example, the @get()
action is placed inside a submit listener on the form element using data-on-submit
.