Concorde functional component — Submit. sonic-submit sends the form publisher named by formDataProvider to a REST endpoint and writes the response to submitResultDataProvider. The request is configured like Fetch: serviceURL on an ancestor, Doc ID: core/components/functional/submit/submit. Keywords: Concorde, supersoniks, core/components/functional/submit/submit, submit, Submit, functional component, sonic-submit, web component, formDataProvider, submitResultDataProvider, serviceURL, dataProvider, endPoint, sonic-input, name, onClick, onEnterKey. URL: https://concorde.supersoniks.org/core/components/functional/submit.

Submit

sonic-submit sends the form publisher named by formDataProvider to a REST endpoint and writes the response to submitResultDataProvider. The request is configured like Fetch: serviceURL on an ancestor, path from the ancestor dataProvider or from endPoint. Form fields such as sonic-input fill the publisher through their name.

Basic example

onClick sends on a click inside the element, onEnterKey on Enter in a focused field inside it. The method defaults to post and the body to JSON. Fields are validated first; while the request runs, the content is faded and not clickable.

Result key

When the API wraps its payload ({ data: { id, token } }), set submitResultKey to a dot path so submitResultDataProvider receives only that part.

Reset after submit

clearedDataOnSuccess on an ancestor lists publisher ids, separated by spaces, that are set to {} once the API returns a result. This includes error results with messages.

Submit event

After each request, sonic-submit dispatches a bubbling submit event whose detail is the result, the same value written to submitResultDataProvider.

Endpoint override

endPoint on sonic-submit replaces the ancestor dataProvider as the request path, for this element only.

HTTP method

Set method to put · patch · delete · get (default post). It is read on sonic-submit only, never inherited. With get, the fields are appended to the endpoint as a query string.

Multipart body

sendAsFormData sends the fields as multipart/form-data instead of JSON. The response is still parsed as JSON.

Native form

With native, no request is made: after validation, the publisher values are copied into the matching controls of the closest <form> (hidden inputs are created when missing), then the browser submits the form. name and value on sonic-submit are sent as the submit button pair. Use a target iframe to stay on the page.

Nested fields

A dot in a field name stores a nested object in the form publisher, and the body is sent with the same shape.

<sonic-scope formDataProvider="submit-example-dot-notation">
      <div class="grid grid-cols-2 gap-4">
        <sonic-input label="Passenger" name="passenger.name" value="Ada Lindqvist"></sonic-input>
        <sonic-input label="Seat" name="passenger.seat" value="2A"></sonic-input>
      </div>
    </sonic-scope>

{ passenger: { name: "Ada Lindqvist", seat: "2A" } }

API reference

When the form or headers publisher has needsCaptchaValidation, the request waits for a Captcha token. A network failure produces a result with an error message in messages.