Хитренькая форма ввода

@vlad-55 · Регистрация: 21.02.2009

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

Требуется осуществить вот такой алгоритм:
1. По клику на графическую или текстовую ссылку происходит обращение к базе, а извлеченная из базы информация используется для предзаполнения полей формы.
2. Всплывающая предзаполненная форма без перезагрузки страницы предоставляется пользователю.
3. Пользователь вносит в форму изменения и кликает «Ввод».
4. Происходит запрос к базе для того, чтобы убедиться, что внесенная пользователем информация в базе отсутствует.
Если такая информации в базе уже есть, то без перезагрузки страницы выводится соответствующее сообщение пользователю.
Если такой информации в базе нет, то производится запись в базу, а пользователю выводится сообщение об успешной записи.
5. Пользователь закрывает всплывающую форму.

Считывание и запись информации в базе не вызывает проблем, а вот как сделать обращение к базе по клику и реализовать саму форму, я даже не представляю!

@demix · 17.12.2012, 11:42

Аяксом конечно же.
По клику отправляется запрос к бд:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
        $('img').click(function(){
            
            $.ajax({  
                type: "POST",  
                url: "/ajax/pop.php", // файл, который обрабатывает запрос и возвращает форму с данными из бд
                data: 'action=get_form',
                success: function(response){
                    $('.pop').html(response);
                }  
            });
            $('.pop').fadeIn(500);
        });

Как вариант.

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
    if( $_POST['action'] == 'get_form' ){
    
        
        $comment = $user_tests['comment'];
 
        $response= '
        
            <div class="edit">
            <form action="" method="post" enctype="multipart/form-data" name="edit">
                <table border="0">
                    <tr>
                        <td>
                            <textarea name="text">'.$comment.'</textarea>
                        </td>
                    </tr>
                    <tr>
                        <td><input class="button" type="submit" name="submit" value="Сохранить" /></td>
                    </tr>
                </table>
            </form>
            </div>
        ';
        
        exit($response);
    
    }

Не самый лучшиЙ вариант передавать хтмл, наверно проще его генерировать на клиенте.
Но я когда-то делал именно так.

Пердачу данных из формы аналогично.

@vlad-55 · 17.12.2012, 12:17 **[ТС]**

А как стартовать?

Вот есть реальная ссылка:

HTML5
1
<a href="/detal/w-8.php">Изменить фильтр</a>

Сейчас с нее идет переход на страницу w-8.php. А надо начать здесь, без перезагрузки, и вызвать Ваш скрипт.
Как это сделать?

@demix · 17.12.2012, 13:55

Надо повесить обработчик события на то, что быдет вызывать окно:

HTML5
1
<a class="get_pop" href="#">Изменить фильтр</a>

Ссылку якорим и присваиваем класс get_pop
Далее в коде вешаем на эту ссылку обработчик:

JavaScript
1
2
3
$('a.get_pop').click(function(){
...
});

@vlad-55 · 17.12.2012, 14:56 **[ТС]**

Для упрощения контроля в файле w-8.php присутствует операттор записи текущего времени в текстовый файл (чтобы можно было убедиться, что w-8.php при клике действительно вызывают). А полный код страницы приведен ниже.

Ничего не работает. Что в коде неверно?

HTML5
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Всплывающая форма</title>
<style type="text/css">
.get_pop{
    color:red;
    font-weight:600;
 
}
</style>
 
<!-- jQuery -->
    <script type="text/javascript" src="jquery.js"></script>
 
 
<script>
$('a.get_pop').click(function(){
            
$.ajax({  
       type: "POST",  
       url: "w-8.php", // файл, который обрабатывает запрос и возвращает форму с данными из бд
       data: 'action=get_form',
       success: function(response){
       $('.w-8').html(response);
       }  
   });
  $('.w-8').fadeIn(500);
});
</script>
 
</head>
 
<body>
 
<p><a class="get_pop" href="#">Изменить фильтр</a</p>
 
 
</body>

@Крюгер · 17.12.2012, 17:20

vlad-55,

Не по теме:

регистрацию на сайте хотите сделать, да?)

@vlad-55 · 17.12.2012, 17:58 **[ТС]**

Вообще-то нет, регистрация мне не нужна.
Но функционал получается похожим (а я об этом и не подумал).

Только вот не работает, и demix пока молчит...

KOPOJI · 17.12.2012, 20:04

Сообщение от vlad-55

JavaScript
1
$('.w-8')

а где находится элемент с классом w-8 ?

Добавлено через 2 минуты

Сообщение от vlad-55

action=get_form

и что такое и откуда берется это get_form ?

@vlad-55 · 17.12.2012, 20:12 **[ТС]**

Ни на один из этих вопросов я не знаю ответа. Просто пытался воплотить данный мне совет.
Как все это должно работать, я вообще понять не могу. Готов внести любые изменения, лишь бы задышало...

