Всплывающая форма, ввод данных

@maksvolf96 · Регистрация: 18.05.2014

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

Здравствуйте, недавно в php, появился вопрос: доделываю сайт olgamag24.ru, вот код index.php:

PHP

<?php 
    session_start();
    header('Content-Type: text/html; charset=utf-8');
    if(isset($_POST["send"])) {
        $name = htmlspecialchars ($_POST["name"]);
        $city = htmlspecialchars ($_POST["city"]);
        $from = htmlspecialchars ($_POST["from"]);
        $to = htmlspecialchars ("olgamag24@gmail.com");
        $message = htmlspecialchars ($_POST["message"]);
        
        $_SESSION["name"] = $name;
        $_SESSION["city"] = $city;
        $_SESSION["from"] = $from;
        $_SESSION["message"] = $message;
        
        $error_name = "";
        $error_city = "";
        $error_from = "";
        $error_message = "";
        $error = false;
        
        if(strlen($name) == 0) {
            $error_name = "Возможно, вы не ввели имя";
            $error = true;
            }
            
        if(strlen($city) == 0) {
            $error_city = "Возможно, вы не ввели город";
            $error = true;
            }
        
        if($from == "" || !preg_match ("/@/", $from)) {
            $error_from = "Введите корректный e-mail";
            $error = true;
            }
            
        if(strlen($message) == 0) {
            $error_message = "Введите сообщение";
            $error = true;
            }
            
        if(!$error) {
            $subject = "помощь, город ".$_SESSION["city"]." имя ".$_SESSION["name"];
            $subject = "=?utf-8?B?".base64_encode($subject)."?=";
            $headers = "From: $from\r\nReply-to: $from\r\nContent-type: text/plain; charset=utf-8\r\n";
            mail ($to, $subject, $message, $headers);
            header("Location: success.php/?send=1");
            exit;
        }
    }
?>                 
<form class="flatten" method="POST" name="form_2_14" enctype="multipart/form-data" onsubmit="return sendYaCounter();">
<div class="form-row wide flatten-item">
<label for="primitive_2_name_14">Ваше имя</label><input type="text" value="<?php if (isset($_SESSION["name"])) echo $_SESSION["name"] ?>" name="name" id="primitive_2_name_14">
<br />
<span style="color: red"><?php if(isset($error_name)) {echo $error_name;} ?>
</div>
<div class="form-row wide flatten-item">
<label for="primitive_2_city_14">Ваш город</label><input type="text" value="<?php if (isset($_SESSION["city"])) echo $_SESSION["city"] ?>" name="city" id="primitive_2_city_14">
<br />
<span style="color: red"><?php if(isset($error_city)) {echo $error_city;} ?>
</div>
<div class="form-row flatten-item">
<label for="primitive_2_email_14">Ваш e-mail</label><input type="text" value="<?php if (isset($_SESSION["from"])) echo $_SESSION["from"] ?>" name="from" id="primitive_2_email_14">
<br />
<span style="color: red"><?php if(isset($error_from)) {echo $error_from;} ?>
</div>
 
<div class="form-row wide flatten-item">
<label for="primitive_2_text_14">Расскажите о Вашей проблеме</label><textarea name="message" id="primitive_2_text_14"><?php if (isset($_SESSION["message"])) echo $_SESSION["message"] ?>
</textarea>
<br />
<span style="color: red"><?php if(isset($error_message)) {echo $error_message;} ?>
</div>
<div class="form-row-submit flatten-last"><input type="submit" name="send" value="Получить помощь"></div>
</form>
 
</div>
<div class="flatten-last"></div>
</div></div>
<script type="text/javascript">
            (function (d, w, c) {
                (w[c] = w[c] || []).push(function() {
                    try {
                        w.yaCounter34801540 = new Ya.Metrika({
                            id:34801540,
                            clickmap:true,
                            trackLinks:true,
                            accurateTrackBounce:true,
                            webvisor:true
                        });
                    } catch(e) { }
                });
 
                var n = d.getElementsByTagName("script")[0],
                    s = d.createElement("script"),
                    f = function () { n.parentNode.insertBefore(s, n); };
                s.type = "text/javascript";
                s.async = true;
                s.src = "watch.js"/*tpa=https://mc.yandex.ru/metrika/watch.js*/;
 
                if (w.opera == "[object Opera]") {
                    d.addEventListener("DOMContentLoaded", f, false);
                } else { f(); }
            })(document, window, "yandex_metrika_callbacks");
        </script><noscript><div><img src="34801540" tppabs="https://mc.yandex.ru/watch/34801540" style="position:absolute; left:-9999px;" alt=""></div></noscript>
