Реализация формы в простейшем модальном окне

@battrack · Регистрация: 17.02.2009

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

В странице имеется скрытый div-элемент с содержимым. Данный элемент и будет модальным окном. При клике на странице на определенную кнопку, данный div становится видимым, т.е. модальное окно отображается. Допустим в этом div-е (окне) есть форма – поле ввода (text) и кнопка (submit). Задача простая: необходимо чтобы после ввода текста и нажатия кнопки, введенные данные уходили на сервер (например серверный скрипт записывал бы текст в базу данных). Короче говоря, не важно что будет происходить на сервере. Важно то, что если на сервере происходит какая либо ошибка (например, формат введенных данных неправильный), то сервер должен вернуть код ошибки и ошибка должна быть выведена в том же модальном окне.
На сервере обработкой данных занимается php-скрипт (впрочем это тоже не так важно).

Грубо говоря, я могу создать модальное окно, вывести в него какие-нибудь данные, ссылки и пр. И, например, по ссылке «закрыть» закрыть это модальное окно. Но вот как по нажатию на кнопку не закрыть окно а отправить данные на сервер, получить ответ и вывести его в окне – не знаю. А в идеале, если ошибки на сервере не произошло, то закрыть окно.
Данная ситуация актуальна, например, для случая авторизации. Скажем пользователь ввел в окно логин и пароль, запрос ушел на сервер (окно в это время еще отображается), сервер обработал данные и вернул результат: либо авторизация прошла и все ок, либо авторизация не прошла (например в базе нет пользователя с таким именем). В зависимости от результата в окно либо должно вывестись сообщение об ошибке («пользователя с таким именем не существует»), либо окно должно закрыться (если ошибки нет).
Правильно ли я понимаю логику: после ввода данных и нажатия кнопки, данные спомощью ajax-запроса уходят на сервер, серверный скрипт обрабатывает данные и посылает обратно ответ. Ответ анализируется и если ошибка, то выводим ее в окно, если ошибки нет, то вызываем функцию закрытия окна?
Я умышленно пока не пытаюсь разбираться с множеством готовых виджетов модальных окон (например Dialog UI), а пытаюсь создать свое простейшее окно, чтобы разобраться с темой.

@Jallik Lich · 22.04.2012, 00:04

Посмотрите здесь. Там на правой стороне меню есть кнопка входа (ключик). Если это то, что Вы хотите, значит расскажу, как именно я добился такого результата

Добавлено через 45 секунд
При входе на сайт страница обновляется и, естествено, форма не отображается.

@battrack · 22.04.2012, 17:47 **[ТС]**

Да, да, это именно то о чем я говорю!!!!

@Jallik Lich · 22.04.2012, 17:56

Значит кротко обо всем

Само модальное окно сделано с помощью плагина JQuery Reveal. На официальном сайте нормально описано подключение и настройка этого плагина

Вот код обработки данных и вывода результата:

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
<?php
    // Начало сессии
    session_name("cwd");
    session_start();
 
    // Если пользователь не ввел логин..
    if(!isset($_POST['login']) or empty($_POST['login'])) {
        // .. остановить работу скрипта и показать ошибку
        exit('<div id="err">Необходимо ввести логин!</div>');
    }
 
    // Если пользователь не ввел пароль..
    if(!isset($_POST['pass']) or empty($_POST['pass'])) {
        // .. остановить работу скрипта и показать ошибку
        exit('<div id="err">Необходимо ввести пароль!</div>');
    }
 
    // Очистка переменных от вредоносного кода
    $login = trim(htmlspecialchars(stripslashes($_POST['login'])));
    $password = trim(htmlspecialchars(stripslashes($_POST['pass'])));
 
    // Подключение к базе данных
    require_once("db_connect.php");
 
    // Выборка данных с базы или вывод ошибки
    $result = mysql_fetch_array(mysql_query("SELECT id, login, pass FROM users WHERE login='$login' LIMIT 1", $db)) or die('<div id="err">Не верный логин!</div>');
 
    // Если данные успешно выбраны..
    if(!empty($result['id'])) {
        // .. и пароли совпадают ..
        if($result['pass'] == md5($password)) {
            // .. установить переменные сиссии..
            $_SESSION['login'] = $result['login']; 
            $_SESSION['id'] = $result['id'];
        }
        // .. в противном случае..
        else {
            // .. остановить работу скрипта и показать ошибку
            exit('<div id="err">Не верный пароль!</div>');
        }
    }
?>