KOPOJI · 17.12.2012, 20:24

посмотрел в код выше, увидел что get_form это просто текст.. хм. тогда просто добавьте

HTML5
1
<div class="w-8"></div>

перед </body>

Добавлено через 3 минуты
и php-код лучше замените на такой, к тому же exit там не нужен совершенно.

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php if( isset($_POST['action']) && $_POST['action'] == 'get_form' ) : ?>
 
    <?php //откуда должно браться $user_tests - сами разберетесь?     
        $comment = $user_tests['comment'];
    ?>
        
            <div class="edit">
            <form action="" method="post" enctype="multipart/form-data" name="edit">
                <table border="0">
                    <tr>
                        <td>
                            <textarea name="text"><?php echo $comment; ?></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td><input class="button" type="submit" name="submit" value="Сохранить" /></td>
                    </tr>
                </table>
            </form>
            </div>
 
<?php endif; ?>

@vlad-55 · 17.12.2012, 20:53 **[ТС]**

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

//откуда должно браться $user_tests - сами разберетесь?

Откуда? Что это, в чем его смысл?

Видимо, исправления я внес неверно - ничего не работает, и даже не вызывается файл w-8.php.

Вцелом получился код такой:

HTML5
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Всплывающая форма</title>
<style type="text/css">
.get_pop{
    color:red;
    font-weight:600;
 
}
</style>
 
<!-- jQuery -->
    <script type="text/javascript" src="jquery.js"></script>
 
 
<script>
$('a.get_pop').click(function(){
            
$.ajax({  
       type: "POST",  
       url: "w-8.php", // файл, который обрабатывает запрос и возвращает форму с данными из бд
       data: 'action=get_form',
       success: function(response){
       $('.w-8').html(response);
       }  
   });
  $('.w-8').fadeIn(500);
});
</script>
 
</head>
 
<body>
 
<p><a class="get_pop" href="#">Изменить фильтр</a</p>
 
<?php 
if( isset($_POST['action']) && $_POST['action'] == 'get_form' ) : 
 
$user_tests = "Тестовая запись";     
$comment = $user_tests['comment'];
?>
        
            <div class="edit">
            <form action="" method="post" enctype="multipart/form-data" name="edit">
                <table border="0">
                    <tr>
                        <td>
                            <textarea name="text"><?php echo $comment; ?></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td><input class="button" type="submit" name="submit" value="Сохранить" /></td>
                    </tr>
                </table>
            </form>
            </div>
 
<?php endif; ?>
 
<div class="w-8"></div> 
 
</body>

KOPOJI · 17.12.2012, 21:01

php-код и html/js код должны быть в разных файлах!

Добавлено через 2 минуты
w8.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
<?php 
if( isset($_POST['action']) && $_POST['action'] == 'get_form' ) : 
 
// раз вы юзаете как массив ниже, то и декларируйте как массив
$user_tests = array('comment' => "Тестовая запись");
$comment = $user_tests['comment']; 
?>
        
            <div class="edit">
            <form action="" method="post" enctype="multipart/form-data" name="edit">
                <table border="0">
                    <tr>
                        <td>
                            <textarea name="text"><?php echo $comment; ?></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td><input class="button" type="submit" name="submit" value="Сохранить" /></td>
                    </tr>
                </table>
            </form>
            </div>
 
<?php endif; ?>

HTML5
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Всплывающая форма</title>
<style type="text/css">
.get_pop{
    color:red;
    font-weight:600;
}
</style>
 
<!-- jQuery -->
    <script type="text/javascript" src="jquery.js"></script>
 
 
<script>
$('a.get_pop').click(function(){
            
$.ajax({  
       type: "POST",  
       url: "w8.php", // файл, который обрабатывает запрос и возвращает форму с данными из бд
       data: 'action=get_form',
       success: function(response){
       $('.w8').html(response);
       }  
   });
  $('.w8').fadeIn(500);
});
</script>
 
</head>
 
<body>
 
<p><a class="get_pop" href="#">Изменить фильтр</a></p>
 
<div class="w8"></div> 
 
</body>
</html>

и эти два файла должны лежать рядом, в одной папке

Добавлено через 2 минуты

Сообщение от vlad-55

Откуда? Что это, в чем его смысл?

я без понятия. Не мой код, я не знаю что туда хотели вложить за смысл - но судя по названию, это какой то коммент..

@vlad-55 · 17.12.2012, 21:26 **[ТС]**

Как можно предположить, РНР-код должен быть в файле, имя которого должно упоминаться в том файле, где находится html/js ?

В данном примере в файле w8.php ?

Оба этих файла во вложении. Ничего не работает...

KOPOJI · 17.12.2012, 21:39

htm замените на такой

