disabled/enabled button - jquery

Question

I want to disabled and enable a submit-input type depending on the completeness user's input with jquery. I am able to shut it down but cant not turn it on :(

$('#submit_btn').attr('disabled', 'disabled');

var nameFlag = false;;
var emailFlag = false;
var pwdFlag = false;

$('#f-name').focusout(function() {
    if($(this).val() == '') {
        nameFlag = false;
    } else if($(this).val().length < 4) {
        nameFlag = false;
    } else {
        nameFlag = true;
        //alert(nameFlag);
    }
});


$('#f-email').focusout(function() {
    if($(this).val() == '') {
        emailFlag = false;
    } else if($(this).val().length < 4) {
        emailFlag = false;
    } else {
        emailFlag = true;
        //alert(emailFlag);
    }
});


$('#f-pwd').focusout(function() {
    if($(this).val() == '') {
        pwdFlag = false;
    } else if($(this).val().length < 6) {
        pwdFlag = false;
    } else {
        pwdFlag = true;
        //alert(pwdFlag);
    }
});

//alert(nameFlag + " " + emailFlag + " " + pwdFlag);
if(nameFlag && emailFlag && pwdFlag) {
    $('#submit_btn').removeAttr('disabled');
} else {
    $('#submit_btn').attr('disabled', 'disabled');
}

So I put some alert boxes and see that my flags change depending on the user input but it doesn't enable my submit button

possible duplicate of [How to disable/enable an input with jQuery?](http://stackoverflow.com/questions/1414365/how-to-disable-enable-an-input-with-jquery) — Tieson T., Aug 03 '14 at 03:46
Yep, I couldn't find that post. Anyway, after finish reading the post, I think my code is similar on set/remove attribute disabled except that I have a boolean to control that action. — user3819470, Aug 03 '14 at 03:49

score 2 · Answer 1 · answered Aug 03 '14 at 04:12

I also tried to do same using jquery attr. its working fine. are you doing code inside document ready?

$(document).ready(function () {
    $('#submit_btn').attr('disabled', 'disabled');
    var nameFlag = false;
    var emailFlag = false;
    var pwdFlag = false;
    $("#fName").focusout(function () {
        if ($(this).val() == '') {
            DisabledButton();
        } else if ($(this).val().length < 4) {
            DisabledButton();
        } else {
            EnabledButton();
        }
    });


    $('#f-email').focusout(function () {
        if ($(this).val() == '') {
            DisabledButton()
        } else if ($(this).val().length < 4) {
            DisabledButton();
        } else {
            EnabledButton();
        }
    });

    function EnabledButton() {
        $('#submit_btn').removeAttr('disabled');
    }

    function DisabledButton() {
        $('#submit_btn').attr('disabled', 'disabled')
    }
});

see fiddle link http://jsfiddle.net/2jDKm/2/

score 1 · Accepted Answer · answered Aug 03 '14 at 04:06

use this:
http://jsfiddle.net/jq7Q7/1/
i moved yourr check code to a new function and check it every time you focus out a control:

    $('#submit_btn').attr('disabled', 'disabled');

    var nameFlag = false;;
    var emailFlag = false;
    var pwdFlag = false;

    $('#f-name').focusout(function() {
        if($(this).val() == '') {
            nameFlag = false;
        } else if($(this).val().length < 4) {
            nameFlag = false;
        } else {
            nameFlag = true;
            //alert(nameFlag);
        }
         checkform();
    });


    $('#f-email').focusout(function() {
        if($(this).val() == '') {
            emailFlag = false;
        } else if($(this).val().length < 4) {
            emailFlag = false;
        } else {
            emailFlag = true;
            //alert(emailFlag);
        }
         checkform();
    });


    $('#f-pwd').focusout(function() {
        if($(this).val() == '') {
            pwdFlag = false;
        } else if($(this).val().length < 6) {
            pwdFlag = false;
        } else {
            pwdFlag = true;
            //alert(pwdFlag);
        }
         checkform();
    });
    function checkform(){
        //alert(nameFlag + " " + emailFlag + " " + pwdFlag);
        if(nameFlag && emailFlag && pwdFlag) {
            $('#submit_btn').removeAttr('disabled');
        } else {
            $('#submit_btn').attr('disabled', 'disabled');
        }
    }

Thank you. But I'm not quiet sure, why my code is not working. (I'm new to jquery so I would like to learn more about it). — user3819470, Aug 03 '14 at 04:10
your code not worked because you check your flag when paage loaded(all fields are empty and flags are false), you should to check your flags every time an input changes — Farrokh, Aug 03 '14 at 04:16

score 0 · Answer 3 · answered Aug 03 '14 at 03:47

0

you can use prop() method insted of attr()

$('#submit_btn').prop('disabled', true);

and

$('#submit_btn').prop('disabled', false);

can help you through this problem

answered Aug 03 '14 at 03:47

Farrokh

1,109
1
7
18

I just changed to prop() function and it doesn't work either. I suggest that it never hit to the true condition of the if statement, although the flags are changed. – user3819470 Aug 03 '14 at 03:57
can you post your html here? or jsFiddle link – Farrokh Aug 03 '14 at 03:58

score 0 · Answer 4 · answered Aug 03 '14 at 03:59

This is my html:

<form class="form_box prefix_clear" method="get" action="#login">
    <div class="f-field">
        <label for="f-name">Username:</label><br/>
        <input id="f-name" class="submit_text" type="text" name="username"/>
        <p class="f-error case1">Please enter your username</p>
        <p class="f-error case2">Your username has to be at least 4 characters</p>
    </div>
    <div class="f-field">
        <label for="f-email">Email:</label><br/>
        <input id="f-email" class="submit_text" type="text" name="email"/>
        <p class="f-error case1">Please enter your email</p>
        <p class="f-error case2">Your email is not a valid format</p>
    </div>
    <div  class="f-field">
        <label for="f-pwd">Password:</label><br/>
        <input id="f-pwd" class="submit_text" type="password" name="password"/>
        <p class="f-error case1">Please enter your password</p>
        <p class="f-error case2">Your password has to be at least 6 letters (A-Z, a-z, 0-9)</p>
    </div>
    <div class="prefix_clear">
        <input id="submit_btn" class="f-btn" type="submit" name="submit" value="Create Account"/>
    </div>
</form>

score 0 · Answer 5 · answered Aug 03 '14 at 04:22

something wrong with your variables. try this code its working fine.

$(document).ready(function () {
    $('#submit_btn').attr('disabled', 'disabled');

    var nameFlag = false;;
    var emailFlag = false;
    var pwdFlag = false;

    $('#f-name').focusout(function () {
        if ($(this).val() == '') {
            DisabledButton();
        } else if ($(this).val().length < 4) {
            DisabledButton();
        } else {
            EnabledButton();
            //alert(nameFlag);
        }
    });


    $('#f-email').focusout(function () {
        if ($(this).val() == '') {
            DisabledButton();
        } else if ($(this).val().length < 4) {
            DisabledButton();
        } else {
            EnabledButton();
            //alert(emailFlag);
        }
    });


    $('#f-pwd').focusout(function () {
        if ($(this).val() == '') {
            DisabledButton();
        } else if ($(this).val().length < 6) {
            DisabledButton();
        } else {
            EnabledButton();
        }
    });

    function EnabledButton() {
        $('#submit_btn').removeAttr('disabled');
    }

    function DisabledButton() {
        $('#submit_btn').attr('disabled', 'disabled')
    }
});

see jsfiddle link http://jsfiddle.net/2jDKm/4/

disabled/enabled button - jquery

5 Answers5