При выборе элемента <select> автоматически делать выборку из БД

@Storkfork · Регистрация: 11.11.2016

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

Как сделать так, чтоб при выборе пункта из <select> автоматически (без нажатия кнопки) из БД делалась выборка всех полей с этим выбранным значением?

Файл формы:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<form method="POST" action="" enctype="multipart/form-data">
    <table>
    <tr>
        <td>Вид документа <select name='type' id="type" onchange="alert(this.options[this.selectedIndex].value);">
                                                  <option value = "1">Проекты</option>
                                                  <option value = "2">Решения</option>
                              <option value = "3">Распоряжения</option></select></td>
        <td>Документ № <input value="" name="number" type="text"></td>
        <td>Содержание<input value="" name="art_cont" type="text"></td>
        <td>Сессия <select name='session'><option>Внеочередная</option>
                                        <option>1</option>
                                        <option>2</option>
                                        <option>3</option>
                                        <option>4</option>
                                            </select></td>
        <td>Дата создания: <input value="" name="date_art" type="date"></td>
     </tr>
     </table>
        <input name="upfile" type="file">
        <input type="submit" value="Загрузить" class="form button">
</form>

Запрос на добавление нового элемента:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    $db = mysql_connect($db_host,$db_user,$db_password) OR DIE("Ошибка.");
    mysql_select_db("mydb",$db);
 
    $resultat = mysql_query("SELECT * FROM `mytable`"); 
    
    if (isset($_FILES["upfile"])){
        $file_name = $_FILES['upfile']['name'];
        $up = move_uploaded_file($_FILES['upfile']['tmp_name'], $file_name); 
            if($up){
                $result = mysql_query ("INSERT INTO `mytable`(`type`, `number`, `art_cont`, `session`, `date_art`, `file_name`) VALUES ('$type', '$number ', '$art_cont', '$session', '$date_art', '$file_name')");
                if($result){
                    echo "<script>window.location.reload(\"true\")</script>";
                }
            }
    }

@fanatikus · 15.11.2016, 17:20

1. повесить на select change,
2.аяксом отправить данные на сервер
3. (PHP) выбрать данные, сформировать как нужно и отправить на клиент
4. вывести данные

@Storkfork · 15.11.2016, 17:22 **[ТС]**

Сообщение от fanatikus

1. повесить на select change,
2.аяксом отправить данные на сервер
3. (PHP) выбрать данные, сформировать как нужно и отправить на клиент
4. вывести данные

Можно как-то на примере показать, пожалуйста? А то я с аяксом вообще не сталкивалась, да и вообще новичок

@fanatikus · 15.11.2016, 17:46

в общих чертах, как-то так

HTML5
1
2
3
4
5
6
7
<form name="form">
    <select name="sel" id="sel">
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
</form>
<div id="res"></div><!--тут выведем ответ с сервера-->

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    $(function(){
        $('#sel').change(function(){
            var val = $(this).val(); //значение option
            $.ajax({
                type:'post',
                url:'select_all_php.php',//обработчик php
                data:'value='+val,//передаем значение option. на сервере будет доступно $_POST['value'}
                success:function(result){// получаем ответ с сервера
                    $('#res').html(result);//выводим на стнанице
                }
                
            })
            console.log($(this).val());
        })
    })

обработчик

PHP
1
2
echo "Выбран option с значением - ".$_POST['value'];
// вы же, достаете данные из базы, формируете как нужно и отправляете на клиент

@Storkfork · 15.11.2016, 17:57 **[ТС]**

fanatikus, делаю так, как вы подсказали, но что-то не выводит ничего.

@fanatikus · 15.11.2016, 18:04

Сообщение от Storkfork

делаю так, как вы подсказали, но что-то не выводит ничего

значит что-то не так.
jquery, подключили?
покажите код

@Storkfork · 17.11.2016, 09:32 **[ТС]**

Сообщение от fanatikus

значит что-то не так.
jquery, подключили?
покажите код

Простите, не сразу разобралась с подключением Jquery. Всё работает, спасибо большое за помощь!

Добавлено через 24 минуты
fanatikus, и ещё один вопрос... При выполнении ваш код дублирует информацию на странице. Как сделать так, чтоб этого не было?

@fanatikus · 17.11.2016, 13:36

Сообщение от Storkfork

При выполнении ваш код дублирует информацию на странице.

не понял, что значит дублирует?

Добавлено через 1 минуту
вы, это имели в виду?

Сообщение от fanatikus

echo "Выбран option с значением - ".$_POST['value'];

@Storkfork · 17.11.2016, 14:04 **[ТС]**

Сообщение от fanatikus

не понял, что значит дублирует?

