Нажмите на поле поиска Bootstrap

Я добавил следующий 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, которая будет выполнять фактический поиск. Как?

см. мой ответ ниже.

— 30.05.2018 14:40

Возможный дубликат Действия с HTML-формой и проблемы с отправкой

— 30.05.2018 19:06

@Plexis Я надеюсь, что приведенный ниже код ответит на ваш вопрос. Отметьте его как принятый, если сообщество получит помощь.

— 29.10.2020 00:12

javascript asp.net web bootstrap-4

30.05.2018 14:11

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

2 504

Ответы 4

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>

Форма все еще обновляется

— 30.05.2018 14:24

пожалуйста, напишите свой javascript

— 30.05.2018 14:39

30.05.2018 14:19

Попробуй это. Вам нужно добавить оператор return 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.

30.05.2018 14:37

ее код для этого:

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

30.05.2018 14:42

Удалите встроенный атрибут 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/

30.05.2018 14:53