# Submit

## The submit element is used to send data to a rest service
 * The api is set up like a [fetcher](#core/components/functional/fetch/fetch.md/fetch).
 * The *formDataProvider* attribute points to the adress where the data is held by a publisher.
 * This attribute is also used by form elements such as *sonic-input*, or *sonic-select*, which fill this publisher with their *value* attribute according to their *name* attribute
 * The *method* attribute allows you to choose the sending method: *put/delete/post*, *post* being the default method.
 * If the *onClick* attribute is present, the data is sent when the content is clicked on
 * If the *onEnterKey* attribute is present, data is sent when the enter key of an element contained in the *sonic-submit* with focus is pressed
 * During sending, *sonic-submit* elements with the same *dataProvider* attribute have the *disabled="disabled "* property, which has the effect of disabling their content
 * The *clearedDataOnSuccess* attribute can be used to clear the data from the corresponding dataProvider when the call to the api has provided a result.

## Form example
<sonic-code>
  <template>
  <sonic-scope
        serviceURL="https://reqres.in" dataProvider="api/register"
        formDataProvider="submit-example" submitResultDataProvider="submit-example-result"
        method="post"
        class="max-w-lg block"
      >
        <sonic-submit onEnterKey>
          <div class="grid grid-cols-2 gap-4 mb-4 ">
            <sonic-input required name="email" type="email" value="eve.holt@reqres.in"></sonic-input>
            <sonic-input required type="password" name="password" value="pistol"></sonic-input>
          </div>
        </sonic-submit>
        <sonic-submit onClick>
          <sonic-button type="success" class="w-full">Submit</sonic-button>
        </sonic-submit>
    </sonic-scope>
  </template>
</sonic-code>





## Result handling example

Result will show when something has been submit because the **dataprovider** used in this example is the same as the **submitResultDataProvider** used in the previous form.
<sonic-code>
  <template>
      <div dataProvider="submit-example-result">
        <div>Id : <span data-bind ::inner-html="$id"></span></div>
        <div>Token : <span data-bind ::inner-html="$token"></span></div>
        <div data-bind ::inner-html="$error"></div>
      </div>
  </template>
</sonic-code>


## dot notation

You can write the folowing code where the name attribute is written in dot notation.

<sonic-code>
  <template>
  <sonic-scope formDataProvider="submit-example-dot-notation">
     <div class="grid grid-cols-2 gap-4 mb-4 ">
        <sonic-input required name="email.value" type="email" value="eve.holt@reqres.in"></sonic-input>
        <sonic-input required type="password" name="details.password.value" value="pistol"></sonic-input>
      </div>
    </sonic-scope>
  </template>
</sonic-code>

The data will be stored in the following format:

 <sonic-code language="typescript">
  <template>
  {
    email: {
      value: "eve.holt@reqres.in",
    },
    details: {
      password: {
        value: "pistol",
      },
    },
  }
  </template>
</sonic-code>