AngularJS: First button in form fires on enter button press even though it is not a submit button

Question

If I press the enter button after editing input_a, processInputA() is called. The submit() function is omitted.

This does not happen for input_b: It works as expected even though it is similar to input_a. The submit() function is called as expected.

How can I prevent the button after input_a from firing?

<form class="uk-form" ng-submit="submit()">
  <div class="uk-form-row">
    <input type="text"
           name="input_a"
           ng-model="buffer.inputA" ng-change="reportInputATyped()"
           class="uk-width-3-10 uk-form-small">
    <button ng-cloak ng-show="inputADirty" class="uk-button uk-button-small" ng-click="processInputA()">Apply</button>
    /
    <input type="text"
           name="input_b"
           ng-model="buffer.inputB" ng-change="reportInputBTyped()"
           class="uk-width-6-10 uk-form-small">
    <button ng-cloak ng-show="inputBDirty" class="uk-button uk-button-small" ng-click="processInputB()">Apply</button>
  </div>
  // ...further inputs...
</form>

AngularJS: http://angular-meteor.com

Styles: http://getuikit.com

Can you create a demo? It is obvious why enter fires submit, but the second should behave the same. Probably some of your code which you don't show interacts with it preventing it in case of the second input. — dfsq, Aug 24 '15 at 13:48
It _does not_ fire submit when I press it in the first input: It fires the click handler `processInputA()`. (but it _should_ fire submit instead). — ideaboxer, Aug 24 '15 at 13:55
Thanks rob, that solved it. Now enter solely fires submit. :-) — ideaboxer, Aug 24 '15 at 14:46

ideaboxer · Accepted Answer · 2015-08-25T18:52:03.227

<button> elements seem to be of default type submit if rendered through Chrome. Not what I expected intuitively.

The W4Schools.com article states the tip:

Always specify the type attribute for the element. Different browsers may use different default types for the element.

http://www.w3schools.com/tags/att_button_type.asp

Version that works if processed by Chrome:

<form class="uk-form" ng-submit="submit()">
  <div class="uk-form-row">
    <input type="text"
           name="input_a"
           ng-model="buffer.inputA" ng-change="reportInputATyped()"
           class="uk-width-3-10 uk-form-small">
    <button type="button" ng-cloak ng-show="inputADirty" class="uk-button uk-button-small" ng-click="processInputA()">Apply</button>
    /
    <input type="text"
           name="input_b"
           ng-model="buffer.inputB" ng-change="reportInputBTyped()"
           class="uk-width-6-10 uk-form-small">
    <button type="button" ng-cloak ng-show="inputBDirty" class="uk-button uk-button-small" ng-click="processInputB()">Apply</button>
  </div>
  // ...further inputs...
</form>

AngularJS: First button in form fires on enter button press even though it is not a submit button

1 Answers1