Button press fired on angular form submit

Question

I have a form with an input text field as well as a button. I'd like to capture the user pressing enter in the text field - not to submit the form, but to trigger another action. The button has its own separate click handler that for some reason gets fired when I press enter in the text field.

example: http://jsfiddle.net/T8zLq/1/

<form onsubmit="return false" ng-submit="mysubmit()" ng-controller="TestCtrl" ng-app="Test">
    <input type="text" />
    <button ng-click="test()">X</button>
</form>

var app=angular.module("Test", []);

app.controller("TestCtrl", ["$scope", function($scope) {
    $scope.test = function() {alert('lol');  };
    $scope.mysubmit = function() {alert('submit');};
}]);

Why does this happen?

So what do you want to happen? do you want test() to NOT fire but mysubmit() to fire when you press enter? Or do you want neither to fire? — Matt Welch, Dec 10 '13 at 23:00
Correct - test() should only fire when I press the button, not when the form is submitted — user3088880, Dec 10 '13 at 23:03

score 13 · Accepted Answer · edited May 23 '17 at 12:29

13

set type='button' to your button

<form ng-submit="mysubmit()" ng-controller="TestCtrl">
    <input type="text" />
    <button ng-click="test()" type='button'>X</button>
</form>

Demo

More

edited May 23 '17 at 12:29

Community

1
1

answered Dec 10 '13 at 22:53

Jonathan de M.

9,721
8
47
72

1

Ah, didn't realize default button type was 'submit'. – user3088880 Dec 10 '13 at 23:04
2

@beku8 The default value for button is *submit*, so every time you press enter it'll submit the form. – Jonathan de M. Jan 27 '15 at 13:25

Button press fired on angular form submit

1 Answers1