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
<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>