Здравствуйте, уважаемые! Подскажите, пожалуйста, как настроить отправку из формы, чтобы запись ложилась в таблицу в базе данных? Сама форма здесь: Код (Text): <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Отправка форм</title> <link rel="stylesheet" href="style_otpravka_form.css"> </head> <body> <section class="subscribe"> <div class="container"> <div class="subscribe-wrapper"> <div class="subscribe-row row"> <div class="section-title"> <h2>Подписаться на рассылку</h2> </div> </div> <div class="subscribe-row row"> <div class="col-lg-8"> <form class="subscribe-form" name="subscribe-form" method="POST"> <label> <input type="email" name="subscribe-email" placeholder="Введите ваш почтовый ящик" maxlength="40" required> </label> <div class="subscribe-button-wrapper"> <button class="subscribe-button colored-btn" type="submit">Подписаться</button> </div> </form> <p class="subscribe-description"> Один раз в месяц мы делимся с подписчиками самой актуальной и полезной информацией. Просто оставьте свой адрес электронной почты и убедитесь сами! </p> </div> </div> </div> </div> </section> </main> <script src="scripts_otpravka_form.js"></script> </body> </html> К ней подключены таблица стилей и скрипт отправки из формы. Но при попытке отправить данные выводится сообщение "Что-то пошло не так" вместо "Спасибо за подписку". Есть код внутри скрипта (код не мой, это из учебника, по идее должен быть правильный). В этом коде в самом конце мы вызываем функцию forms. Для неё необходимо ввести 2 параметра: *название класса для формы *url (адрес сервера, на который будем выполнять отправку данных) С конструкцией fetch я вроде бы разобрался как она работает. Принимает сначала параметр url, который мы ввели. Затем дополнительно мы говорим какой метод будет использоваться для запроса (в нашем случае - это отправка). И дополнительно говорим что будет в теле запроса (в этом коде в теле запроса будет коллекция с данными FormData с введенными из формы данными). Предположим у меня есть таблица users. В ней столбики: *id *e-mail Какой мне url надо указать для fetch? И что там за файл должен быть по этому адресу, который я укажу? Я примерно понимаю, что там должен быть .php файл. В котором указаны данные для подключения к базе. Который принимает POST-запрос от сервера. И который в свою очередь подключается к базе. И выполняет SQL-запрос наподобие "insert into users ..." Типа такого: Код (Text): <?php // Параметры для доступа к БД $host = 'localhost'; $dbuser = 'user'; $dbpass = 'pass123'; $db = 'baza'; @$mysqli = new mysqli($host, $dbuser, $dbpass, $db); if ($mysqli->connect_errno) { echo "SQL errno: " . $mysqli->connect_errno . "<br>\n"; echo "Error: " . $mysqli->connect_error . "\n"; die(); } $mysqli->set_charset("utf8"); $email = filter_input(INPUT_POST, 'subscribe-email', FILTER_SANITIZE_MAGIC_QUOTES); $sql = "insert into users values('test', \"$email\", 'test2', 'test3')"; $result = $mysqli->query($sql) or die($mysqli->error); ?> Правильно понимаю? Или что-то другое необходимо в url вводить? Ниже код основного скрипта, с которым проблема: Код (Text): "use strict"; window.addEventListener("DOMContentLoaded", () => { // Forms const forms = (formSelector, url) => {//создаём главную функцию forms, которая обрабатывает формы обратной связи. у неё есть два параметра - название класса, который выбираем и url-адрес куда будем отправлять сетевой запрос с помощью fetch const forms = document.querySelectorAll(formSelector); //выбираем элемент (с классом ".subscribe-form") const message = { //создаём массив с сообщениями (3 вида сообщений) loading: "spinner.svg", //в качестве сообщения о загрузке будет выводиться картинка спиннера success: formSelector === ".subscribe-form" ? "Благодарим за подписку на рассылку" : "Спасибо! Мы вам перезвоним", //так будет выглядеть сообщение об успешной подписке failed: "Что-то пошло не так, повторите еще раз" //сообщение об ошибке будет таким }; const postData = async (data) => { //создали функцию postData, которая будет запускать асинхронную передачу let result = await fetch(url, { //дожидаемся выполнения асинхронной операции. операция fetch (сетевой запрос на сервер). адрес, по которому нужно сделать запрос = url method: "POST", //говорим что мы внутри fetch данные будем не получать, а отправлять body: data, //тело запроса = data }); return await result.text(); //возвращает содержимое ответа в виде строки текста и сохраняется в переменную result }; function bindPostData(form) { //создаем функцию связывание данных form.addEventListener("submit", (evt) => { //включаем прослушивание события (нажатие на кнопку) evt.preventDefault(); //если событие наступило выполняется это const statusMessage = document.createElement("img"); //создается элемент (картинка) statusMessage.src = message.loading;//ссылка на картинку - это свойство loading (где мы указывали ссылку на картинку спиннера) statusMessage.style.cssText = ` display: block; margin: 0 auto; `;//задали стиль для картинки form.insertAdjacentElement("afterend", statusMessage);//вставили новый элемент (картинку спиннера) в форму. место вставки - в конец (afterend). элемент, который вставляем - картинка спиннера const formData = new FormData(form);//создаём новый объект FormData (коллекцию), который позволяет передавать данные postData(formData) //запускаем функцию асинхронной передачи коллекции с данными .then(() => { //реагируем на состояние промиса fullfilled. в случае успешного выполнения асинхронной операции выполняем showThanksModal(message.success, form);//показываем модальное окно с сообщением "Благодарим за подписку на рассылку" statusMessage.remove(); //удаляем картинку спиннера }) .catch(() => { //реагируем на состояние промиса rejected. в случае ошибки выполняем showThanksModal(message.failed, form);//показываем окно с сообщением "Что-то пошло не так, повторите еще раз" statusMessage.remove();//удаляем картинку спиннера }) .finally(() => {//что мы делаем когда завершится асинхронная операция (без разницы успешная она была или нет) form.reset();//устанавливаем все значения формы в исходное состояние }); }); } forms.forEach(item => { bindPostData(item); }); function showThanksModal(message, parent) { //функция показа окна с сообщением const thanksModal = document.createElement("div"); //создается элемент (блок) thanksModal.classList.add("modal"); //добавляем элементу класс .modal thanksModal.classList.add("modal-show"); //добавляем элементу класс .modal-show thanksModal.innerHTML = ` <div class="modal__content"> <div class="modal__title">${message}<div> </div> `;//внутри созданного блока там еще будет два блока, которые входят друг в друга document.body.style.overflow = "hidden"; //содержимое, выходящее за пределы «родительского» блока body, обрезается по его границам без прокрутки parent.appendChild(thanksModal);//вставляем в конец созданный блок setTimeout(() => { //устанавливаем таймер thanksModal.remove();//элемент убираем document.body.style.overflow = "";//возвращаем возможность прокрутки }, 4000);//4 секунды время таймера } }; try {//пробуем //forms(".feedback-form", "http://localhost:3000/requests");//запускаем функцию для формы обратной связи forms(".subscribe-form", "http://e-trafaret.ru/uchebnik/otpravka_iz_formy.php");//запускаем функцию для формы подписки (на какой то сервер непонятный) } catch(err) { } });
Добрый день! Примерно так PHP: <?php $email = filter_input(INPUT_POST, 'subscribe-email', FILTER_SANITIZE_MAGIC_QUOTES); if($email) { // Параметры для доступа к БД $host = 'localhost'; $dbuser = 'user'; $dbpass = 'pass123'; $db = 'baza'; @$mysqli = new mysqli($host, $dbuser, $dbpass, $db); if ($mysqli->connect_errno) { echo "SQL errno: " . $mysqli->connect_errno . "<br>\n"; echo "Error: " . $mysqli->connect_error . "\n"; die(); } $mysqli->set_charset("utf8"); $email = filter_input(INPUT_POST, 'subscribe-email', FILTER_SANITIZE_MAGIC_QUOTES); $sql = "insert into users values('test', \"$email\", 'test2', 'test3')"; $result = $mysqli->query($sql) or die($mysqli->error); echo !$result?0:1; exit; } ?> <html> <head> <script> window.addEventListener("load", () => { form = document.querySelectorAll("subscribe-for"); form.onsubmit = (event) => { event.preventDefault(); fd = new FormData(form); fetch("?", { method: "POST", body: fd }) .then((response) => response.text()) .then((text) => { console.log(text); //злесь проверяйте результат text 1 или 0 }) .catch((error) => { console.log(`Error: ${error.message}`); }); } }); </script> </head> <body> <!------------------------------------> <form class="subscribe-form" name="subscribe-form" method="POST"> <!------------------------------------> </form> <!------------------------------------> </body> </html> Посмотрите Ваш JS в редакторе с подсветкой синтаксиса - потеряны закрывашки функций и определение функций посмотрите здесь https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions Также у Вас странные коментарии - объекты называются массивами или переменными и не только это. Код (Javascript): const message = { //создаём массив с сообщениями (3 вида сообщений) loading: "spinner.svg", //в качестве сообщения о загрузке будет выводиться картинка спиннера success: formSelector === ".subscribe-form" ? "Благодарим за подписку на рассылку" : "Спасибо! Мы вам перезвоним", //так будет выглядеть сообщение об успешной подписке failed: "Что-то пошло не так, повторите еще раз" //сообщение об ошибке будет таким }; ... return await result.text(); //возвращает содержимое ответа в виде строки текста и сохраняется в переменную result Удачи!
Владимир, спасибо! Я когда открыл консоль, то оказалось, что ошибка "Что-то пошло не так" была вызвана вообще тем, что url адрес я указал в формате "http://", а не "https://". Когда адрес поправил стало выводиться "Благодарим Вас за подписку". Но в базу все равно не получалось занести данные из формы. Тогда я решил попробовать максимально всё упростить (в целях научиться) в файле .php: Код (Text): <?php if(isset($_POST['subscribe-email'])) { $host = 'localhost'; $dbuser = 'user'; $dbpass = '123'; $db = 'baza'; @$mysqli = new mysqli($host, $dbuser, $dbpass, $db); if ($mysqli->connect_errno) { echo "SQL errno: " . $mysqli->connect_errno . "<br>\n"; echo "Error: " . $mysqli->connect_error . "\n"; die(); } $sql = "INSERT INTO users (imya, telefon, pochta, parol) VALUES ('ura!', 'prishlo!', 'pozdravlyayu!', 'ura!')"; $result = $mysqli->query($sql) or die($mysqli->error); } ?> И после попытки отправить данные из формы, в базу действительно занеслись значения (тестовые) из SQL-запроса. Это работает! Спасибо!
Что один написал уязвимость, что второй повторил за ним. Для проверки мыла есть спец константа. 2, 10, 17, 18, 20 строки топ