# 2025-04-30-1

Published: Wed, Apr 30, 2025
Tags: tip

Not uncommon to see folks add form submit handlers on the submit buttons click event vs on the forms submit handler. The problem is this prevents users from being able to fill out the form and submit it solely from the keyboard.

```jsx
<form>
  <button onClick={handleSubmit} />
</form>
```

Instead, apply the `handleSubmit` function to the form `onSubmit` handler. This ensures the form can be submitted when the user hits the <kbd>return</kbd> key.

```jsx
<form onSubmit={handleSubmit}>
  <button type="submit" />
</form>
```

If for whatever reason your button needs to live outside of the form element, likely in a dialog situation, you can ensure the same functionality by passing the forms id to the button via the `form` attribute as shown below.

```jsx
<form id="contactForm" onSubmit={handleSubmit}>
</form>
<button form="contactForm" type="submit" />
```