Всплывающая форма ответа на комментарий - База Данных

@Lara Semenova · Регистрация: 17.08.2017

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

Здравствуйте, я чайник в php, особенно в javascript, но так сложилось, что оочень нужно быстро написать код. Я хотела создать вставку и публикацию комментариев на странице index.php. Я решила сделать так, чтобы люди просто оставляли комменты, они прошли модерацию и затем просто показывались с датой и кнопкой ОТВЕТИТЬ. Я сделала всплывающую форму при нажатии на ссылку ОТВЕТИТЬ. Нужно было, чтобы текст ответа на коммент содержал уже заданное обращение к тому человеку, которому нужно ответить. Например "ольга пишет привет, а мария отвечает: ольга, тебе тоже привет". Все комментарии выводятся из базы данных, таблицы comments. Проблема в том, что это обращение посвящается только первому по счету комментатору, то есть получается, что всплывающее окно ответа образуется для каждого комментатора, но оно спрятано (display:none) отображается только форма ответа первого комментария. Вот скрин для наглядности (скрин1)
Я просто не понимаю, почему делается видимым только форма первого комментария, как сделать так, чтобы отображалась только та форма, на которой была нажата ссылка ОТВЕТИТЬ. Заранее спасибо

код в хэде: джаваскрипт

JavaScript
1
2
3
4
5
6
7
8
9
10
<script> 
        function show() {
        document.getElementById('envelope').style.display='block';
        document.getElementById('fade').style.display='block';
        }
        function hide() {
        document.getElementById('envelope').style.display='none';
        document.getElementById('fade').style.display='none';
        }
        </script>

