I'm trying to write a form which has ngsSubmit. Pressing Enter and clicking the submit button works as expected (calling the method I provided for ng-submit and that's that).
However, I also want in some cases to do some preprocessing before actually submitting, so I tried using JQuery's submit() to programmatically trigger the submit.
This causes the ng-submit handler to fire, AND also sends the form normally refreshing the whole page.
Any ideas how to get around this or why it happens???
Example here ("click me" shows the bad behavior) /
<form ng-app="myApp" ng-submit="submitMe()" ng-controller="myCtrl">
<input type="text" ng-model="value"></input>
<input type="submit" value="Go!"></input>
<div ng-click="progSubmit()">click me</div>
</form>
angular.module('myApp', [])
.controller('myCtrl', function($scope, $element, $timeout) {
$scope.submitMe = function() { alert ("hi"); };
$scope.progSubmit = function() {
$timeout(function() {
var inputElem = $element.find("input");
angular.element(inputElem[0].form).submit();
}, 0);
};
});
Thanks, Yaron
I'm trying to write a form which has ngsSubmit. Pressing Enter and clicking the submit button works as expected (calling the method I provided for ng-submit and that's that).
However, I also want in some cases to do some preprocessing before actually submitting, so I tried using JQuery's submit() to programmatically trigger the submit.
This causes the ng-submit handler to fire, AND also sends the form normally refreshing the whole page.
Any ideas how to get around this or why it happens???
Example here ("click me" shows the bad behavior) http://jsfiddle/Yf5tf/
<form ng-app="myApp" ng-submit="submitMe()" ng-controller="myCtrl">
<input type="text" ng-model="value"></input>
<input type="submit" value="Go!"></input>
<div ng-click="progSubmit()">click me</div>
</form>
angular.module('myApp', [])
.controller('myCtrl', function($scope, $element, $timeout) {
$scope.submitMe = function() { alert ("hi"); };
$scope.progSubmit = function() {
$timeout(function() {
var inputElem = $element.find("input");
angular.element(inputElem[0].form).submit();
}, 0);
};
});
Thanks, Yaron
Share Improve this question asked Sep 3, 2013 at 22:24 YaronYaron 2,1532 gold badges19 silver badges21 bronze badges 7- possible duplicate of Prevent form redirect OR refresh on submit? – lmjohns3 Commented Sep 3, 2013 at 22:41
-
do you need to stop the default behavior of the submit? Submit submits, btw. It will refresh. Do you want to.... do an ajax post or something (a fake submit, kind of) and preventDefault() or return false in the
$('#submit').click(function(){...})area ( or on the$('#form').submit(function(){...});) – gloomy.penguin Commented Sep 3, 2013 at 22:41 -
Couldn't you just do your preprocessing within
submitMe()? – Michael Benford Commented Sep 4, 2013 at 4:20 - Gloomy, normally angular intercepts the submit (ng-submit directive) and reroutes it to the method I provide. However, it does not work with programmatic submit. I see no reason why clicking a type="submit" button would be different then programmatically submitting. Michael, there are a few elements in the form that I'd like to trigger the submit (autoplete text for example), so I'm not clear as to how I can do that. – Yaron Commented Sep 4, 2013 at 20:13
- BTW, it's not a duplicate of the other question as this is more an angular issue. – Yaron Commented Sep 4, 2013 at 20:13
1 Answer
Reset to default 11So... in case anyone has the same issue.
The solution is to trigger submit using JQuery. Ideally it would be:
angular.element($scope.inputElem[0].form).trigger('submit');
However, there is some bug in Angular, so the current work around I found is this:
angular.element($scope.inputElem[0].form).find('[type=submit]').trigger('click');
Cheers.