Check out this codepen example:
http://codepen.io/anon/pen/EjKqbW
I'm trying to reset the form elements when the user clicks on "Reset". The div elements f1,f2,f3 should be hidden and the searchText box cleared. However, the reset button is not triggering. Could it be because AngularJS does not allow multiple submit buttons in a form?
Is there a way to reset the form elements as specified when "Reset" is clicked?
Source code snippet:
<html>
<head>
<title>AngularJS test</title>
</head>
<body ng-app ng-controller="TestCtrl">
<form ng-submit="submit()">
<div style="display:none" id="notFound">Not Found</div>
<div style="display:none" id="f1"></div>
<div style="display:none" id="f2"></div>
<div style="display:none" id="f3"></div>
<input id="searchText" type=text/>
<input type="submit" ng-click="submit" value="Submit">
<input type="submit" ng-click="reset" value="Reset">
</form>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</body>
</html>
function TestCtrl($scope , $http) {
$scope.reset = function() {
$("#f1").css('display' , 'none');
$("#f2").css('display' , 'none');
$("#f3").css('display' , 'none');
$("#searchText").text('');
}
$scope.submit = function() {
$http.get('').
success(function(data, status, headers, config) {
// this callback will be called asynchronously
// when the response is available
$("#f1").text('test');
$("#f1").css('display' , 'block');
$("#f2").text('test');
$("#f2").css('display' , 'block');
$("#f3").text('test');
$("#f3").css('display' , 'block');
}).
error(function(data, status, headers, config) {
$("#notFound").css('display' , 'block');
// called asynchronously if an error occurs
// or server returns response with an error status.
});
}
}