Css change on value change in input field. jQuery

Question

var footerEmail = $('footer#footer input.email');
        var footerEmailLength = footerEmail.val().length;
        var footerEmailCaptcha = $("footer#footer .captcha-hide");

        footerEmail.focus( function() {
            footerEmailCaptcha.css("display","block");
        });


        footerEmail.blur( function() {
            if(footerEmailLength > 0) {
                footerEmailCaptcha.css("display","block");
            }
            else if (footerEmailLength == 0) {
                footerEmailCaptcha.css("display","none");
            }
        });

.captcha-hide {
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<footer id="footer">
  <input class='email'>
  <div class="captcha-hide">Testing</div>
</footer>

I want to make sure that onblur works when I enter something inside the text (input) field.

First if condition inside the blur function is not working since it is taking the value as '0' which will be initially. When I enter something and click outside of the input field then the css should be display:block

Please guide me how I can proceed further. I am new to jQuery/Javascript. Googling around to learn stuff.

Its kinda hard for us to help you specific without seeing all relevant code, HTML CSS — Carsten Løvbo Andersen
– Carsten Løvbo Andersen, Commented Apr 25, 2018 at 9:09
Your selectors are ridiculously long. As id should be unique within the DOM you can shorten it to #footer-subscriber-form .form-item-mail input.email at most, probably even less than that. Caching the object would help too — Rory McCrossan
– Rory McCrossan, Commented Apr 25, 2018 at 9:10
You're already creating a footerEmail variable. Why not use it in subsequent code instead of repeating that overly long selector? — Robby Cornelissen
– Robby Cornelissen, Commented Apr 25, 2018 at 9:11

Deepu Reghunath · Accepted Answer · 2018-04-25 09:34:32Z

1

you have to give the var footerEmailLength = footerEmail.val().length; inside blur function.

The blur function should be like this:

footerEmail.blur( function() {
        var footerEmailLength = footerEmail.val().length;
        if(footerEmailLength > 0) {
            footerEmailCaptcha.css("display","block");
        }
        else if (footerEmailLength == 0) {
            footerEmailCaptcha.css("display","none");
        }

And if you use class as selector then change the footerEmail.val().length to footerEmail[0].val().length.

The running code

var footerEmail = $('.email');
        
        var footerEmailCaptcha = $(".captcha-hide");


footerEmail.focus( function() {
            footerEmailCaptcha.css("display","block");
        });


        footerEmail.blur( function() {
            var footerEmailLength = footerEmail[0].val().length;
            if(footerEmailLength > 0) {
                footerEmailCaptcha.css("display","block");
            }
            else if (footerEmailLength == 0) {
                footerEmailCaptcha.css("display","none");
            }
        });

.captcha-hide {
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<footer id="footer">
  <input class='email'>
  <div class="captcha-hide">Testing</div>
</footer>

edited Apr 25, 2018 at 9:34

answered Apr 25, 2018 at 9:26

Deepu Reghunath

10.1k2 gold badges42 silver badges48 bronze badges

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

1 Comment

Naveen L Bhandari Over a year ago

Thank you. It worked like a charm. It made sense to me now.

Collectives™ on Stack Overflow

Css change on value change in input field. jQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related