<script type="text/javascript">
          
        
          function sendYaCounter() {
            yaCounter34801540.reachGoal('FORM_SUBMIT');
            return true;
          }
        </script>
</body></html>

Часть кода, отвечающая за форму(весь код не влез в один пост)

Форма обратной связи работает, но мне нужно, чтобы, если пользователь неправильно введёт данные в любой из четырёх форм на странице, чтобы страница не обновлялась, там сообщения выводятся о неправильном вводе данных под каждым из полей, если страница будет всякий раз обновляться, пользователю будет неудобно искать заново форму, как сделать, чтобы страница не обновлялась, а сообщения о неправильном вводе данных по-прежнему показывались, спасибо

@xpoince · 18.02.2016, 16:50

maksvolf96, Так как у вас проверка только на наличие длины и знака @, то всё можно сделать через jQuery. К примеру можно деактевировать поля ввода и затем после того как поля будут заполнены, активировать кнопку.
Другой способ использовать AJAX

@maksvolf96 · 18.02.2016, 16:57 **[ТС]**

я тут немного поменял, теперь у меня обрабатывается с помощью javascript - алерты при неправильном вводе или отсутствии ввода, если сделать кнопку не submit, а button, то не отправляется на e-mail адрес, submit работает нормально, но страница при нем обновляется

PHP

<?php 
    session_start();
    error_reporting(E_ERROR | E_WARNING | E_PARSE);
    header('Content-Type: text/html; charset=utf-8');
    if(isset($_POST["send"])) {
        $name = htmlspecialchars ($_POST["name"]);
        $city = htmlspecialchars ($_POST["city"]);
        $from = htmlspecialchars ($_POST["from"]);
        $to = htmlspecialchars ("olgamag24@gmail.com");
        $message = htmlspecialchars ($_POST["message"]);
        
        $_SESSION["name"] = $name;
        $_SESSION["city"] = $city;
        $_SESSION["from"] = $from;
        $_SESSION["message"] = $message;
        
        $error_name = "";
        $error_city = "";
        $error_from = "";
        $error_message = "";
        $error = false;
        
        if(strlen($name) == 0) {
            $error_name = "Возможно, вы не ввели имя";
            $error = true;
            }
            
        if(strlen($city) == 0) {
            $error_city = "Возможно, вы не ввели город";
            $error = true;
            }
        
        if($from == "" || !preg_match ("/@/", $from)) {
            $error_from = "Введите корректный e-mail";
            $error = true;
            }
            
        if(strlen($message) == 0) {
            $error_message = "Введите сообщение";
            $error = true;
            }
            
        if(!$error) {
            $subject = "помощь, город ".$_SESSION["city"]." имя ".$_SESSION["name"];
            $subject = "=?utf-8?B?".base64_encode($subject)."?=";
            $headers = "From: $from\r\nReply-to: $from\r\nContent-type: text/plain; charset=utf-8\r\n";
            mail ($to, $subject, $message, $headers);
            header("Location: success.php/?send=1");
            exit;
        }
    }
?>
            
            <!DOCTYPE html>
        
        <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta charset="utf-8">
<meta name="viewport" content="width=1200">
<title>Маг Ольга Ефремова</title>
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" type="text/css" href="style.css" media="all">
<script src="jquery.js" tppabs="http://pomosh-magii.ru/_js/jquery.js" type="text/javascript"></script><script type="text/javascript" src="common.js" tppabs="http://pomosh-magii.ru/_js/common.js"></script><script type="text/javascript" src="labels.js" tppabs="http://pomosh-magii.ru/_js/labels.js"></script><script type="text/javascript" src="magic.js" tppabs="http://pomosh-magii.ru/_js/magic.js"></script>
<script type="text/javascript" src="//vk.com/js/api/openapi.js?121"></script>
<script type="text/javascript">
  VK.init({apiId: 5302217, onlyWidgets: true});
