Chrome doesn't submit form when using AngularJS directive on submit button - html

Question

I've written an AngularJS directive, shown below, which disables a HTML button on form submit, or when the button is clicked, and replaces the button's inner text. This works perfectly in IE and Firefox but in Chrome the code to modify the button executes successfully however the form won't submit, and no request is made to the server.
An example of the HTML button:
<button submit-button submit-title="Generating Report..."
type="submit" class="btn btn-primary">
<i class="fa fa-database mr-xs"></i>Generate Report
</button>
The AngularJS directive:
(function () {
function submitButton() {
return {
restrict: 'A',
require: '^form',
scope: {
submitTitle: '#'
},
link: function ($scope, $element, $attributes) {
$element.on('click', function () {
var element = $element[0];
element.innerHTML = element.innerHTML
.replace(element.innerText, $attributes.submitTitle);
element.disabled = true;
$element.addClass('disabled');
});
}
};
}
angular.module('adminApp', [])
.directive('submitButton', submitButton);
})();
I've used Fiddler to review the requests and responses and can confirm there is no request made in Chrome when the button is clicked or form submitted. Any help would be appreciated.

Answer 1

Chrome won't submit the form if you in the attached click event handler disable the element.
Use the submit event instead:
$element.on('submit', function() {
// Do stuff
});