1

I am trying to create a clear button to empty the values of an input field. So far it clears the username text box ones but afterwards I cannot clear it again and also the password box doesn't clear at all.

HTML:

<div class="list">
    <label class="item item-input">
        <span class="input-label">Username</span>
        <input type="email" name="username" ng-model="username" ng-minlength="5" required>
    </label>
    <label class="item item-input">
        <span class="input-label">Password</span>
        <input type="password" name="password" data-ng-model="password" ng-minlength="6" required>
     </label>
 </div>

Javascript

$scope.submit = function(username) {
    console.log("Thanks " + username);
};

$scope.submit = function(password) {
    console.log("Thanks " + password);
};

$scope.clear = function(username, password) {
    $scope.username = "";
    $scope.password = "";    
    console.log(username);
    console.log(password);   
};
Improve this question
2
  • Could you please create a jsfidlle \ plnkr? and why are there two "submit" functions in the same scope? Commented Aug 28, 2015 at 8:03
  • jsfiddle.net/rgeldenhuisre/8oh4928o @sphaso Commented Aug 28, 2015 at 8:07

3 Answers 3

Reset to default
1

Here is a working JSFiddle

HTML:

<div ng-app="myApp" ng-controller="dummy">
    <div class="list">
        <label class="item item-input"> <span class="input-label">Username</span>

            <input type="email" name="username" ng-model="username" ng-minlength="5" required>
        </label>
        <label class="item item-input"> <span class="input-label">Password</span>

            <input type="password" name="password" data-ng-model="password" ng-minlength="6" required>
        </label>
    </div>
            <button type="submit" ng-click="clear()">Clear</button>
</div>

JS:

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

    $scope.clear = function () {
        $scope.username = "";
        $scope.password = "";
        console.log(username);
        console.log(password);
    };

}]);
Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

A small change is required to your example:$scope.clear = function (username, password) should be changed to $scope.clear = function () and console.log(username); console.log(password); should be console.log($scope.username); console.log($scope.password);
Oh yes thanks, I didn't see it, they are completely useless.
I think there something else wrong your plunker works but on the application it doesn't ? @michelem
I cannot know what the problem is in your app without the full code.
I commented my coding out and used only yours and as I say only on the application it doesn't work.. Can it be an Ionic bug, or what else? @Michelem
|
1

I made a working JSFiddle.

HTML:

<div ng-controller="MyCtrl">
    <label class="item item-input">
        <span class="input-label">Username</span>
        <input type="email" name="username" ng-model="username" ng-minlength="5" required>
    </label>
    <label class="item item-input">
        <span class="input-label">Password</span>
        <input type="password" name="password" ng-model="password" ng-minlength="6" required>
    </label>
    <button ng-click="clear()">Clear</button>
</div>

JS:

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function($scope) {
    $scope.username = 'Foo';
    $scope.password = 'Bar';

    $scope.clear = function () {
        $scope.username = '';
        $scope.password = '';    
        console.log($scope.username);
        console.log($scope.password);   
    };
});
Improve this answer

Comments

1

Hi This Solution is Worked for me Please check it,

    <ion-content ng-controller="ExampleCtrl">
          <div class="list">
                <label class="item item-input">
                    <span class="input-label">Username</span>
                    <input type="email" name="username" ng-model="form.username" ng-minlength="5" required>
                </label>
                <label class="item item-input">
                    <span class="input-label">Password</span>
                    <input type="password" name="password" data-ng-model="form.password" ng-minlength="6" required>
                </label>
                <button class="button button-bar button-balanced" ng-click="submit()">Submit</button>
<button class="button button-bar button-balanced" ng-click="clear()">Clear</button>
            </div>
          </ion-content>

and in your controller update the functionality code as 

.controller('ExampleCtrl', ['$scope', function ($scope) {
  $scope.form = "";
  $scope.submit = function(){
  console.log($scope.form.username);
  console.log($scope.form.password);
  }
  $scope.clear = function(){
    $scope.form="";
  }

}])

If having any queries, please reply back

Improve this answer

4 Comments

I don't think it's working, where do you clear the values? There are only console.log() in the clear() method
After Initializing the controller am clearing the form as $scope.form="" and Implementing 2 way data binding , you check it in your code by implementing this
He is asking to clear the form clicking a button did you try it? Doesn't work jsfiddle.net/michelem09/L1aaebnc
Yeah I got it, I have edited the post ,please check it

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.