CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
Brian van der Stel
Brian van der Stel

Reputation: 5

Bootstrap enable button on input

I am having some issues getting this done correctly. I want my "sendit" button to enable (remove disable) as soon as there is any characters in the box. I've tried multiple things now but I can not get it to work.

Part of HTML:

<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>

    <input id="sendit" class="btn btn-lg btn-primary btn-block disabled" type="submit" value="Generate Codes"></input>


JS File

    $(document).ready(function() {
    var pass_error = 1;

    // Check name field

        if (inputPassword === '') {
            pass_error = 1;
        } else {
            pass_error = 0;
        }
        enableButton();
    });


    // verzendknop pas activeren nadat alles is ingevuld en gecontroleerd
    function enableButton() {
        if (pass_error!== 0) {
            $('#btn btn-lg btn-primary btn-block').attr('disabled', 'disabled');
        } else {
            $('#btn btn-lg btn-primary btn-block').removeAttr('disabled');
        }
    };
});

Upvotes: 0

Views: 1580

Answers (1)

sitesbyjoe
sitesbyjoe

Reputation: 1861

Your code only checks the field once upon DOM Ready.

You need to tie your check to a keyUp event on that field:

$('my-field').keyUp(function() {
 if($(this).val() === '') {
  pass_error = 1;
} else {
  pass_error = 0;
  enableButton();
});

Upvotes: 1

Related Questions