0

In this codepen :

http://codepen.io/anon/pen/EjKqbW

I'm attempting to reset the form elements when user clicks "Reset". So div elements f1,f2,f3 should be hidden and searchText box cleared. But the reset button is not firing. I think reason is that multiple submit buttons are not allowed as part of AngularJS form ?

How can set the form elements as specified when "Reset" clicked ?

src : 

<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.
  });



  }




}
blue-sky
  • 51,962
  • 152
  • 427
  • 752
  • You're doing Angular wrong. You should never be manipulating elements in controllers. Instead, use `ng-hide` or `ng-show` and control visibility with scope variables. – isherwood May 15 '15 at 16:27
  • This may help. http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background – isherwood May 15 '15 at 16:28

1 Answers1

1

You are using both ng-click on the buttons and ng-submit on the form. Angular docs recommends against this for good reason - they will conflict, as both get called.

See the warning at the top of this: https://code.angularjs.org/1.3.15/docs/api/ng/directive/ngSubmit

Ng-submit runs whenever you click an input of type "submit". The reset button should be of type "button", as to avoid these issues.

Also ng-click="reset" should be ng-click="reset()"

working fiddle: http://codepen.io/anon/pen/NqNQQq

EDIT: as a sidenote, @isherwood's comments are correct - you are using angular wrong, in the sense that you should never use jquery in a controller to mess with the HTML. I would take a look into directives, and using angular.element (only when strictly necessary, which isn't the case) Updated the example to not use jquery.

Tiago Roldão
  • 10,629
  • 3
  • 29
  • 28
  • thanks, your fiddle contained jQuery code to set styles which I removed. So now just the text values are set using jQuery and styles are set with AngularJS. Updated fiddle : http://codepen.io/anon/pen/MwegYp – blue-sky May 15 '15 at 16:42
  • Still, setting anything through jQuery is ill-advised when developing with angularJS. if 3 elements receive some information, {{bindings}} is what you need. I updated the hooks on cancel, but only for demonstration sake. – Tiago Roldão May 15 '15 at 16:45
  • 1
    Updated the form to not use jQuery at all, to serve as a better example – Tiago Roldão May 15 '15 at 16:51