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

@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

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

Новые блоги и статьи Все статьи Все блоги /
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .

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

	Реализация формы в простейшем модальном окне 21.04.2012, 22:01. Показов 6668. Ответов 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