Поиск на сайте и Masonry - PHP, JAVASCRIPT

@Шалун · Регистрация: 27.02.2017

Студворк — интернет-сервис помощи студентам

После того как я добавила вот этот код, кнопка "поиск" перестала переадресовывать на страницу searh.php (при заполненном поле). При пустом остается на той же странице (как и надо). Помогите, пожалуйста, найти ошибку

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(function(){
$('#test_form').submit(function(e){
//отменяем стандартное действие при отправке формы
e.preventDefault();
//берем из формы метод передачи данных
var m_method=$(this).attr('method');
//получаем адрес скрипта на сервере, куда нужно отправить форму
var m_action=$(this).attr('action');
//получаем данные, введенные пользователем в формате input1=value1&input2=value2...,
//то есть в стандартном формате передачи данных формы
var m_data=$(this).serialize();
var input_search = $("input#search").val(); // получение значения элемента, содержащего фразу для поиска
if (input_search=='') return; // если оно пустое, не отправляем форму
$.ajax({
type: m_method,
url: m_action,
data: m_data,
success: function(result){
$('#container').html(result);
}
});
});
});

вот весь код:

1.php

HTML5
1
2
3
4
<form action="/search.php" name="search" method="post" class="search" id="test_form">
  <input type="search" name="query" placeholder="поиск" class="input" maxlength="100"/>
  <input type="submit" name="" value="" class="submit" />
</form>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(function(){
$('#test_form').submit(function(e){
//отменяем стандартное действие при отправке формы
e.preventDefault();
//берем из формы метод передачи данных
var m_method=$(this).attr('method');
//получаем адрес скрипта на сервере, куда нужно отправить форму
var m_action=$(this).attr('action');
//получаем данные, введенные пользователем в формате input1=value1&input2=value2...,
//то есть в стандартном формате передачи данных формы
var m_data=$(this).serialize();
var input_search = $("input#search").val(); // получение значения элемента, содержащего фразу для поиска
if (input_search=='') return; // если оно пустое, не отправляем форму
$.ajax({
type: m_method,
url: m_action,
data: m_data,
success: function(result){
$('#container').html(result);
}
});
});
});

search.php

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
 <HTML>
 <head>
  <title>Поиск</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
  <script src="/js/masonry.pkgd.min.js"></script>
 
 </head>
 
<body>
 
<?php 
define('DB_HOST', 'localhost');
define('DB_USER', 'WOW');
define('DB_PASS', '');
define('DB_NAME', 'WOW');
 
 
if (!mysql_connect(DB_HOST, DB_USER, DB_PASS)) {
    exit('Cannot connect to server');
}
if (!mysql_select_db(DB_NAME)) {
    exit('Cannot select database');
}
 
mysql_query('SET NAMES utf8');
 
function search ($query) 
{ 
    $query = trim($query); 
    $query = mysql_real_escape_string($query);
    $query = htmlspecialchars($query);
 
    
  $q = "( SELECT * FROM Ho WHERE `images` LIKE '%".$query."%' OR `title` LIKE '%".$query."%'   )"; 
  $result = mysql_query($q) or die(mysql_error());
    $num = mysql_num_rows($result);
    
 
    echo '<p>По запросу <b>'.$query.'</b> найдено совпадений: '.$num.'</p>';
    echo '<div id="container" class="container">'; 
    while ($row=mysql_fetch_array($result)) {
        echo '
        <div class="item">
            <a href="#" class="im"><img src="'.$row['images'].'"></a>
            <div class="title"><a href="#" class="title">'.$row['title'].'</a></div>
        </div>';          
    }
    echo '</div>'; 
    return; 
}
 
 
if (isset($_POST['query'])) {
    search ($_POST['query']);     
}
?>
 
 
 
<script type="text/javascript">
 
  var container = document.querySelector('#container');
  var msnry = new Masonry(container, {
    columnWidth: 325,
    itemSelector: '.item',
    gutter: 20
  });
  
</script>
 
</body>
</html>

JavaScript
1
2
3
4
5
6
  var container = document.querySelector('#container');
  var msnry = new Masonry(container, {
    columnWidth: 325,
    itemSelector: '.item',
    gutter: 20
  });

ytf · 06.11.2017, 23:50

JavaScript
1
$.ajax

выполняет запрос и результат помещает в контейнер

JavaScript
1
$('#container').html(result);

если нужно переместить пользователя не используйте ajax

JavaScript
1
2
3
4
5
6
7
8
9
$(function(){
$('#test_form').submit(function(e){
//отменяем стандартное действие при отправке формы
e.preventDefault();
var input_search = $("input#search").val(); // получение значения элемента, содержащего фразу для поиска
if (input_search=='') return; // если оно пустое, не отправляем форму
$(this).submit(); // отправка формы
});
});

@Шалун · 07.11.2017, 00:18 **[ТС]**

ytf, вопрос все еще остается актуальным.. .
При пустом поле и нажатии на кнопку "поиск" - ничего не происходит (так надо), НО
при заполненном поле и нажатии на кнопку "поиск" - также ничего не происходит (не выводит данные поиска)(этого не нужно)

ytf · 07.11.2017, 00:46

JavaScript
1
2
3
4
5
6
7
8
9
10
$(function(){
$('#test_form').submit(function(e){
var input_search = $("input[type=search]").val(); // получение значения элемента, содержащего фразу для поиска
if (input_search=='') { 
   // если оно пустое
   e.preventDefault(); //отменяем стандартное действие (отправку) при отправке формы
   return; 
}
});
});

@Шалун · 07.11.2017, 00:47 **[ТС]**

ytf, спасибо Вам огромное!!!!

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Шалун -4 / 1 / 2 Регистрация: 27.02.2017 Сообщений: 205
	07.11.2017, 00:18 [ТС]
	ytf, вопрос все еще остается актуальным.. . При пустом поле и нажатии на кнопку "поиск" - ничего не происходит (так надо), НО при заполненном поле и нажатии на кнопку "поиск" - также ничего не происходит (не выводит данные поиска)(этого не нужно) 0

@Шалун -4 / 1 / 2 Регистрация: 27.02.2017 Сообщений: 205
	07.11.2017, 00:47 [ТС]
	ytf, спасибо Вам огромное!!!! 0