After filling out the form, all data should be written to a text document, but in it all data is written as undefined. How to solve this problem? (also the text is displayed incorrectly on the site when the data is successfully saved, I also don’t understand why)
form_scripts.js
document.addEventListener('DOMContentLoaded', function () {
const form = document.getElementById('appointment-form');
form.onsubmit = function (event) {
event.preventDefault();
const formData = new FormData(form);
fetch('/submit-form', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
const resultElement = document.getElementById('result');
resultElement.textContent = data.message;
resultElement.style.color = 'green'; // Устанавливаем цвет текста
form.reset(); // Очищаем форму после отправки
})
.catch(error => {
console.error('Ошибка:', error);
document.getElementById('result').textContent = 'Произошла ошибка при отправке формы.';
document.getElementById('result').style.color = 'red'; // Устанавливаем цвет текста при ошибке
});
};
});
form.js
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Форма записи в клинику</title>
</head>
<body>
<!-- Header начало -->
<header class="header">
<div class="container">
<a class="logo" href="clinic_index.html">Техномед</a>
<nav class="nav">
<a href="form.html">Сервис</a>
<a href="#about">О нас</a>
<a href="#contact">Контакты</a>
</nav>
</div>
</header>
<!-- Header конец -->
<div class="container">
<h1>Форма записи на прием</h1>
<form action="/submit-form" method="post" id="appointment-form">
<label for="fullname">ФИО:</label>
<input type="text" id="fullname" name="fullname" required><br><br>
<label for="phone">Номер телефона:</label>
<input type="tel" id="phone" name="phone" required><br><br>
<label for="address">Адрес:</label>
<input type="text" id="address" name="address" required><br><br>
<label for="service">Выберите услугу:</label>
<select id="service" name="service">
<option value="consultation">Консультация</option>
<option value="treatment">Лечение</option>
<option value="diagnostics">Диагностика</option>
<!-- Другие услуги -->
</select><br><br>
<label for="symptoms">Симптомы:</label>
<textarea id="symptoms" name="symptoms"></textarea><br><br>
<input type="submit" value="Отправить">
</form>
<div id="result"></div>
</div>
<script src="form_script.js"></script>
</body>
</html>
server.js
const express = require('express');
const fs = require('fs');
const path = require('path');
const app = express();
const port = 1338; // Вы можете выбрать любой доступный порт
// Подключаем встроенный парсер для данных формы
app.use(express.urlencoded({ extended: true }));
app.use(express.json());
app.use(express.static(__dirname + '/public'));
// Устанавливаем путь к вашим HTML-файлам в папке public
app.post('/submit-form', (req, res) => {
const { fullname, phone, address, service, symptoms } = req.body;
const dataToSave = `${fullname}t${phone}t${address}t${service}t${symptoms}n`;
// Путь к файлу, где будут сохраняться данные
const submissionsDir = path.join(__dirname, 'submissions');
const filePath = path.join(submissionsDir, 'submissions.txt');
// Создаем папку 'submissions', если она не существует
if (!fs.existsSync(submissionsDir)) {
fs.mkdirSync(submissionsDir);
}
// Добавляем данные в файл
fs.appendFile(filePath, dataToSave, 'utf8', (err) => {
if (err) {
console.error('Ошибка при сохранении данных:', err);
res.status(500).setHeader('Content-Type', 'application/json; charset=utf-8');
res.json({ message: 'Произошла ошибка сервера' });
} else {
res.setHeader('Content-Type', 'application/json; charset=utf-8');
res.json({ message: 'Ваши данные успешно переданы клинике.' });
}
});
});
app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});
I tried to write these functions for the correct text but it didn’t help
res.status(500).setHeader('Content-Type', 'application/json; charset=utf-8');
