CODEWITHSUNDEEP
htmlformsgoogle-chrome
cvng
cvng

Reputation: 1878

Why can't I submit this form?

Can someone explain me why the submit event is never fired when pressing enter key in the input?

<form>
  <input type="text" placeholder="press enter here"/>
  <button disabled>disabled</button>
  <button type="submit">submit</button>
</form>

Clicking on the submit button works well. If I remove the disabled button it works well.

Tested under:
- Chrome Version 66.0.3359.181 (Build officiel) (64 bits)
- Chrome Version 68.0.3439.0 (Build officiel) canary (64 bits)

The first button is disabled but not the second which have type="submit".

Is that a known issue? Thanks,

Upvotes: 0

Views: 76

Answers (2)

HyperTextCoffeePot
HyperTextCoffeePot

Reputation: 448

Try setting the first button to type="button"

<form>
    <input type="text" placeholder="press enter here" />
    <button type="button" disabled>disabled</button>
    <button type="submit">submit</button>
</form>

If you're not going to use the first button to submit the form, then it doesn't need to be declared as a submit button. If you don't declare it, the form likely thinks it should be the button that submits the form. (Because it's the first button the browser sees when the page form is parsed)

Upvotes: 1

user149341
user149341

Reputation:

This behavior is by design. The relevant part of the HTML5 standard is §4.10.21.2 "Implicit submission":

A form element's default button is the first submit button in tree order whose form owner is that form element.

If the user agent supports letting the user submit a form implicitly (for example, on some platforms hitting the "enter" key while a text control is focused implicitly submits the form), then doing so for a form, whose default button has activation behavior and is not disabled, must cause the user agent to fire a click event at that default button.

The first submit button in the form is always treated as the default button, even if it is disabled. Disabling it prevents it from being used to submit the form.

Upvotes: 1

Related Questions