Activating the search feature on Bootstrap by clicking in the

Question

Activating the search feature on Bootstrap by clicking in the

I recently implemented the following Bootstrap 4 HTML structure for a search feature:

    <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>

However, I'm facing an issue where clicking the search button causes the entire page to refresh. Despite adding an OnClick() event bound to a custom function (ss()) which only triggers an alert, the form still refreshes.

I am now looking to bind the search button to a JavaScript function that will handle the actual search functionality. How can I achieve this?

javascript asp.net web bootstrap-4

Answer 1

Answer №1

function greet(){
alert("hello!");
}

<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:greet()"><i class="fa fa-search"></i>search</button>
            </div>
        </div>
    </form>
</div>

Answer 2

function greet(){
alert("hello!");
}

<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:greet()"><i class="fa fa-search"></i>search</button>
            </div>
        </div>
    </form>
</div>

Answer 3

Answer №2

Give this a shot. Make sure to include a return false statement in your JavaScript function and use the return keyword before calling your function.

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>

If you prefer using Jquery, consider looking into the event.preventDefault() method for achieving the same results.

Answer 4

Give this a shot. Make sure to include a return false statement in your JavaScript function and use the return keyword before calling your function.

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>

If you prefer using Jquery, consider looking into the event.preventDefault() method for achieving the same results.

Answer 5

Answer №3

Below is the code snippet:

<!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>

Answer 6

Below is the code snippet:

<!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>

Answer 7

Answer №4

To enhance performance, consider eliminating the inline onclick attribute and opt for a listener on the button instead:

var btn = document.querySelector('button'); // Using a unique `id` for the button is advisable

btn.addEventListener('click', ss);

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

To prevent page reloading, utilize preventDefault rather than return false in conjunction with the code snippet below:

    var btn = document.querySelector('button'); // Opt for a unique `id` for the button to target specifically
    
    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/

Answer 8

To enhance performance, consider eliminating the inline onclick attribute and opt for a listener on the button instead:

var btn = document.querySelector('button'); // Using a unique `id` for the button is advisable

btn.addEventListener('click', ss);

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

To prevent page reloading, utilize preventDefault rather than return false in conjunction with the code snippet below:

    var btn = document.querySelector('button'); // Opt for a unique `id` for the button to target specifically
    
    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/

Activating the search feature on Bootstrap by clicking in the

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Bootstrap 4 split buttons are having issues with proper display

Customize the keyboard on your iPod by replacing the default one with a

Implementing a filter on axios response

Chrome on Android experiences freezing issues with React.js mobile sites

How can I ensure that my columnar div box is responsive on smaller devices with CSS or should I consider using Bootstrap?

Unpacking Objects in JavaScript and TypeScript: The Power of Destructuring

No response observed upon clicking on the li element within the personalized context menu

Combining Ng-model with iOS credit card scanning functionality offers a seamless and

Are JavaScript comments posing a security threat?

What is the best way to include a href link with parameters retrieved through an API in a React application

The build process encountered an error due to the absence of ESLint configuration after the import

It appears that the React State is getting overridden or the setState function is not functioning properly

Navigate through inner divs on iOS using VoiceOver by performing a 3-finger swipe up or down

Learning the basics of JavaScript: Displaying the last number in an array and restarting a function

Why does Typeahead display a JSON object in the input field upon clicking?

Utilize the client-side JavaScript file with ejs framework

Is it possible for this solution to be compatible with IE7 and IE6?

Leveraging Javascript variables in console.log for referencing purposes

Function not currently in operation

Using jQuery AJAX in ASP.NET to invoke a controller's method