Form Data#

Demo#

Submit GET request from outside the form

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.

<form>
  <input name="foo" required placeholder="Type foo contents" />
  <button data-on-click="@get('/endpoint', {contentType: 'form'})">
    Submit GET request
  </button>
  <button data-on-click="@post('/endpoint', {contentType: 'form'})">
    Submit POST request
  </button>
</form>

<button data-on-click="@get('/endpoint', {contentType: 'form', selector: '#myform'})">
  Submit GET request from outside the form
</button>

Demo#

Explanation#

In this example, the @get() action is placed on the form itself using data-on-submit.

<form data-on-submit="@get('/endpoint', {contentType: 'form'})">
  <input name="bar" placeholder="Type bar contents" required />
  <button>
    Submit form
  </button>
</form>