Form Data#

Demo#

Submit GET request from outside the form

Explanation#

Setting the contentType option to form tells the sse() 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="sse('/endpoint', {contentType: 'form'})">
    Submit GET request
  </button>
  <button data-on-click="sse('/endpoint', {contentType: 'form', method: 'post'})">
    Submit POST request
  </button>
</form>

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

Demo#

Explanation#

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

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