Enable Button if Inputs are not empty jQuery

Question

I have a form with two inputs, submit button is disabled by default. I want to enable the button if the inputs are not empty or when the browser auto fill the form. Is there a way of enabling the button when browser auto fill the form?. Currently I'm using setTimeout.

function notEmpty(){
if ($('#password').val() !== '' && $('#useremail').val() !== ''){
    button.prop('disabled',false);
}
}
setTimeout(function(){ notEmpty(); }, 5000);

Joy Biswas · Accepted Answer · 2015-09-22 23:38:27Z

3

JS works better when you program it on event driven programming style.

You can use the trigger oninput to all the elements that you want to watch out for

$(function(){
    $('input').on('input',function(){
        if ($('#password').val() !== '' && $('#useremail').val() !== ''){
             $('button').prop('disabled',false);
        }
    }).trigger('input');
});

edited Sep 22, 2015 at 23:38

answered Sep 22, 2015 at 22:50

Joy Biswas

6,5371 gold badge27 silver badges50 bronze badges

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

2 Comments

Junius L Over a year ago

Works, but I have to click on the page before it is enabled.

Joy Biswas Over a year ago

You can trigger input programatically on document.ready() use $('input').trigger('input')

GrafiCode · Accepted Answer · 2015-09-22 22:52:49Z

1

$('#password, #useremail').change( function() {
    if ( $('#password').val()!="" && $('#useremail').val()!="" )
        button.prop('disabled',false);
});

answered Sep 22, 2015 at 22:52

GrafiCode

3,3653 gold badges31 silver badges33 bronze badges

3 Comments

lboshuizen Over a year ago

Can you also explain the OP why and how your solution works?

GrafiCode Over a year ago

well, jquery basically uses css syntax when it comes to selectors, so the most efficient way (i believe) is to bind the "change" event to both elements in the same declaration. the rest is pretty straightforward

lboshuizen Over a year ago

true, but why did't you add this to your answer? :-)

Collectives™ on Stack Overflow

Enable Button if Inputs are not empty jQuery

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related