JQuery not null with css not woking

Question

I am trying to apply these css in jquery when the input field have some value, I tried these jquery codes, but it's not working.

Please suggest me!

if ($('#user-email').val() != ''){
    $(".email-capt").css({"position":"absolute","margin-top":"0px"});
}

<div class="input-container input-email">
     <button class="btn btn-default email-btn"><span class="glyphicon glyphicon-chevron-right"></span></button>
     <input type="email" required="" value="" tabindex="1" name="name" class="" id="user-email">
     <label for="arrival" class="email-capt">Enter your email to be in the know</label>
</div>

Is this piece of code is working on button click? What is the error you are getting? — Samir
– Samir, Commented Jan 9, 2017 at 8:55

Pranjal · Accepted Answer · 2017-01-09 08:02:21Z

1

function checkFilled() {
    var inputVal = document.getElementById("subEmail");
    if (inputVal.value == "") {
        inputVal.style.backgroundColor = "yellow";
    }
    else{
        inputVal.style.backgroundColor = "green";
    }
}

checkFilled();

<input type="text" id="subEmail" onchange="checkFilled();">

answered Jan 9, 2017 at 8:02

Pranjal

1,1461 gold badge7 silver badges18 bronze badges

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

Comments

GROVER. · Accepted Answer · 2017-01-09 08:05:27Z

1

You need to check when your input field's value is changing. At the moment, you are checking when the DOM loads.

Try this out, instead:

$("#user-email").change(function(){ // on input value change  
    if($.trim($(this).val()) != ''){
        $(".email-capt").css({"position":"absolute", "margin-top":"0px"});
    }
});

If you want to check when the button is clicked, you can do something like this:

$(".email-btn").click(function(){ // if button is clicked
    if($.trim($(this).val()) != ''){
        $(".email-capt").css({"position":"absolute", "margin-top":"0px"});
    }
});

edited Jan 9, 2017 at 8:05

answered Jan 9, 2017 at 8:00

GROVER.

4,4082 gold badges31 silver badges78 bronze badges

Comments

Advaith · Accepted Answer · 2017-01-09 08:02:47Z

$('button').click(function() {
  if ($('#user-email').val() != ''){
    $(".email-capt").css({"display":"block","color":"red"});
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="input-container input-email">
     <button class="btn btn-default email-btn">Click</button>
     <input type="email" required tabindex="1" name="name" id="user-email">
     <label for="arrival" class="email-capt" style="display:none;">Enter your email to be in the know</label>
</div>

The problem was that, the js code only runs one time when the page is loaded.
You need to define that onClick of the button the code should run. For that use this -- $('button').click(function() {...});

Collectives™ on Stack Overflow

JQuery not null with css not woking

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related