Question 15117 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How can I check if input is <=2 or undefined with jQuery?

The length <= 2 check is working ONLY if I’m manually erasing the text from the input.
However, My input has closing button which has reset(); on it, and when I’m pressing it, my input is empty, however jquery code doesnt care about that and doesnt recognise the input as empty, because as I know the reset(); function turns my input form to undefined.. so I have to check the input for undefined in my jQuery, however it doesn’t work. any clues??

<script>
    $('.regulator').keyup(function() {
      
      if ($(this).val().length <= 2 || $(this).val().value == undefined) {
        $('.quickSearchResults').hide();
      }  else {
        $('.quickSearchResults').show();
      }
    }).keyup();
    </script>
Tags:

2

Answers


  1. 0

    I suggest you use this instead:

    1. use .on("input" since it handles paste too
    2. reuse the toggle function on click, on input and on load
    3. add a timeout on the reset
    $(function() {
  const $reg = $('.regulator');
  const $qs = $('.quickSearchResults');
  const $rst = $("#rst");
  const toggleQS = () => {
    const val = $reg.val();
    $qs.toggle(val.length > 2);
  };
  $reg.on("input", toggleQS);
  $rst.on("click", () => setTimeout(toggleQS,10));
  toggleQS(); // in case there is data already
})
    .quickSearchResults {
  display: none;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
  <input class="regulator" id="someId" name="someName" value="More than 2" />
  <input type="reset" id="rst" />
</form>
<div class="quickSearchResults">Results</div>
    Login or Signup to reply.
  2. 0

    There is really no reason to check for undefined if you are using the value of the input the user is typing in. .val() is not going to return undefined when the user is interacting with it.

    $('.regulator').keyup(function() {
  
  if ($(this).val().length <= 2) {
    $('.quickSearchResults').hide();
  }  else {
    $('.quickSearchResults').show();
  }
}

    Now if you really want to check for undefined, do that check first

    $('.regulator').keyup(function() {
  var val = $(this).val()
  if (val === undefined || val.length <= 2) {
    $('.quickSearchResults').hide();
  }  else {
    $('.quickSearchResults').show();
  }
}

    how most people would code this

    $('.regulator').on('input', function() {
    $('.quickSearchResults').toggle(val.length > 2);
}).trigger('input');

    Now to handle reset, listen to the event.

    $('#yourForm').on("reset", function () {
  $('.quickSearchResults').hide();
});

    or

    $('#yourForm').on("reset", function () {
  window.setTimeout(function () {
    $('.regulator').trigger('input');
  });
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search