Всем доброго времени суток. Для собственных нужд решил создать локальный сайт. Оговорюсь сразу знаний в этой теме 0, обучаюсь по ходу написания страничек. Столкнулся с проблемой при создании формы авторизации. Проблема вот в чем: у меня есть страница main.html и файл login.php. При нажатии кнопки "войти" появляется всплывающее окно. При вводе неверных логина и пароля меня перекидывает на login.php где уже появляется ошибка "неверные данные".При нажатии ок возвращает на главную. Но я пытаюсь сделать вывод ошибки во всплывающем окне. На обозрение представлю код html: HTML: <div id="overlay"></div> <div id="loginForm" style="display: none;"> <div class="form-forma"> <div class="form-title">Авторизация</div> <form id="login-form" action="../addresses/login.php" method="post"> <div class="form-group"> <label for="login">Имя пользователя:</label> <input type="text" id="login" name="login" required> </div> <div class="form-group"> <label for="password">Пароль:</label> <input type="password" id="password" name="password" required> </div> <div class="form-group"> <button type="submit">Войти</button> </div> </form> <div class="form-footer"> <div id="error-message" class="error"><?php echo $error_message ?></div> <a href="#" class="forgot-password">Забыли пароль?</a> </div> </div> </div> и соответственно php: PHP: if ($result->num_rows > 0) { header("Location: http://my.web/main"); exit(); $error_message = ""; // } else { //$error_message = "Введены неверные данные"; echo "<script> alert('Введенные данные неверны'); window.location.href = '/';</script>"; exit(); } в коде php есть такая особенность: в данном виде меня перекидывает на login.php где сверху вылезает ошибка, я нажимаю ОК и попадаю на главную. Но если я сделаю так: PHP: if ($result->num_rows > 0) { header("Location: http://my.web/main"); exit(); $error_message = ""; // } else { $error_message = "Введены неверные данные"; //echo "<script> alert('Введенные данные неверны'); window.location.href = '/';</script>"; exit(); } то тогда попадаю на пустую страницу Login. Повторюсь,я пока настраиваю сценарий для неверно введеных данных. Прошу не накидываться и не критиковать, а помочь с проблемой, заранее всем СПАСИБО
чтобы ошибки авторизации выводились без перезагрузки страницы, нужно еще на javascript код написать. Написать так чтобы запускался при нажатии на кнопку отправки формы.
Про всплывающее окна не понял, а что бы работало без перезагрузки, как Вам правильно подсказал коллега, без JS (XMLHttpRequest) не обойтись. login.php PHP: <? session_start(); if(isset($_POST["login"])) { $result = null; // временно // PHP validation // MySql query > $result if($result) { if ($result->num_rows > 0) { $_SESSION["login"] = 1; header("Location: http://my.web/main"); } } else { $_SESSION["login"] = 0; $out["error"] = true; $out["error_message"] = "Введены неверные данные"; //send JSON Response header('Content-Type: application/json; charset=utf-8'); echo json_encode($out); exit; } } ?> <html> <header> <script type="text/javascript" src="login.js"></script> </header> <body> <div id="overlay"></div> <div id="loginForm"> <div class="form-forma"> <div class="form-title">Авторизация</div> <form id="login-form" action="" method="post"> <div class="form-group"> <label for="login">Имя пользователя:</label> <input type="text" id="login" name="login" required> </div> <div class="form-group"> <label for="password">Пароль:</label> <input type="password" id="password" name="password" required> </div> <div class="form-group"> <button type="submit">Войти</button> </div> </form> <div class="form-footer"> <div id="error-message" class="error"></div> <a href="#" class="forgot-password">Забыли пароль?</a> </div> </div> </div> </body> </html> login.php Код (Javascript): window.addEventListener("load", (event) => { var lForm = document.getElementById("login-form"); var msgEl = document.getElementById("error-message"); var submitEl = document.querySelectorAll("button[type='submit']")[0]; var inputEl = document.querySelectorAll("input"); //---------------------------------------------- LoginValidation = function(evt){ for(i = 0; i < inputEl.length; i++) if(inputEl[i].value == "") return; var xhr = new XMLHttpRequest(); var url = "login.php"; xhr.onreadystatechange = function() { if(this.readyState == 4 && this.status == 200) { try { var rsp = JSON.parse(this.responseText); if(rsp["error"]) { msgEl.innerHTML = rsp["error_message"]; for(i = 0; i < inputEl.length; i++) inputEl[i].value = ""; } } catch(error) { return false; } } }; xhr.open("POST", url, true); var data = new FormData(lForm); xhr.send(data); evt.preventDefault(); } submitEl.addEventListener("click", LoginValidation); }); Удачи!
XMLHttpRequest не древний и не устаревший API. Living Standard — Last Updated 19 February 2024 Вы правы есть fetch, а ещё есть jQuery. Я показал код, одного рабочего решения. Если у Вас такая возможность, покажите Ваш код. Думая будет полезно показать различные решения этой задачи.
Кстати, если мне не изменяет память, fetch кой-чего не умеет, что умеет XMLHttpRequest. Есть хостинг бесплатный с какой-то кривой защитой, fetch её не пробивал в отличии от.