На странице есть таблица и поле ввода. А после того, как я нажимаю на пункт выпадающего списка, на странице уже отображается две таблицы и поля ввода.

@fanatikus · 17.11.2016, 14:10

Сообщение от Storkfork

А после того, как я нажимаю на пункт выпадающего списка, на странице уже отображается две таблицы и поля ввода

в моем коде, нет такого функционала. покажите свой код

@Storkfork · 17.11.2016, 14:28 **[ТС]**

fanatikus,

PHP/HTML
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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<html>
<head><script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script></head>
<body>
<form method="POST" action="" enctype="multipart/form-data">
    <table>
    <tr>
        <td>Вид документа <select name='type' id="type">
                                                  <option>-</option>
                                                  <option value = "Проекты">Проекты</option>
                                                  <option value = "Решения администрации">Решения администрации</option>
                                                  <option value = "Приказы">Приказы</option>
                                                  <option value = "Распоряжения">Распоряжения</option></select></td>
        <td>Документ № <input value="" name="number" type="text"></td>
        <td>Содержание <input value="" name="art_cont" type="text"></td>
        <td>Сессия <select name='session'><option>Внеочередная</option>
                                        <option>1</option>
                                        <option>2</option>
                                        </select></td>
        <td>Дата создания: <input value="" name="date_art" type="date"></td>
     </tr>
     </table>
        <input name="upfile" type="file">
        <input type="submit" value="Сохранить" class="form button">
</form>
<div id="res"></div>
<table border="1px" cellspacing="0">
    <tr>
        <th>Вид документа</th>
        <th>Номер документа</th>
        <th>Сессия</th>
        <th>Дата создания</th>
        <th width='45%'>Содержание</th>
        <th>Дата обновления</th>
    </tr>
 
    
    
<script>
$(function(){
        $('#type').change(function(){
            var val = $(this).val(); //значение option
            $.ajax({
                type:'post',
                
                data:'value='+val,//передаем значение option. на сервере будет доступно $_POST['value'}
                success:function(result){// получаем ответ с сервера
                    $('#res').html(result);//выводим на стнанице
                }
                
            })
            console.log($(this).val());
        })
    })
</script>
 
 
    <?php 
    
    
    $db_host = "localhost"; 
    $db_user = "root"; 
    $db_password = ""; 
    $db_table = "mytable";
    
    $type = $_POST['type'];
    $number = $_POST['number'];
    $art_cont = $_POST['art_cont'];
    $session = $_POST['session'];    
    $date_art = $_POST['date_art'];
    
    $db = mysql_connect($db_host,$db_user,$db_password) OR DIE("Ошибка.");
    mysql_select_db("mydb",$db);
 
    $resultat = mysql_query("SELECT * FROM `mytable`"); 
 
    $value = mysql_query("SELECT * FROM `mytable` WHERE `type` = '".$_POST['value']."';");
    while($grow = mysql_fetch_array($value)) {
            echo "<tr><td align='center'>".$grow['type']."</td>";
            echo "<td align='center'>".$grow['number']."</td>";
            echo "<td align='center'>".$grow['session']."</td>";
            echo "<td align='center'>".$grow['date_art']."</td>";
            echo "<td><a href="".$grow['file_name']."">".$grow['art_cont']."</a><br><br><a href="redag.php?number=".$grow['number']."">Редактировать<img src="postedit.gif" title='Редактировать'></a></td>";
        if ($row['date_new']>0) { 
            echo "<td align='center'>От <a href="".$grow['file_new']."">".$grow['date_new']."</a>";
            if ($row['date_new2']>0) {
                echo "<br>От <a href="".$grow['file_new2']."">".$grow['date_new2']."</a>";
                if ($row['date_new3']>0) {
                    echo "<br>От <a href="".$grow['file_new3']."">".$grow['date_new3']."</a></td></tr>";
                }
            }
        }
        else  { 
            echo "<td align='center'>-</td>";
            }
        
    }
 
 
    if (isset($_FILES["upfile"])){
        $file_name = $_FILES['upfile']['name'];
        $up = move_uploaded_file($_FILES['upfile']['tmp_name'], $file_name); 
            if($up){
                $result = mysql_query ("INSERT INTO `mytable`(`type`, `number`, `art_cont`, `session`, `date_art`, `file_name`) VALUES ('$type', '$number ', '$art_cont', '$session', '$date_art', '$file_name')");
                if($result){
                    echo "<script>window.location.reload("true")</script>";
                }
            }
    }  
    while($row = mysql_fetch_array($resultat)) {
            echo "<tr><td align='center'>".$row['type']."</td>";
            echo "<td align='center'>".$row['number']."</td>";
            echo "<td align='center'>".$row['session']."</td>";
            echo "<td align='center'>От ".$row['date_art']."</td>";
            echo "<td><a href="".$row['file_name']."">".$row['art_cont']."</a><br><br><a href="redag.php?number=".$row['number']."">Редактировать<img src="postedit.gif" title='Редактировать'></a></td>";
        if ($row['date_new']>0) { 
            echo "<td align='center'>От <a href="".$row['file_new']."">".$row['date_new']."</a>";
            if ($row['date_new2']>0) {
                echo "<br>От <a href="".$row['file_new2']."">".$row['date_new2']."</a>";
                if ($row['date_new3']>0) {
                    echo "<br>От <a href="".$row['file_new3']."">".$row['date_new3']."</a></td></tr>";
                }
            }
        }
        else  { 
            echo "<td align='center'>-</td>";
            }
        
    } 
    mysql_close($db);
    
    ?>
   
