How to use href in javascript

Question

I am making a search option in my web application which I code like this

<div class="form-group form-group-search" style="margin-top:1.5em;">
    <div class="input-group" style="width:92%; margin:auto">
        <input id="txt-search" type="text" class="form-control" placeholder="Search Keyword..." />
        <span class="input-group-btn">
            <a class="btn btn-default" id ="btn-search" data-toggle="tab" href="#div-search">
            <span class="fa fa-search"></span></a>
        </span>
    </div>
</div>

and I have this div that displays depends on the href of a link

<div id="div-search" class="tab-pane fade">
    <section class="content-header">
        <h1><i class="fa fa-search"></i><span style="margin-left:.3em;">Result</span>
        </h1>
    </section>
    <section class="content container-fluid">
        <div class="col-sm-3">
            <span> search </span>
        </div>
    </section>
</div>
<div id="div-home" class="tab-pane fade">
    <section class="content-header">
        <h1><i class="fa fa-home"></i><span style="margin-left:.2em;">Home</span>
        </h1>
    </section>

    <section class="content container-fluid">
        <div class="row">
            <div class="col-sm-12" style="text-align:center;">
                <div style="border-top:2px solid #555555; width:70%; margin:auto;"></div>
            </div>
        </div>
        <div class="row" style="margin-top:1em;">
            <div class="col-sm-12" style="text-align:center;">
            Description
            </div>          
        </div>
    </section>
</div>

but what I want to do is if the #txt-search is empty or null or "" the div-search will not display. And it will do nothing. I tried window.location but it's not what i want.

Ideally if #txt-search is not equal to "" it will do nothing.

$(document).on("click", "#btn-search", function () {

    if ($("#txt-search").val() != ""){
        $(".sidebar-menu > li").removeClass("active");
        $(".sidebar-menu > li:nth-child(4)").removeClass("menu-open");
        $(".treeview-menu").slideUp();
    } 
    else{
    }
});

Answer 1

You can do something like this. Using hide() and show() function

$(function(){
    $('#btn-search').click(function(){
        var input = $('#txt-search').val();
        if(typeof input === 'undefined' || input == null || input == ''){
            $('#div-search').hide();
        } else {
            $('#div-search').show();
            // You want...
        }
    })  
});

Answer 2

You can try something like this. Please check below code:

Change HTML

<div class="form-group form-group-search" style="margin-top:1.5em;">
    <div class="input-group" style="width:92%; margin:auto">
        <input id="txt-search" type="text" class="form-control" placeholder="Search Keyword..." />
        <span class="input-group-btn">
            <a class="btn btn-default" id ="btn-search" data-toggle="tab" href="javascript:void(0)">
            <span class="fa fa-search"></span></a>
        </span>
    </div>
</div>

jQuery

$(document).on("click", "#btn-search", function () {

    if ($("#txt-search").val() == "")
    {
        console.log('working');
    } else{
        $('#div-search').show();
        //$('#div-search').addClass('in'); //if you use bootstrap
        //write your code
    }

});

Answer 3

You can hide and show div with hide() and show() in Jquery

$('#btn-search').click(function(){
  if($("#txt-search").val() !== ""){
    $('#div-search').hide();
  } else {
    $('#div-search').show()
  }
});