Добрый день. Я добавил скрытие формы после отправки с помощью form.style.display = 'none';, и после этого данные формы не поступают в таблицу. Помогите, пожалуйста, найти ошибку. Если я удалю эту строку, то форма заполняет MySQL, но я хочу, чтобы после отправки форма была скрыта, а на дисплее было сообщение об успешной отправке. Окно с сообщением я добавил, но когда добавил строку, которая скрывает форму, то данные формы перестали поступать в MySQL.
<!DOCTYPE html>
<html>
<head>
<title>Тестовая страница</title>
<meta charset="utf-8" />
<style>
#confirmation {
opacity: 0;
transition: opacity 0.5s;
}
#confirmation.show {
opacity: 1;
}
</style>
</head>
<body>
<h1>Введите данные</h1>
<form method="post" id="form1">
<p>
<label for="website">URL проекта: </label>
<input type="url" name="website" required>
</p>
<p>
<label for="chronicle">Хроники: </label>
<input type="text" name="chronicle" required></input>
</p>
<p>
<label for="exp">Exp: </label>
<input type="number" min="0" max="500000" id="exp" name="exp" required>
</p>
<p>
<label for="dropI">Drop: </label>
<input type="number" min="0" max="500000" id="dropI" name="dropI" required>
</p>
<p>
<label for="spoil">Spoil: </label>
<input type="number" min="0" max="500000" id="spoil" name="spoil" required>
</p>
<p>
<label for="adena">Adena: </label>
<input type="number" min="0" max="500000" id="adena" name="adena" required>
</p>
<p>
<label for="dateOpen">Дата открытия: </label>
<input type="date" id="dateOpen" name="dateOpen" required></input>
</p>
<p>
<label for="timeOpen">Время открытия: </label>
<input type="time" id="timeOpen" name="timeOpen" required></input>
</p>
<p>
<label for="comment">Примечание: </label><br>
<textarea id="comment" name="comment" placeholder="Примечание"
maxlength="3000" cols="83" rows="10"></textarea>
</p>
<p>
<input type="submit" value="Отправить"><input type="reset" value="Очистить">
</p>
</form>
<div id="confirmation" style="display:none;">
<h3>Готово!</h3>
<p>Тут некоторый текст ответ</p>
</div>
<script>
// Получаем элементы формы и блока
const form = document.getElementById('form1');
const confirmationBlock = document.getElementById('confirmation');
// Добавляем обработчик события на отправку формы
form.addEventListener('submit', function(event) {
event.preventDefault(); // Предотвращаем стандартную отправку формы
// Показать блок подтверждения
confirmationBlock.style.display = 'block';
//прячет форму
form.style.display = 'none';
});
form.addEventListener('submit', function(event) {
event.preventDefault();
confirmationBlock.classList.add('show');
});
</script>
</body>
</html>
const mysql = require("mysql2");
const express = require("express");
const app = express();
const urlencodedParser = express.urlencoded({extended: false});
const pool = mysql.createPool({
connectionLimit: 5,
host: "localhost",
user: "root",
database: "usersdb",
password: "12121212"
});
app.get("/", function (_, response) {
response.sendFile(__dirname + "/index.html");
});
app.post("/", urlencodedParser, function (req, res) {
if(!req.body) return response.sendStatus(400);
const website = req.body.website;
const chronicle = req.body.chronicle;
const exp = req.body.exp;
const dropI = req.body.dropI;
const spoil = req.body.spoil;
const adena = req.body.adena;
const dateOpen = req.body.dateOpen;
const timeOpen = req.body.timeOpen;
const comment = req.body.comment;
pool.query("INSERT INTO users (website, chronicle, exp, dropI, spoil, adena, dateOpen, timeOpen, comment) VALUES (?,?,?,?,?,?,?,?,?)", [website, chronicle, exp, dropI, spoil, adena, dateOpen, timeOpen, comment], function(err, data) {
if(err) return console.log(err);
res.redirect("/");
});
});
app.listen(3000, ()=>console.log("Сервер запущен..."));
