AngularJS: Call the ng-submit event outside the form
Use HTML5's form attribute, here's a sample:
angular.module('app', []).controller('MyCtrl', ['$scope', function($scope) { $scope.submitted = false; $scope.confirm = function() { $scope.submitted = true; };}]);form { padding:5px; border: 1px solid black}<!DOCTYPE html><html ng-app="app"><head><script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script> <meta charset="utf-8"> <title>JS Bin</title></head><body ng-controller="MyCtrl"> <form id="myform" ng-submit="confirm()"> <label for="myinput">My Input</label> <input type="text" id="myinput" name="myinput"> </form> <br> <input type="submit" value="Submit" form="myform"> <p ng-show="submitted"> The form was submitted </p></body></html>
Please, surround your code with a ng-controller, and use ng-click on buttons out of scope of <form>.
I make a sample on jsfiddle for you... try it:
<div ng-app> <div ng-controller="Ctrl"> <form ng-submit="submit()">Enter text and hit enter: <input type="text" ng-model="text" name="text" /> <input type="submit" id="submit" value="Submit" /> <pre>list={{list}}</pre> </form> <button ng-click="submit()">Submit 2</button> </div></div>with js:
function Ctrl($scope) { $scope.list = []; $scope.text = 'hello'; $scope.submit = function () { if ($scope.text) { $scope.list.push($scope.text); $scope.text = ''; } };}
This is by far the cleanest solution I found, all credits go to @Offereins https://stackoverflow.com/a/23456905/3819736
<form ng-submit="vm.submit()"> <input type="text" name="name" /> <input type="submit" id="submit-form" class="hidden" /></form><label for="submit-form"> <button type="submit">submit</button></label>This method doesn't require any additional controller JS or other jQuery tweaks.