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{
    }
});

The hash sign with a word is called a "fragment" and it's used to address elements within a document. That aside, please also post your relevant JavaScript code — Hugo G
– Hugo G, Commented Jan 11, 2018 at 4:00
You might also want to strip all unrelevant HTML from your sample so it's easier for people to review — Hugo G
– Hugo G, Commented Jan 11, 2018 at 4:02

Md. Shahidul Islam · Accepted Answer · 2018-01-11 04:27:41Z

1

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
    }

});

answered Jan 11, 2018 at 4:27

Md. Shahidul Islam

3303 silver badges12 bronze badges

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

Comments

Duke · Accepted Answer · 2018-01-11 04:08:36Z

1

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()
  }
});

answered Jan 11, 2018 at 4:08

Duke

3532 silver badges13 bronze badges

Comments

Pravin Vavadiya · Accepted Answer · 2018-01-11 04:35:06Z

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...
        }
    })  
});

edited Jan 11, 2018 at 4:35

answered Jan 11, 2018 at 4:01

Pravin Vavadiya

3,2071 gold badge19 silver badges34 bronze badges

Collectives™ on Stack Overflow

How to use href in javascript

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