How to disable or enable button according to if text boxes empty or not?

Question

I work on my angularjs projerct.

I have button in my template and two input text elements.

The button have to be enabled only when two input boxes has some string.

Here is HTML code:

    <form id="loginform" class="form-horizontal" role="form">
        <div style="margin-bottom: 25px" class="input-group">
            <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
            <input id="login-username" type="text" class="form-control" ng-model="UserName" placeholder="UserName">
        </div>
        <div style="margin-bottom: 25px" class="input-group">
            <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
            <input id="login-password" type="text" class="form-control" ng-model="Password" placeholder="Password">
        </div>

        <div style="margin-top:10px" class="form-group pull-left">
            <div class="col-sm-12 controls">
                <input type="button" 
                       class="btn btn-success" 
                       value="enter" 
                       ng-click="inspectorArea.verify(UserName,Password)" 
                       ng-disabled="(UserName == null || Password == null)">
            </div>
        </div>
    </form>

and here is working plunker.

Using this row ng-disabled="(UserName == null || Password == null) in input button element I disable or enable button.

But it not working properly, you can see from plunker-example, button is enabled only when text boxes has string only for first time, if I remove string from one of the texts box elements the button is enable while I want them to be disalbled.

Any idea how can I disable button if at least one of the text boxes is empty?

Please have a look at my answer below. There is a very minor change required. — Aruna
– Aruna, Commented Nov 5, 2016 at 15:49

Aruna · Accepted Answer · 2016-11-05 15:48:00Z

2

Initially UserName and Password are null. So it will work. But when you type something and delete, they become empty and that's why it didn't work.

I have modified it to check the truthiness.

<input type="button" 
                       class="btn btn-success" 
                       value="enter" 
                       ng-click="inspectorArea.verify(UserName,Password)" 
                       ng-disabled="(!UserName || !Password)">

answered Nov 5, 2016 at 15:48

Aruna

12k3 gold badges31 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vivek Athalye · Accepted Answer · 2016-11-05 15:54:02Z

You should use ng-required and $invalid property of input field.

Check this code:

  <form name="loginform" id="loginform" class="form-horizontal" role="form">
      <div style="margin-bottom: 25px" class="input-group">
          <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
          <input name="uname" ng-required="true" id="login-username" type="text" class="form-control" ng-model="UserName" placeholder="UserName">
      </div>
      <div style="margin-bottom: 25px" class="input-group">
          <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
          <input name="pass" ng-required="true" id="login-password" type="text" class="form-control" ng-model="Password" placeholder="Password">
      </div>

      <div style="margin-top:10px" class="form-group pull-left">
          <div class="col-sm-12 controls">
              <input type="button" 
                     class="btn btn-success" 
                     value="enter" 
                     ng-click="inspectorArea.verify(UserName,Password)" 
                     ng-disabled="loginform.uname.$invalid || loginform.pass.$invalid">
          </div>
      </div>
  </form>

billy_comic · Accepted Answer · 2016-11-06 03:55:48Z

0

You can just use required on your input elements, no need for ng-required and then use ng-disabled="yourFormName.$invalid" as an attribute on your button element. To do this you must assign name="yourInputNames" to each of your input elements.

answered Nov 6, 2016 at 3:55

billy_comic

9098 silver badges29 bronze badges

Comments

Adam Patterson · Accepted Answer · 2016-11-06 04:41:24Z

Just add an ID to the button and this would work dynamically:

<script>
    $(document).ready(function(){

        $('#the_submit').prop('disabled','true');
        $('#the_submit').attr('title','text boxes are empty');
    });
    $(document).ready(function () {
        $('#login_password').keyup(function(){
            var val = $.trim($("#login_password").val());
            var val2 = $.trim($("#login_username").val());

            if (val != "" && val2 != "") {
            $('#the_submit').removeAttr('disabled');
            $('#the_submit').attr('title','Good To Go');
            }
        });
    });
    $(document).ready(function () {
        $('#login_password').keyup(function(){
            var val = $.trim($("#login_password").val());
            var val2 = $.trim($("#login_username").val());

            if (val == "" || val2 == "") {
            $('#the_submit').prop('disabled','true');
            $('#the_submit').attr('title','Edit Must Be Documented'); 
            }
        });
    });
    </script>";
}

// Here is your button, give it an id
<input type="submit" id="the_submit">

Collectives™ on Stack Overflow

How to disable or enable button according to if text boxes empty or not?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest