CODEWITHSUNDEEP
javascriptjquery
wamp
wamp

Reputation: 45

JQuery, Why doesn't this show the button once the input is filled out?

I'm trying to show/hide a button when the input associated with it is empty (search bar in this case).

I'm using this Javascript:

if(!$('.sb-search-input').val()){
    $('.sb-search-submit.button-search').hide();
}
else {
    $('.sb-search-submit.button-search').show();
}

and my HTML:

            <div id="sb-search" class="sb-search">
                <form>
                    <input class="sb-search-input" placeholder="Szukaj..." type="search" value="" name="search" id="search" onkeyup="buttonUp();" required>
                    <input class="sb-search-submit button-search" type="button" value="">
                </form>
                </div>

The sb-search-submit button-search is always disabled and does not get enabled when sb-search-input has a value.

Upvotes: 0

Views: 45

Answers (1)

guest271314
guest271314

Reputation: 1

Try utilizing input event ; e.target.value.length === 0 at if condition ; .trigger() to call input event handler at $(document).ready() alias $(function() {})

$(function() {
$(".sb-search-input").on("input", function(e) {
  if (e.target.value.length === 0) {
    $(".sb-search-submit.button-search").hide();
  } else {
    $(".sb-search-submit.button-search").show();
  }
}).trigger("input")
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="sb-search" class="sb-search">
  <form>
    <input class="sb-search-input" placeholder="Szukaj..." type="search" value="" name="search" id="search" required>
    <input class="sb-search-submit button-search" type="button" value="">
  </form>
</div>

Upvotes: 3

Related Questions