Окно поиска начальной загрузки - PullRequest
Новая
       3

Окно поиска начальной загрузки

0 голосов
/ 30 мая 2018

Я добавил следующий HTML-код с помощью 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>

Когда нажата кнопка поиска, обновляется вся страница, я добавил событие OnClick () и связал его с ss () (пользовательская функцияэто только предупреждает), но форма все еще обновляется.

Мне нужно привязать кнопку поиска к некоторой функции JavaScript, которая будет выполнять фактический поиск.Как?

Ответы [ 4 ]

0 голосов
/ 30 мая 2018

Удалите встроенный атрибут onclick и используйте вместо этого прослушиватель для кнопки, например: 

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

. Чтобы предотвратить перезагрузку страницы, используйте preventDefault вместо return false с указанным вышефрагмент, как это: 

    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/

0 голосов
/ 30 мая 2018

Попробуй это.Вам нужно добавить выражение false в вашу функцию JavaScript и добавить return перед вызовом функции. 

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>

Вы также можете увидеть метод Jquery event.preventDefault (), если вы хотите использовать для этого Jquery.

0 голосов
/ 30 мая 2018

ее код: 

<!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>
0 голосов
/ 30 мая 2018 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...