Angular JS for clear button

Question

I am trying to clear the text fields when the clear button is clicked. Here are the codes i have tried in my system but I am still not getting the result. As I am new to Angular I apologize for the silly mistakes i have done.

HTML code

  <!DOCTYPE html>
    <html>
    <head>
        <title>Creation Form</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="../controllers/clearbutton.js"></script>
    </head>

    <body>

        <div class="container">
            <h2 style="text-align: center"><b>Create User</b></h2>

            <div class="panel-group" id="accordion">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title" style="text-align: center">


                            Enter your details
                        </h4>
                    </div>

                    <div class="panel-body">

                        <div class="row" ng-app="myApp" ng-controller="clear">


                            <div class="col-sm-4 form-group col-md-4 col-xs-12">
                                <div class="input-group">
                                    <div class="input-group-addon"><i class="glyphicon glyphicon-user"></i></div>
                                    <input type="text" class="form-control" placeholder="Name" name="callername" ng-model="callername"/>
                                </div>
                            </div>

                            <div class="col-sm-4 form-group col-md-4 col-xs-12">
                                <div class="input-group">

                                    <div class="input-group-addon"><i class="glyphicon glyphicon-user"></i></div>
                                    <input type="text" class="form-control" placeholder="User Code" name="usercode" ng-model="usercode" />

                                </div>
                            </div>



                            <div class="col-sm-4 form-group col-md-4 col-xs-12">
                                <div class="input-group">
                                    <div class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></div>
                                    <input type="text" class="form-control" placeholder="Email" name="email" ng-model="email" />
                                </div>
                            </div>
                        </div>
     <div class="pull-right">

                            <button type="submit" class="btn btn-primary ">Invite</button>

                            <button type="clear" class="btn btn-default" ng-click="clear()">Clear</button>

                        </div>
                    </div>
                </div>

            </div>
        </div>
    </body>
    </html>

Angular JS code

 angular.module('myApp', [])
        .controller('clear', ['$scope', function ($scope) {

            $scope.clear = function () {
                $scope.callername = "";
                $scope.volunteercode = "";
                $scope.email = "";
                console.log($scope.callername);
                console.log($scope.usercode);
                console.log($scope.email);
            };

        }]);

Not able to see where you are using clear button? and make object for all inputs like this: user: {'allername: '', 'volunteercode': ''...}` something like this, better approach. — Avnesh Shakya
– Avnesh Shakya, Commented Dec 29, 2016 at 5:07
I am really sorry. I left that part of the code while placing here. Please check the code now — beginner
– beginner, Commented Dec 29, 2016 at 5:12
Your button is out side of controller, please change that and see — Avnesh Shakya
– Avnesh Shakya, Commented Dec 29, 2016 at 5:16

Jigar7521 · Accepted Answer · 2016-12-29 05:15:30Z

You have not used proper ng-model variable inside clear function and clear button was missing too. Try like this :

angular.module('myApp', [])
  .controller('clear', ['$scope',
    function($scope) {

      $scope.clear = function() {
        console.log($scope.callername);
        console.log($scope.usercode);
        console.log($scope.email);
        $scope.callername = "";
        $scope.usercode = "";
        $scope.email = "";

      };

    }
  ]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title>Creation Form</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="../controllers/clearbutton.js"></script>
</head>

<body>

  <div class="container">
    <h2 style="text-align: center"><b>Create User</b></h2>

    <div class="panel-group" id="accordion">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title" style="text-align: center">


                            Enter your details
                        </h4>
        </div>

        <div class="panel-body">

          <div class="row" ng-app="myApp" ng-controller="clear">


            <div class="col-sm-4 form-group col-md-4 col-xs-12">
              <div class="input-group">
                <div class="input-group-addon"><i class="glyphicon glyphicon-user"></i>
                </div>
                <input type="text" class="form-control" placeholder="Name" name="callername" ng-model="callername" />
              </div>
            </div>

            <div class="col-sm-4 form-group col-md-4 col-xs-12">
              <div class="input-group">

                <div class="input-group-addon"><i class="glyphicon glyphicon-user"></i>
                </div>
                <input type="text" class="form-control" placeholder="User Code" name="usercode" ng-model="usercode" />

              </div>
            </div>



            <div class="col-sm-4 form-group col-md-4 col-xs-12">
              <div class="input-group">
                <div class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i>
                </div>
                <input type="text" class="form-control" placeholder="Email" name="email" ng-model="email" />
              </div>
            </div>

            <div class="col-sm-4 form-group col-md-4 col-xs-12">
              <div class="input-group">
                <input type="button" value="clear" class="btn btn-primary" ng-click="clear()" />

              </div>
            </div>

          </div>

        </div>
      </div>

    </div>
  </div>
</body>


</html>

Aravind.HU · Accepted Answer · 2016-12-29 05:16:05Z

0

Here is the test that I made and its working, I am assuming that you are using angular 1.5 or above and not 2

<div ng-app="myApp" ng-controller="myCtrl">
Name: <input ng-model="name">

<input type=button ng-click=clear() value="clear">
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name = "John Doe";

    $scope.clear = function() {
        $scope.name = "";
    }
});
</script>

You have to use ng-click to bind click event to the button

answered Dec 29, 2016 at 5:16

Aravind.HU

9,4825 gold badges42 silver badges53 bronze badges

Comments

ravikumar533 · Accepted Answer · 2016-12-29 05:33:09Z

0

There is an issue in your code. You defined the buttons in out of controller scope. Controller & route defined in

<div class="row" ng-app="myApp" ng-controller="clear">

Buttons are defined in another div it's not under the controller. This is the reason you are not getting result

Try this.

<html ng-app="myApp">
<body ng-controller="clear">

You will get the result.

answered Dec 29, 2016 at 5:33

ravikumar533

243 bronze badges

Collectives™ on Stack Overflow

Angular JS for clear button

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related