# HTML form not submitting: how to fix it

Clicking submit and nothing happens? A type="button", a hidden required field, an input named submit or a silent handler each kill a form. All reproduced.

Author: Formgong
Published: 2026-10-23
Language: en
Canonical: https://formgong.com/en/blog/html-form-not-submitting/

An HTML form that does nothing on submit usually has one of five switches flipped: the button is type="button" (or sits outside the form) so it submits nothing; a required field is hidden by CSS and blocks submission with the console error “An invalid form control … is not focusable”; a field named submit shadows the form's submit() method, so scripts throw “form.submit is not a function”; the button is disabled; or a JavaScript handler calls preventDefault() and then fails before sending. The browser console names three of the five.

## Open the console first

*Figure: A form whose submit button does nothing. The browser console shows the error: an invalid form control with a hidden required field is not focusable.*

“Not submitting” has a precise meaning worth checking before anything else: open DevTools, watch the Network tab, click Send. If a request appears, your form submits and the problem lives server-side or in the response handling, which is [a different guide](/en/blog/contact-form-failed-to-fetch/). If no request appears, one of these five is the cause:

HTML form not submitting: the five causes
The switchWhat you observe

Button with type="button", or outside the formClick does nothing, console silent
Hidden required fieldConsole: “invalid form control … is not focusable”
A field named submitScripts throw “form.submit is not a function”
Disabled submit buttonButton greyed out or styled normal but inert
preventDefault() and then a silent failureHandler runs, no request, maybe a thrown error

## The button does not submit anything

A `<button>` inside a form submits it by default, but `<button type="button">` never does; it exists for JavaScript-only buttons and does nothing on its own. The attribute gets added by component libraries and by copy-paste, and the result is a perfectly styled button with no behaviour and nothing in the console. The fix is `type="submit"`, or simply removing the attribute.

The same blank behaviour comes from a button placed outside the `<form>` tag, common after a layout refactor. HTML has a fix that avoids moving markup: give the form an id and the button `form="that-id"`, and the association is restored. A quick way to test either case is pressing Enter in a text field: if Enter submits and the button does not, the button is the problem.

## A required field nobody can see

Browser validation runs before submission, and when it fails on a field, the browser focuses that field to show its message. If the field is inside `display:none`, it cannot be focused, so the browser aborts the whole submission and writes the one clue to the console. In our reproduction, Chrome's exact words were: “An invalid form control with name='hidden-required' is not focusable.” The page itself showed nothing at all.

This happens to real sites through multi-step forms (step two is hidden while step one submits), collapsed sections, and hastily hidden fields that kept their `required`. Either remove `required` from fields you hide, disable them while hidden (disabled fields skip validation), or, as a blunt instrument, put `novalidate` on the form tag and validate in your own code.

## A field named submit

Every form element becomes a property on the form object under its name, and a field named `submit` replaces the form's `submit()` method with itself. Any script that then calls `form.submit()`, including plenty of third-party ones, throws. Our test page threw `TypeError: document.getElementById(...).submit is not a function` on the first call.

Clicking the button may still work in this case, which makes the breakage look random: hand-clicks submit, scripted submits crash. Rename the field (`submit-button`, or any name that is not a form property, and the same goes for a field named `action` or `method`), and the method comes back. Contact Form 7's FAQ keeps a whole list of names WordPress additionally reserves, which is why its default fields are prefixed `your-`.

## Disabled buttons and handlers that eat the event

A `disabled` submit button is inert by definition, and the subtle version is a script that disables the button to prevent double-clicks and fails to re-enable it after a validation error, so the second attempt is impossible. If clicking produces no focus outline and no console line, inspect the button element and look for the attribute.

The JavaScript variant of “nothing happens” is a submit handler that calls `event.preventDefault()` and then never completes its own sending: a typo before the `fetch`, a failed import, a condition that returns early. The form's default behaviour is switched off, the replacement never runs, and the visitor sees nothing at all. The console usually shows the thrown error; if the handler fails silently, add a temporary `console.log` at its first line to confirm it runs at all. And after any of these fixes, test logged out and past your page cache: a cached page can keep serving the broken script long after you fixed it.

## A form that has less to break

Three of the five switches live in custom JavaScript or in markup drift. A plain HTML form posting to a backend needs neither: no handler, no fetch, no re-enable logic, just `action`, `method="POST"` and named fields. With Formgong the endpoint also stores every submission in a dashboard inbox and delivers to email and Telegram, and the [HTML guide](/en/docs/html/) is a one-page setup; our [form checker](/en/tools/form-checker/) will tell you whether an existing form actually sends anything. The free plan takes 1,000 submissions a month.

## Which switch was it?

Did one of the five match your form, or did the Network tab show something this page does not cover? Write to [support@formgong.com](mailto:support@formgong.com) and tell us what you tried. The cases readers send are how these guides get better.

## Frequently asked questions

### Why does my HTML form do nothing when I click submit?

Check five things: the button's type attribute (type="button" never submits), a hidden field with required (the console shows “is not focusable”), a field named submit (breaks form.submit()), a disabled button, and a JavaScript handler that calls preventDefault() and then fails. The browser console identifies most of them.

### What does “An invalid form control is not focusable” mean?

A required field failed validation, but it is hidden (display:none), so the browser cannot focus it to show the message and aborts the submission instead. Remove required from hidden fields, disable them while hidden, or validate with your own code under novalidate.

### Why does form.submit() throw “is not a function”?

The form has a field named submit, which shadows the method: form elements become properties of the form under their names. Rename the field and the method works again.

### How do I tell whether the form submits at all?

Open DevTools, switch to the Network tab and click the button. A request appearing means the form submits and the problem is the server or the response handling; no request means the submission is blocked on the page, by one of the five switches above.

## Sources and documentation

- [MDN: button type attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button)
- [MDN: HTMLFormElement.submit()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit)
- [MDN: Constraint validation](https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation)
- [HTML contact form](https://formgong.com/en/docs/html/)

[Get a form key](https://formgong.com/en/#top)