jquery not adding class when inputs are not empty

Question

I am creating a simple function which shows a login button when both inputs are not empty, however, jQuery does not seem to want to allow me.

I have checked to make sure the jQuery API that I am using is up to date and correct, but nothing seems to be out of the ordinary.

jQuery:

$(document).ready(function(){
    var u = $.trim($("#_jq-loC1").val());
    var p = $.trim($('#_jq-loC2').val());
    var l = $('#_jq-slO1');

    if(u.length > 0 && p.length > 0) {
        l.addClass('slO1');
    } else {
        l.removeClass('slO1');
    }
});

HTML:

<input type="text" name="username" id="_jq-loC1" placeholder="Username" autocomplete="off">
<input type="password" name="password" id="_jq-loC2" placeholder="Password" autocomplete="off">
<input style="width: 0.1px; height:0.1px; opacity: 0; overflow: hidden;" id="login" type="submit" value="">
<div class="send-login-container">
    <label class="send-login" id="_jq-slO1" for="login"></label>
</div>

CSS:

.slO1{
    width: 54px;
}

Cheers.

Try with $(l).addClass('slO1');

Mohammad Mahmudul Hasan
– Mohammad Mahmudul Hasan

2016-07-24 11:27:08 +00:00
Commented Jul 24, 2016 at 11:27 — Mohammad Mahmudul Hasan
– Mohammad Mahmudul Hasan, Commented Jul 24, 2016 at 11:27
@MdDinar didn't work, sorry :/

GROVER.
– GROVER.

2016-07-24 11:27:58 +00:00
Commented Jul 24, 2016 at 11:27 — GROVER.
– GROVER., Commented Jul 24, 2016 at 11:27
Your code work fine. See jsfiddle

Mohammad
– Mohammad

2016-07-24 11:30:12 +00:00
Commented Jul 24, 2016 at 11:30 — Mohammad
– Mohammad, Commented Jul 24, 2016 at 11:30
How are you tracking the change? Where is the event I mean?

Mohammad Mahmudul Hasan
– Mohammad Mahmudul Hasan

2016-07-24 11:34:29 +00:00
Commented Jul 24, 2016 at 11:34 — Mohammad Mahmudul Hasan
– Mohammad Mahmudul Hasan, Commented Jul 24, 2016 at 11:34

Elorfin · Accepted Answer · 2016-07-24 11:31:59Z

2

That's because your code is only executed on the page load. So if you change the content of your inputs later, nothing will be executed.

You need to watch changes in your inputs.

In your $(document).ready() you can replace your code by :

var toggleSubmit = function () {
    var u = $.trim($("#_jq-loC1").val());
    var p = $.trim($('#_jq-loC2').val());
    var l = $('#_jq-slO1');

    if(u.length > 0 && p.length > 0) {
        l.addClass('slO1');
    } else {
        l.removeClass('slO1');
    }
};

$('#_jq-loC1').on('change', function () {
    toggleSubmit();
});

$('#_jq-loC2').on('change', function () {
    toggleSubmit();
});

// Check on page load
toggleSubmit();

answered Jul 24, 2016 at 11:31

Elorfin

2,4972 gold badges28 silver badges50 bronze badges

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

2 Comments

GROVER. Over a year ago

Hi, it is semi-working.. The user will have to click off of one of the inputs to display the login button. How would I make it so that they only have to enter something into both fields? :)

Elorfin Over a year ago

You can bind to the keyup event instead of change. The verification will be done each time the user will type something.

Aleksandar Đokić · Accepted Answer · 2016-07-24 11:38:58Z

Problem is because you are attaching functions on document.ready, you have to do it on text field changes. I'm giving you solution on fiddle. You can try it

$('#_jq-loC2,#_jq-loC1').on('change',function() {
    var u = $.trim($("#_jq-loC1").val());
    var p = $.trim($('#_jq-loC2').val());
 
    if(u.length > 0 && p.length > 0) {
       alert('Do someting');
    } else {
       //to do something if empty
    }
});

.slO1{
    width: 54px;
}

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>

<input type="text" name="username" id="_jq-loC1" placeholder="Username" autocomplete="off">
<input type="password" name="password" id="_jq-loC2" placeholder="Password" autocomplete="off">
<input style="width: 0.1px; height:0.1px; opacity: 1; overflow: hidden;" id="login" type="submit" value="Submit">
<div class="send-login-container">
    <label class="send-login" id="_jq-slO1" for="login"></label>
</div>
</body>

</html>

Sam · Accepted Answer · 2016-07-24 11:28:34Z

-1

Try with

if( (u.length > 0) && (p.length > 0) ) {
  // Code
}

As far as I know, the AND selector wants two statements, so you have to group your expression together.

answered Jul 24, 2016 at 11:28

Sam

2735 silver badges17 bronze badges

2 Comments

GROVER. Over a year ago

I'm almost certain that isn't required.. But, I'll try it anyway

Elorfin Over a year ago

That's not needed and also considered as a bad practice. u.length > 0 is a single expression.

Collectives™ on Stack Overflow

jquery not adding class when inputs are not empty

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related