Вызывается скрипт и получает данные при помощи Ajax. Вот код:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$("#login_button").click(function(e) {  // При нажатии на кнопку отправить (submit)
        e.preventDefault(); // отменяем дейсвие по умолчанию (чтобы форма не отправлялась)
 
        var login = $("#input_login").val(),    // Переменная с логином. Вытаскиваем значение, введенное в input login
            pass = $("#input_pass").val();  // Переменная с паролем. Вытаскиваем значение, введенное в input pass
 
        $.ajax({    // Делаем ajax запрос
            type: "POST",   // данные передаем методом POST
            url: "php/login.php",   // указываем обработчик
            data: "login=" + login + "&pass=" + pass,   // формируем строку с переменными
            dataType: "html",   // указываем тип данные
            dataFilter: function(a) {   // фильтруем возвращаемый результат
                return $(a).filter("#err").text(); },   // выводя только текст внутри блока с id="err"
            success: function(a) {  // функция обработки
                if(a == '') {   // если скрипт ничего не вернул (поле с id="err" пустое)
                    window.location.reload()    // обновляем страницу
                }
                else {  // в другом случае
                    $("#errors").text(a);   // выводим ошибку в поле с id="errors"
                }
            }});
        return 1;
    });

Надеюсь разберетесь с кодами

Также прошу великих гуру покритиковать мой код. Жду от вас обоснованой критики и пожеланий по поводу безопасности, быстродействия и ресурсопоедания кода

@battrack · 22.04.2012, 18:22 **[ТС]**

Спасибо! Буду разбираться!

@Cyberwork · 16.01.2014, 08:04

Подскажите куда вставлять второй блок кода где говорится про аякс. Заранее благодарен

@ulika13 · 25.11.2021, 23:43

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

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11680&d=1772460536 Одним из. . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .

@battrack 0 / 0 / 0 Регистрация: 17.02.2009 Сообщений: 34

	Реализация формы в простейшем модальном окне 21.04.2012, 22:01. Показов 6672. Ответов 6 Метки нет (Все метки) В странице имеется скрытый div-элемент с содержимым. Данный элемент и будет модальным окном. При клике на странице на определенную кнопку, данный div становится видимым, т.е. модальное окно отображается. Допустим в этом div-е (окне) есть форма – поле ввода (text) и кнопка (submit). Задача простая: необходимо чтобы после ввода текста и нажатия кнопки, введенные данные уходили на сервер (например серверный скрипт записывал бы текст в базу данных). Короче говоря, не важно что будет происходить на сервере. Важно то, что если на сервере происходит какая либо ошибка (например, формат введенных данных неправильный), то сервер должен вернуть код ошибки и ошибка должна быть выведена в том же модальном окне. На сервере обработкой данных занимается php-скрипт (впрочем это тоже не так важно). Грубо говоря, я могу создать модальное окно, вывести в него какие-нибудь данные, ссылки и пр. И, например, по ссылке «закрыть» закрыть это модальное окно. Но вот как по нажатию на кнопку не закрыть окно а отправить данные на сервер, получить ответ и вывести его в окне – не знаю. А в идеале, если ошибки на сервере не произошло, то закрыть окно. Данная ситуация актуальна, например, для случая авторизации. Скажем пользователь ввел в окно логин и пароль, запрос ушел на сервер (окно в это время еще отображается), сервер обработал данные и вернул результат: либо авторизация прошла и все ок, либо авторизация не прошла (например в базе нет пользователя с таким именем). В зависимости от результата в окно либо должно вывестись сообщение об ошибке («пользователя с таким именем не существует»), либо окно должно закрыться (если ошибки нет). Правильно ли я понимаю логику: после ввода данных и нажатия кнопки, данные спомощью ajax-запроса уходят на сервер, серверный скрипт обрабатывает данные и посылает обратно ответ. Ответ анализируется и если ошибка, то выводим ее в окно, если ошибки нет, то вызываем функцию закрытия окна? Я умышленно пока не пытаюсь разбираться с множеством готовых виджетов модальных окон (например Dialog UI), а пытаюсь создать свое простейшее окно, чтобы разобраться с темой. 0

@Jallik Lich Исследователь 196 / 175 / 13 Регистрация: 30.10.2011 Сообщений: 605 Записей в блоге: 7
	22.04.2012, 00:04
	Посмотрите здесь. Там на правой стороне меню есть кнопка входа (ключик). Если это то, что Вы хотите, значит расскажу, как именно я добился такого результата Добавлено через 45 секунд При входе на сайт страница обновляется и, естествено, форма не отображается. 0

@battrack 0 / 0 / 0 Регистрация: 17.02.2009 Сообщений: 34
	22.04.2012, 17:47 [ТС]
	Да, да, это именно то о чем я говорю!!!! 0

@battrack 0 / 0 / 0 Регистрация: 17.02.2009 Сообщений: 34
	22.04.2012, 18:22 [ТС]
	Спасибо! Буду разбираться! 0

@Cyberwork 0 / 0 / 0 Регистрация: 19.01.2013 Сообщений: 2
	16.01.2014, 08:04
	Подскажите куда вставлять второй блок кода где говорится про аякс. Заранее благодарен 0

Опции темы