CODEWITHSUNDEEP
javascriptjquery
Valen Tin
Valen Tin

Reputation: 169

how to preventDefault jquery when click on search

How to close when click everywhere and not close when click on class form-cauta ? 

    $("body").on("click",function(){
        $("#searchresult").css("display","none");
    });
    $(".form-cauta , #search , #cauta").on("click",function(){
        $("#searchresult").css("display","block");
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form class="form-cauta" action="{{URL("search")}}">
    <input type="text" id="search" name="search" placeholder="Cauta" autocomplete="off"/>
    <button type="submit" id="cauta">
        <span class="glyphicon glyphicon-search"></span>
    </button>
</form> This is body
<div class='searchresult' id="searchresult">
    <ul class='listitemsresult' id='itemssearch'>
    <li>dsasdasdasad</li>
    <li>dsasdasdasad</li>
    <li>dsasdasdasad</li>
    <li>dsasdasdasad</li>
    <li>dsasdasdasad</li>
    </ul>
</div>

How to close when click everywhere and not close when click on class form-cauta ?

Upvotes: 0

Views: 185

Answers (2)

Vindhyachal Kumar
Vindhyachal Kumar

Reputation: 1794

Check this working code.

$().ready(function(){
        $("body").on("click",function(){
            $("#searchresult").css("display","none");
        });
        $(".form-cauta , #search , #cauta").on("click",function(){
            $("#searchresult").css("display","block");
        });

         $(".form-cauta").submit(function (e) {
            e.preventDefault();
        });
    });
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
 </script>
<form class="form-cauta" action="{{URL("search")}}">
    <input type="text" id="search" name="search" placeholder="Cauta" autocomplete="off"/>
    <button type="submit" id="cauta">
        <span class="glyphicon glyphicon-search"></span>
    </button>
</form> This is body
<div class='searchresult' id="searchresult">
    <ul class='listitemsresult' id='itemssearch'>
    <li>dsasdasdasad</li>
    <li>dsasdasdasad</li>
    <li>dsasdasdasad</li>
    <li>dsasdasdasad</li>
    <li>dsasdasdasad</li>
    </ul>
</div>

Upvotes: 0

Mihailo
Mihailo

Reputation: 4917

You need to pass the event as a parameter for the closure function of form click event.

$(".form-cauta, #search, #cauta").on("click", function(event){
    event.stopPropagation(); // Passing the event and stoping propagation
    $("#searchresult").css("display", "block");
});

JsBin Example

Upvotes: 2

Related Questions