How can I stop the page from reloading after I click on search button in my E-commerce site?

Question

any Help would be much appreciated?

The problem is that the search button does its function. The page is supposed to only show products which match the keywords of the product and it does only shows the products which match the relevant keywords but it shows it for 0.1 ms and then reloads to show the full page. However, if I just click on a single category tab, Ie Bed/Sofa (in my case). It just shows me the products which are beds or sofa and does not reload. This is the same thing I want for my search button. Edit: I have tried preventDefault and it does not work Please see relevant code below:

index.php

<form class="navbar-form navbar-left">
                <div class="form-group">
                  <input type="text" class="form-control" placeholder="Search" id="search">
                </div>
                <button type="submit" class="btn btn-primary" id="search_btn"><span class="glyphicon glyphicon-search"></span></button>
</form>

action.php

if(isset($_POST["get_seleted_Category"]) || isset($_POST["selectBrand"]) || isset($_POST["search"])){
    if(isset($_POST["get_seleted_Category"])){
        $id = $_POST["cat_id"];
        $sql = "SELECT * FROM products WHERE product_cat = '$id'";
    }else if(isset($_POST["selectBrand"])){
        $id = $_POST["brand_id"];
        $sql = "SELECT * FROM products WHERE product_brand = '$id'";
    }else {
        $keyword = $_POST["keyword"];
        $sql = "SELECT * FROM products WHERE product_keywords LIKE '%$keyword%'";
    }

    $run_query = mysqli_query($con,$sql);
    while($row=mysqli_fetch_array($run_query)){
            $pro_id    = $row['product_id'];
            $pro_cat   = $row['product_cat'];
            $pro_brand = $row['product_brand'];
            $pro_title = $row['product_title'];
            $pro_price = $row['product_price'];
            $pro_image = $row['product_image'];
            echo "
                <div class='col-md-4'>
                            <div class='panel panel-info'>
                                <div class='panel-heading'>$pro_title</div>
                                <div class='panel-body'>
                                    <img src='product_images/$pro_image' style='width:160px; height:250px;'/>
                                </div>
                                <div class='panel-heading'>$.$pro_price.00
                                    <button pid='$pro_id' style='float:right;' id='product' class='btn btn-danger btn-xs'>AddToCart</button>
                                </div>
                            </div>
                        </div>  
            ";
        }
    }

main.js

$("#search_btn").click(function(){
        $("#get_product").html("<h3>Loading...</h3>");
        var keyword = $("#search").val();
        if(keyword != ""){
            $.ajax({
            url     :   "action.php",
            method  :   "POST",
            data    :   {search:1,keyword:keyword},
            success :   function(data){ 
                $("#get_product").html(data);
                if($("body").width() < 480){
                    $("body").scrollTop(683);
                }
            }
        })
        }
    })

Answer 1

You have mentioned button type as "submit". Make it as "button".

 <button type="button" class="btn btn-primary" 
  id="search_btn"><span class="glyphicon glyphicon- 
  search"></span></button>

Answer 2

make sure to execute the prevent default and also set the button as disabled so user cannot click again, on response receieve set the button back enabled

$("#search_btn").click(function(e){
    e.preventDefault();
    $("#search_btn").attr("disabled", true);    

    $("#get_product").html("<h3>Loading...</h3>");
    var keyword = $("#search").val();
    if(keyword != ""){
        $.ajax({
        url     :   "action.php",
        method  :   "POST",
        data    :   {search:1,keyword:keyword},
        success :   function(data){ 
            $("#get_product").html(data);
            if($("body").width() < 480){
                $("body").scrollTop(683);
            }
            $("#search_btn").attr("disabled", false);
        }
    })
    }
})