JavaScript
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Всплывающая форма</title>
<style type="text/css">
.get_pop{
    color:red;
    font-weight:600;
}
</style>
 
<!-- jQuery -->
    <script type="text/javascript" src="jquery.js"></script>
 
 
<script>
$(window).load(function(){
    $('.get_pop').click(function(){
 
    $.ajax({  
           type: "POST",  
           url: "./w8.php", // файл, который обрабатывает запрос и возвращает форму с данными из бд
           data: 'action=get_form',
           success: function(response){
           $('.w8').html(response);
           }  
       });
      $('.w8').fadeIn(500);
      return false;
    })
})
</script>
 
</head>
 
<body>
 
<p><a class="get_pop" href="#">Изменить фильтр</a></p>
 
<div class="w8"></div> 
 
</body>
</html>
 
</html>

@vlad-55 · 17.12.2012, 22:08 **[ТС]**

Теперь скрипт ожил, БОЛЬШОЕ спасибо!

Если можно, то поясните, пожалуста, еще такую вещь.

1. С ИЕ8 не работает. Так и должно быть? Этот браузер не поддерживает какую-то из используемых функций?

2. Чтобы проконтролировать результат, я дополнил РНР код вот таким элементом:

PHP
1
2
3
4
5
<?php endif;
 
    file_put_contents('ajax_test.txt', $_POST['action']);
 
?>

И в сохраняемом текстовом файле (независимо от того, что введено в открывшуюся форму) всегда пишется одно и тоже: "get_form".

Почему так происходит?

KOPOJI · 17.12.2012, 22:16

Сообщение от vlad-55

С ИЕ8 не работает. Так и должно быть? Этот браузер не поддерживает какую-то из используемых функций?

нет, кодировка должна быть в UTF-8, а у вас другая, наверное поэтому.

Сообщение от vlad-55

И в сохраняемом текстовом файле.....всегда пишется одно и тоже: "get_form".
Почему так происходит?

вот поэтому

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

data: 'action=get_form',

Добавлено через 42 секунды
$_POST['action'] = 'get_form'

@vlad-55 · 18.12.2012, 00:38 **[ТС]**

В общем, как не мудрил, так и не сумел от этого избавиться... Не передает он то, что введено в форму...

Это можно исправить или сама идея порочна?

Добавлено через 2 часа 2 минуты
Ясно.

Новые блоги и статьи Все статьи Все блоги /
Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это дополнительная запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая. . .	[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .	делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:
Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .

@vlad-55 156 / 20 / 5 Регистрация: 21.02.2009 Сообщений: 2,787

	Хитренькая форма ввода 17.12.2012, 10:45. Показов 1397. Ответов 16 Метки нет (Все метки) Требуется осуществить вот такой алгоритм: 1. По клику на графическую или текстовую ссылку происходит обращение к базе, а извлеченная из базы информация используется для предзаполнения полей формы. 2. Всплывающая предзаполненная форма без перезагрузки страницы предоставляется пользователю. 3. Пользователь вносит в форму изменения и кликает «Ввод». 4. Происходит запрос к базе для того, чтобы убедиться, что внесенная пользователем информация в базе отсутствует. Если такая информации в базе уже есть, то без перезагрузки страницы выводится соответствующее сообщение пользователю. Если такой информации в базе нет, то производится запись в базу, а пользователю выводится сообщение об успешной записи. 5. Пользователь закрывает всплывающую форму. Считывание и запись информации в базе не вызывает проблем, а вот как сделать обращение к базе по клику и реализовать саму форму, я даже не представляю! 0

@Крюгер 40 / 60 / 8 Регистрация: 16.11.2012 Сообщений: 460 Записей в блоге: 7
	17.12.2012, 17:20
	vlad-55, Не по теме: регистрацию на сайте хотите сделать, да?) 1

@vlad-55 156 / 20 / 5 Регистрация: 21.02.2009 Сообщений: 2,787
	17.12.2012, 17:58 [ТС]
	Вообще-то нет, регистрация мне не нужна. Но функционал получается похожим (а я об этом и не подумал). Только вот не работает, и demix пока молчит... 0

@vlad-55 156 / 20 / 5 Регистрация: 21.02.2009 Сообщений: 2,787
	17.12.2012, 20:12 [ТС]
	Ни на один из этих вопросов я не знаю ответа. Просто пытался воплотить данный мне совет. Как все это должно работать, я вообще понять не могу. Готов внести любые изменения, лишь бы задышало... 0

@vlad-55 156 / 20 / 5 Регистрация: 21.02.2009 Сообщений: 2,787
	18.12.2012, 00:38 [ТС]
	В общем, как не мудрил, так и не сумел от этого избавиться... Не передает он то, что введено в форму... Это можно исправить или сама идея порочна? Добавлено через 2 часа 2 минуты Ясно. 0