</table>
</body>
</html>

@fanatikus · 17.11.2016, 15:49

Сообщение от Storkfork

$.ajax({ type:'post', data:'value='+val,//передаем значение option. на сервере будет доступно $_POST['value'} success:function(result){// получаем ответ с сервера $('#res').html(result);//выводим на стнанице }

вы убрали адрес обработчика. сейчас вы отправляете запрос на эту же страницу, и естественно получаете с сервера дубль и вставляете его на страницу. вот и получается две таблицы.

Добавлено через 2 минуты
в вашем коде, вообще не понятно зачем аякс, если он не используется

@Storkfork · 17.11.2016, 16:04 **[ТС]**

Сообщение от fanatikus

вы убрали адрес обработчика. сейчас вы отправляете запрос на эту же страницу, и естественно получаете с сервера дубль и вставляете его на страницу. вот и получается две таблицы.

В том-то и дело, что я убрала его, так как с ним как раз и было 2 таблицы. Мой файл, который я скидывала выше, называется act.php. Вот я и поменяла url:'select_all_php.php', на url:'act.php'. Но когда так было, то как раз было 2 таблицы.

@fanatikus · 17.11.2016, 16:13

вы хоть немного поняли, как работает аякс?
вы посылаете запрос на сервер, в вашем случае на файл act.php.
все что выводится в этом файле, отсылается на клиент, и там вставляется в <div id='res'></div>

@Storkfork · 17.11.2016, 16:33 **[ТС]**

fanatikus, тогда как сделать так, чтоб не дублировало таблицы? Если просто убрать строчку с url, то оно вообще ничего не выводит.

@fanatikus · 17.11.2016, 16:44

как я понял(если правильно понял) следующий код, это то, что вы хотите вывести через аякс. правильно?

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$value = mysql_query("SELECT * FROM `mytable` WHERE `type` = '".$_POST['value']."';");
    while($grow = mysql_fetch_array($value)) {
            echo "<tr><td align='center'>".$grow['type']."</td>";
            echo "<td align='center'>".$grow['number']."</td>";
            echo "<td align='center'>".$grow['session']."</td>";
            echo "<td align='center'>".$grow['date_art']."</td>";
            echo "<td><a href=\"".$grow['file_name']."\">".$grow['art_cont']."</a><br><br><a href=\"redag.php?number=".$grow['number']."\">Редактировать<img src=\"postedit.gif\" title='Редактировать'></a></td>";
        if ($row['date_new']>0) { 
            echo "<td align='center'>От <a href=\"".$grow['file_new']."\">".$grow['date_new']."</a>";
            if ($row['date_new2']>0) {
                echo "<br>От <a href=\"".$grow['file_new2']."\">".$grow['date_new2']."</a>";
                if ($row['date_new3']>0) {
                    echo "<br>От <a href=\"".$grow['file_new3']."\">".$grow['date_new3']."</a></td></tr>";
                }
            }
        }
        else  { 
            echo "<td align='center'>-</td>";
            }
        
    }

@Storkfork · 17.11.2016, 16:46 **[ТС]**

fanatikus, да, верно.

@fanatikus · 17.11.2016, 16:52

вынесите этот код в отдельный файл и пропишите путь к нему в функции аякс.
не забудьте добавить подключение к базе.

if ($row['date_new2']>0) {

наверно не $row а $grow

@Storkfork · 17.11.2016, 17:46 **[ТС]**

Сообщение от fanatikus

вынесите этот код в отдельный файл и пропишите путь к нему в функции аякс.
не забудьте добавить подключение к базе.

Всё сделала, теперь над старой таблицей появляется новая, та, что мне нужна. Можно ли заменить старую на новую?
Спасибо вам за терпение.

@fanatikus · 17.11.2016, 17:57

вы сразу выводите все данные, а при выборе в селекте, хотите все убрать а вывести только соответствующие выбранному?

Новые блоги и статьи Все статьи Все блоги /
И решил я переделать этот ноут в машину для распределенных вычислений Programma_Boinc 09.11.2025 И решил я переделать этот ноут в машину для распределенных вычислений Всем привет. А вот мой компьютер, переделанный из ноутбука. Был у меня ноут асус 2011 года. Со временем корпус превратился. . .	Мысли в слух kumehtar 07.11.2025 Заметил среди людей, что по-настоящему верная дружба бывает между теми, с кем нечего делить.	Новая зверюга volvo 07.11.2025 Подарок на Хеллоуин, и теперь у нас кроме Tuxedo Cat есть еще и щенок далматинца: Хочу еще Симбу взять, очень нравится. . .	Инференс ML моделей в Java: TensorFlow, DL4J и DJL Javaican 06.11.2025 Python захватил мир машинного обучения - это факт. Но когда дело доходит до продакшена, ситуация не так однозначна. Помню проект в крупном банке три года назад: команда data science натренировала. . .	Mapped types (отображённые типы) в TypeScript Reangularity 04.11.2025 Mapped types работают как конвейер - берут существующую структуру и производят новую по заданным правилам. Меняют модификаторы свойств, трансформируют значения, фильтруют ключи. Один раз описал. . .
Адаптивная случайность в Unity: динамические вероятности для улучшения игрового дизайна GameUnited 03.11.2025 Мой знакомый геймдизайнер потерял двадцать процентов активной аудитории за неделю. А виновником оказался обычный генератор псевдослучайных чисел. Казалось бы - добавил в карточную игру случайное. . .	Протоколы в Python py-thonny 01.11.2025 Традиционная утиная типизация работает просто: попробовал вызвать метод, получилось - отлично, не получилось - упал с ошибкой в рантайме. Протоколы добавляют сюда проверку на этапе статического. . .	C++26: Read-copy-update (RCU) bytestream 31.10.2025 Прошло почти двадцать лет с тех пор, как производители процессоров отказались от гонки мегагерц и перешли на многоядерность. И знаете что? Мы до сих пор спотыкаемся о те же грабли. Каждый раз, когда. . .	Изображения webp на старых x32 ОС Windows XP и Windows 7 Argus19 30.10.2025 Изображения webp на старых x32 ОС Windows XP и Windows 7 Чтобы решить задачу, использовал интернет: поисковики Google и Yandex, а также подсказки Deep Seek. Как оказалось, чтобы создать. . .	Passkey в ASP.NET Core identity stackOverflow 29.10.2025 Пароли мертвы. Нет, серьезно - я повторяю это уже лет пять, но теперь впервые за это время чувствую, что это не просто красивые слова. В . NET 10 команда Microsoft внедрила поддержку Passkey прямо в. . .

@fanatikus 1932 / 1523 / 703 Регистрация: 17.11.2012 Сообщений: 6,585
	15.11.2016, 17:20
	1. повесить на select change, 2.аяксом отправить данные на сервер 3. (PHP) выбрать данные, сформировать как нужно и отправить на клиент 4. вывести данные 0

@Storkfork 0 / 0 / 0 Регистрация: 11.11.2016 Сообщений: 37
	15.11.2016, 17:57 [ТС]
	fanatikus, делаю так, как вы подсказали, но что-то не выводит ничего. 0

@fanatikus 1932 / 1523 / 703 Регистрация: 17.11.2012 Сообщений: 6,585
	17.11.2016, 16:13
	вы хоть немного поняли, как работает аякс? вы посылаете запрос на сервер, в вашем случае на файл act.php. все что выводится в этом файле, отсылается на клиент, и там вставляется в <div id='res'></div> 0

@Storkfork 0 / 0 / 0 Регистрация: 11.11.2016 Сообщений: 37
	17.11.2016, 16:33 [ТС]
	fanatikus, тогда как сделать так, чтоб не дублировало таблицы? Если просто убрать строчку с url, то оно вообще ничего не выводит. 0

@Storkfork 0 / 0 / 0 Регистрация: 11.11.2016 Сообщений: 37
	17.11.2016, 16:46 [ТС]
	fanatikus, да, верно. 0

@fanatikus 1932 / 1523 / 703 Регистрация: 17.11.2012 Сообщений: 6,585
	17.11.2016, 17:57
	вы сразу выводите все данные, а при выборе в селекте, хотите все убрать а вывести только соответствующие выбранному? 0

При выборе элемента <select> автоматически делать выборку из БД

Решение