Javascript !=="" not working right

Question

I have this code :

$(document).ready(function() {
  $('#search').keyup(function() {
    var search = $('#search').val();
    console.log(search);
    if (search.length !== 0 || search !== "") {
      $('.wrapper').css({
        "background-color": "#000",
        "opacity": 0.8
      });
      $('.post').remove();
    } else {
      location.reload(false);
    };
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#">
  <button type="submit">Search</button>
  <input type="text" name="search" id="search" />
</form>

but the problem is that whatever put space at the beginning in the input element, the function is not working (it goes on to run $('.wrapper').css({"background-color":"#000","opacity":0.8}); and $('.post').remove(); ).

just a hint, you could replace the if condition with `if(search) {` — Nina Scholz, Jan 03 '17 at 21:57
What does *"put space at the beginning in the input element"* mean? You mean *entering* a space (as value of the input element)? — Felix Kling, Jan 03 '17 at 21:58
um, if the length is zero, it will be equal to "". Also seems like you need to wait until the input is complete before you check. — epascarello, Jan 03 '17 at 21:58
You should use `&&` to combine `!==` tests, not `||`. See http://stackoverflow.com/questions/26337003/execute-block-if-a-variable-is-not-one-of-some-specific-values — Barmar, Jan 03 '17 at 22:32

limeandcoconut · Answer 1 · 2017-01-03T22:14:32.943

Just add search = search.trim(); before your conditional.

When you are adding a space to the input search is ' ' not '' so a trim is necessary.

Additionally, using:

if (search) {
    ....
}

instead of

if (search.length !== 0 || search !== '') {
    ...
}

Is a simpler check that will give you the same result in this case. Both '' and 0 are 'falsey'.

$(document).ready(function() {
  $('#search').keyup(function() {
    var search = $('#search').val();
    search = search.trim(); //Try adding this line
    console.log(search);
    if (search.length !== 0 || search !== "") {
      $('.wrapper').css({
        "background-color": "#000",
        "opacity": 0.8
      });
      $('.post').remove();
    } else {
      location.reload(false);
    };
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#">
  <button type="submit">Search</button>
  <input type="text" name="search" id="search" />
</form>

Ori Drori · Accepted Answer · 2017-01-03T22:06:41.513

Use String#trim to remove spaces before and after the text:

var search = $('#search').val().trim();

$(document).ready(function() {
  $('#search').keyup(function() {
    var search = $('#search').val().trim();

    if (search) {
      $('.wrapper').css({
        "background-color": "#000",
        "opacity": 0.8
      });
      $('.post').remove();
    } else {
      location.reload(false);
    };

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#">
  <button type="submit">Search</button>
  <input type="text" name="search" id="search" />
</form>

score 0 · Answer 3 · edited Jan 03 '17 at 22:01

0

Just simply use ! or !! to check empty strings:

!"" // true
!!"" // false

edited Jan 03 '17 at 22:01

pwolaq

6,343
19
45

answered Jan 03 '17 at 22:00

Yaser

5,609
1
15
27

lucky.kat · Answer 4 · 2023-02-03T01:13:04.220

You want to execute the code if there is something in that field (aka. not undefined) and whatever is there, it is not blank (aka. not ''). So, do a double check using the 'and' operator ( && ) instead of 'or' ( || ). So try using:

if (search.length !== undefined && search !== '') {
 //execute code
}

In your js code snippet, that would look like this:

$(document).ready(function() {
  $('#search').keyup(function() {
    var search = $('#search').val();
    console.log(search);
    if (search !== undefined && search !== "") {
      $('.wrapper').css({
        "background-color": "#000",
        "opacity": 0.8
      });
      $('.post').remove();
    } else {
      location.reload(false);
    };
  });
});

Javascript !=="" not working right

4 Answers4