Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 321
ideaboxer Avatar asked Jan 29 '26 01:01

ideaboxer


1 Answers

<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>
like image 71
ideaboxer Avatar answered Jan 30 '26 13:01

ideaboxer



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!