Bootstrap search box click

Question

I added the following HTML using Bootstrap 4

    <div class="col-sm-3 col-md-3 search-header">
    <form class="navbar-form" role="search">
        <div class="input-group">
            <input type="text" class="form-control search-box " placeholder="Search" name="srch-term" id="srch-term">
            <div class="input-group-btn">
                <button class="btn btn-default btn-search" onclick="ss()"><i class="glyphicon glyphicon-search"></i></button>
            </div>
        </div>
    </form>
</div>

When the search button is clicked, the whole page refreshes, I added the OnClick() event and bind it to ss() (a custom function that only alerts) but the form still refreshing.

I need to bind the search button to some JavaScript function, that will do the actual search. How to?

Possible duplicate of [HTML form action and onsubmit issues](https://stackoverflow.com/questions/16262797/html-form-action-and-onsubmit-issues) — mahan, May 30 '18 at 17:06
@Plexis I hope the code below answers you question.Mark it as accepted one the commuity will get help. — Nikhil S, Oct 28 '20 at 23:12

score 1 · Answer 1 · answered May 30 '18 at 12:19

function ss(){
alert("hiiiii");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-sm-3 col-md-3 search-header">
    <form class="navbar-form" role="search">
        <div class="input-group">
            <input type="text" class="form-control search-box " placeholder="Search" name="srch-term" id="srch-term">
            <div class="input-group-btn">
                <button class="btn btn-default btn-search" onclick="javascript:ss()"><i class="fa fa-search"></i>search</button>
            </div>
        </div>
    </form>
</div>

The form still refresh – Plexis Plexis May 30 '18 at 12:24 — Plexis Plexis, May 30 '18 at 12:24
please write your javascript – Hardik Prajapati May 30 '18 at 12:39 — Hardik Prajapati, May 30 '18 at 12:39

score 1 · Answer 2 · answered May 30 '18 at 12:37

Try this. You need to add a return false statement to your JavaScript function and add return before your function call.

function ss(){
alert("hiiiii");
return false;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-sm-3 col-md-3 search-header">
    <form class="navbar-form" role="search">
        <div class="input-group">
            <input type="text" class="form-control search-box " placeholder="Search" name="srch-term" id="srch-term">
            <div class="input-group-btn">
                <button class="btn btn-default btn-search" onclick="return ss();"><i class="fa fa-search"></i>search</button>
            </div>
        </div>
    </form>
</div>

You may also see Jquery event.preventDefault() Method if you want to use Jquery for this.

score 1 · Answer 3 · answered May 30 '18 at 12:42

hers is the code for it:

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
    </style>
</head>

<body>
    <div class="col-sm-3 col-md-3 search-header">
        <form class="navbar-form" role="search">
            <div class="input-group">
                <input type="text" class="form-control search-box " placeholder="Search" name="srch-term" id="srch-term">
                <div class="input-group-btn">
                        <button class="btn btn-default search"onclick="return myFunction()">Click me</button><i class="glyphicon glyphicon-search"></i></button>
                </div>
            </div>
        </form>
    </div>
<script>
function myFunction() {
   alert ("hiiiiiiiiiiii");
   return false;
}

</script>
</body>

</html>

AndrewL64 · Answer 4 · 2018-05-30T12:58:45.120

Remove the inline onclick attribute and use a listener on the button instead like this:

var btn = document.querySelector('button'); // I would recommend using a unique `id` for the button and targetting that instead

btn.addEventListener('click', ss);

function ss(){
    alert('hello');
}

And to prevent the page from reloading, use preventDefault instead of return false with the above snippet like this:

    var btn = document.querySelector('button'); // I would recommend using a unique `id` for the button and targetting that instead
    
    btn.addEventListener('click', ss);
    
    function ss(e){
        alert('hello');
        e.preventDefault();
    }

<form class="navbar-form" role="search">
    <div class="input-group">
        <input type="text" class="form-control search-box " placeholder="Search" name="srch-term" id="srch-term"/>
        <div class="input-group-btn">
            <button class="btn btn-default btn-search"><i class="glyphicon glyphicon-search"></i></button>
        </div>
    </div>
</form>

jsFiddle: https://jsfiddle.net/AndrewL64/n7s90pgt/1/

Bootstrap search box click

4 Answers4