</script>
 
    <script type="text/javascript">
    function valid (form) {
        var fail = false;
 
        var name = form.name.value;
        var city = form.city.value;
        var from = form.from.value;
        var message = form.message.value;
 
        var adr_pattern = /[0-9a-z_-]+@[0-9a-z_-]+\.[a-z]{2,5}/i;
 
        if (name == "" || name == " ")
            fail = "Вы не ввели своё имя";
        else if(city == "" || city == " ")
            fail = "Вы не указали город";
        else if(!adr_pattern.test(from))
            fail = "Вы ввели E-mail неверно";
        else if(message == "" || message == " ")
            fail = "Вы не описали проблему";
 
        if(fail) 
            alert(fail);
    }
 
 
 
    </script>
</head>
 
 
 
<form class="flatten" method="POST" id="form4" name="form_2_14" enctype="multipart/form-data" onsubmit="return sendYaCounter();">
<div class="form-row wide flatten-item">
<label for="primitive_2_name_14">Ваше имя</label><input type="text" value="<?php if (isset($_SESSION["name"])) echo $_SESSION["name"] ?>" name="name" id="primitive_2_name_14">
<br />
<span style="color: red"><?php if(isset($error_name)) {echo $error_name;} ?>
</div>
<div class="form-row wide flatten-item">
<label for="primitive_2_city_14">Ваш город</label><input type="text" value="<?php if (isset($_SESSION["city"])) echo $_SESSION["city"] ?>" name="city" id="primitive_2_city_14">
<br />
<span style="color: red"><?php if(isset($error_city)) {echo $error_city;} ?>
</div>
<div class="form-row flatten-item">
<label for="primitive_2_email_14">Ваш e-mail</label><input type="text" value="<?php if (isset($_SESSION["from"])) echo $_SESSION["from"] ?>" name="from" id="primitive_2_email_14">
<br />
<span style="color: red"><?php if(isset($error_from)) {echo $error_from;} ?>
</div>
 
<div class="form-row wide flatten-item">
<label for="primitive_2_text_14">Расскажите о Вашей проблеме</label><textarea name="message" id="primitive_2_text_14"><?php if (isset($_SESSION["message"])) echo $_SESSION["message"] ?>
</textarea>
<br />
<span style="color: red"><?php if(isset($error_message)) {echo $error_message;} ?>
</div>
<div class="form-row-submit flatten-last"><input type="button" name="send" onclick="valid(document.getElementById('form4'))" value="Получить помощь"></div>
</form>

вот так не работает, потомучто type="button" мне осталось чуть чуть, всё вроде готово, как сделать просто чтобы страница не обновлялась при нажатии на кнопку отправить?

@Azdeman · 19.02.2016, 11:39

Не пойму зачем вы в сессии используете в этом случае . вам же просто ввести данные и отправить на эмеил.

Добавлено через 38 секунд

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

как сделать просто чтобы страница не обновлялась при нажатии на кнопку отправить?

Отправлять запрос с помощью ajax.

Добавлено через 5 минут
maksvolf96, Лучше проверять на сервере данные введеные пользователем..

@xpoince 182 / 182 / 83 Регистрация: 18.02.2014 Сообщений: 867
	18.02.2016, 16:50	2
	maksvolf96, Так как у вас проверка только на наличие длины и знака @, то всё можно сделать через jQuery. К примеру можно деактевировать поля ввода и затем после того как поля будут заполнены, активировать кнопку. Другой способ использовать AJAX 0

@Azdeman Фрилансер 1846 / 1342 / 599 Регистрация: 12.01.2011 Сообщений: 5,432
	19.02.2016, 11:39	4
	Не пойму зачем вы в сессии используете в этом случае . вам же просто ввести данные и отправить на эмеил. Добавлено через 38 секунд Сообщение от maksvolf96 как сделать просто чтобы страница не обновлялась при нажатии на кнопку отправить? Отправлять запрос с помощью ajax. Добавлено через 5 минут maksvolf96, Лучше проверять на сервере данные введеные пользователем.. 0