код:

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
<div style="margin-bottom: 20px">
<?php $res=mysqli_query($link,"SELECT * FROM comments
    WHERE   moderation=1 ORDER BY id");  
$number=mysqli_num_rows($res);
 
if ($number>0) {
    
 
 echo '<br><b> <p style="text-align:center"> Последние комментарии:</b><br></p>';
 
 
                        
                        function get_comments($link) {
                    
                        $result = mysqli_query($link, "SELECT * FROM comments
    WHERE   moderation=1 ORDER BY id");
                        
                        $comments = mysqli_fetch_all($result, MYSQLI_ASSOC);
                    
                        return $comments;
                        }
                        
                        $comments = get_comments($link);
                //echo '<div style="float:right; width:170px; border:1px solid red;">';
                echo '('.date("H:i:s d.m.Y").' г.)</div>';
 
                             foreach ($comments as $comment)
                         { 
                             echo '<div class="comment_name">'.$comment["login"].':</div><div class="comment">
                             '.$comment["message"].'<div class="comment_answer"><a class="show-btn" href="javascript:void(0)" 
                             onclick = "show()">
                            Ответить</a></div><br><div class="comment_date">'.$comment["date"].'</div><br></div>';
                            
                            
                            
                            
                            
echo '<!-- Всплывающая при нажатии ОТВЕТИТЬ-- форма для ответов http://dbmast.ru/sozdaem-vsplyvayushhuyu-kontaktnuyu-formu-dlya-sajta офигенный сайт ВЫШЕ ЕСТЬ СКРИПТ С ФУНКЦИЯМИ-->
<div id="envelope" class="envelope">
        <a  href="javascript:void(0)" onclick = "hide()">Закрыть</a>
        <h1 class="title">Ответить на комментарий</h1>
<form action="';  echo $_SERVER["PHP_SELF"]; echo '" method="POST"> 
                             
                             <label for="login">Введите ваше имя:</label> <br><br>
                             <input class="add_comment" type="text" name="login"  required="required" placeholder="Айгуль" ><br><br>
            
                             <label for="message">Введите ваш комментарий: </label><br><br>
                             <textarea name="message" cols="100" rows="3" required="required"> Ответ:  '.$comment["login"].',  </textarea></p>
                              <P> <strong> Все комментарии проходят обязательную модерацию, поэтому будут опубликованы не сразу.</strong> </p>';
                             
                               
                                 $cod=rand(10,90); $cod2=rand(1,99); $summa=$cod + $cod2;
                                 echo '<div style="margin:5px; float:right;">'.$cod.' + '.$cod2.' = ';
                                  echo '<input type="hidden" name="prov_summa" value="'. $summa.'">';
                                
                                 echo '<input type="text" name="contr_cod" maxlength="4" size="4">';
                                 echo '</div>';
                               
                             echo '<button class= "add_comment" type="submit" name="submit"> Отправить </button> <br> <br> <br>
                
                        </form>
       </div>
       <div id="fade" class="black-overlay"></div> ';
 
 
 
 
  } // закрытие форич положительного условия
} //закрытие условия если намбер комментариев с модератион больше 1 БОЛЬШЕ чем 0                 
                    if(count($comments) === 0):
                    
                    echo '<p> Комментарии отсутствуют </p>';
                    
 else:       endif; ?>

@Para bellum · 05.12.2017, 04:38

На одной странице недопустимо выводить несколько элементов с одним и тем же ID. А у Вас именно так и выводится.
Поэтому используйте либо класс, либо генерируйте ID динамически (JS-код тоже надо изменить, чтобы он не к статичному ID обращался).

@Lara Semenova · 05.12.2017, 20:44 **[ТС]**

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

Добавлено через 41 минуту
Я что поняла подправила, но не могли бы вы пояснить, пожалуйста, я сделала следующее: в базе данных в таблице комментов есть также уникальное поле для айди. Я сделала его значение как айди каждого дива для формы. в джаваскрипте так же поменяла энвелоп на переменную с этим айди, но ничего не работает. Вот код:
Код:

JavaScript
1
2
3
4
5
6
7
8
9
10
<script> 
        function show() {
        document.getElementById(''.$id_com.'').style.display='block';
        document.getElementById('fade').style.display='block';
        }
        function hide() {
        document.getElementById(''.$id_com.'').style.display='none';
        document.getElementById('fade').style.display='none';
        }
        </script>

Код:

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
         foreach ($comments as $comment)
                         {  $id_com=$comment["id"];
                             echo '<div class="comment_name">'.$comment["login"].':</div><div class="comment">
                             '.$comment["message"].'<div class="comment_answer"><a class="show-btn" href="javascript:void(0)" 
                             onclick = "show()"> 
                            Ответить</a>'.$id_com.'</div><br><div class="comment_date">'.$comment["date"].'</div><br></div>';
                            
                            
                            
                            
                            
echo '<!-- Всплывающая при нажатии ОТВЕТИТЬ-- форма для ответов http://dbmast.ru/sozdaem-vsplyvayushhuyu-kontaktnuyu-formu-dlya-sajta офигенный сайт ВЫШЕ ЕСТЬ СКРИПТ С ФУНКЦИЯМИ-->
<div id="'.$id_com.'" class="envelope">
        <a  href="javascript:void(0)" onclick = "hide()">Закрыть</a>
        <h1 class="title">Ответить на комментарий</h1>
<form action="';  echo $_SERVER["PHP_SELF"]; echo '" method="POST"> 
                             
                             <label for="login">Введите ваше имя:</label> <br><br>
                             <input class="add_comment" type="text" name="login"  required="required" placeholder="Айгуль" ><br><br>
            
                             <label for="message">Введите ваш комментарий: </label><br><br>
                             <textarea name="message" cols="100" rows="3" required="required"> Ответ:  '.$comment["login"].',  </textarea></p>
                              <P> <strong> Все комментарии проходят обязательную модерацию, поэтому будут опубликованы не сразу.</strong> </p>';
                             
                               
                                 $cod=rand(10,90); $cod2=rand(1,99); $summa=$cod + $cod2;
                                 echo '<div style="margin:5px; float:right;">'.$cod.' + '.$cod2.' = ';
                                  echo '<input type="hidden" name="prov_summa" value="'. $summa.'">';
                                
                                 echo '<input type="text" name="contr_cod" maxlength="4" size="4">';
                                 echo '</div>';
                               
                             echo '<button class= "add_comment" type="submit" name="submit"> Отправить </button> <br> <br> <br>
                
                        </form>
       </div>
       <div id="fade" class="black-overlay"></div> ';
 
 
 
 
  }

Не могли бы вы помочь еще раз?

@Para bellum · 06.12.2017, 08:29

Сообщение от Lara Semenova

Я сделала его значение как айди каждого дива для формы

Данный момент Вы поняли правильно. Только число в качестве ID лучше не использовать (смотрите: https://developer.mozilla.org/... трибуты/id). ID должен начинаться с латинской буквы.
Значит, меняем так объявление DIV:

PHP/HTML
1
<div id="envelope-'. $comment["id"] .'" class="envelope">

Далее меняем

PHP/HTML
1
<a class="show-btn" href="javascript:void(0)" onclick="show()">Ответить</a>

На

PHP/HTML
1
<a class="show-btn" href="javascript:void(0)" data-target="envelope-'. $comment["id"] .'" onclick="show(this)">Ответить</a>

и

HTML5
1
onclick="hide()"

на

HTML5
1
onclick="hide(this)"

JS меняем так:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
function show(e)
{
    var data = e.dataset;
    
    document.getElementById(data.target).style.display = 'block';
}
 
function hide(e)
{
    var parent = e.parentElement;
    
    parent.style.display='none';
}

Сделаете всё правильно -- заработает. Не заработает -- пишите, разбрёмся.

Новые блоги и статьи Все статьи Все блоги /
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ

@Para bellum 5755 / 4134 / 1508 Регистрация: 06.01.2011 Сообщений: 11,276
	05.12.2017, 04:38
	На одной странице недопустимо выводить несколько элементов с одним и тем же ID. А у Вас именно так и выводится. Поэтому используйте либо класс, либо генерируйте ID динамически (JS-код тоже надо изменить, чтобы он не к статичному ID обращался). 1