Обработка дополнительных форм

form.html <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Email форма</title> </head> <body> <h2>Добавить Email</h2> <form id="emailForm"> <input type="email" id="emailInput" required placeholder="Введите email" /> <button type="submit">Сохранить</button> <p id="message"></p> </form><br> <form id="subForm"> <input type="text" id="subInput" required placeholder="Введите тема письма" style=" width: 500px;"/><br><br> <button type="submit">Сохранить</button> <p id="sub"></p> </form><br> <form id="textForm"> <textarea name="textInput" id="textInput" required placeholder="Введите текст письма" style="height: 300px; width: 635px;"></textarea><br> <button type="submit">Сохранить</button> <p id="text"></p> </form> <script src="../js/tinymce/tinymce.min.js"></script> <script> tinymce.init({ selector: '#textInput', //toolbar: false, //menubar: false, //statusbar: false, plugins: 'image paste', toolbar: 'undo redo | styles | bold italic | image', //toolbar_sticky: true, //toolbar_mode: 'floating', //toolbar_mode: 'sliding', language: 'ru', // Основной язык интерфейса language_url: '../js/tinymce/langs/ru.js', // Путь к файлу перевода paste_data_images: true, // Разрешить вставку Base64 изображений /* images_upload_handler: function (blobInfo, success, failure) { success("cid:" + blobInfo.filename()); }*/ automatic_uploads: true, // Автозагрузка при перетаскивании images_upload_handler: function (blobInfo) { return new Promise((resolve) => { const reader = new FileReader(); reader.onload = () => resolve(reader.result); // Возвращаем Base64 reader.readAsDataURL(blobInfo.blob()); }); } }); const form = document.getElementById('emailForm'); const input = document.getElementById('emailInput'); const message = document.getElementById('message'); const subForm = document.getElementById('subForm'); const subInput = document.getElementById('subInput'); const sub = document.getElementById('sub'); const textForm = document.getElementById('textForm'); const textInput = document.getElementById('textInput'); const text = document.getElementById('text'); form.addEventListener('submit', async (e) => { e.preventDefault(); const email = input.value.trim(); // Очистка сообщения перед новой отправкой message.innerHTML = ''; // Простая проверка email const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailRegex.test(email)) { message.textContent = 'Неверный формат email.'; return; } const response = await fetch('form.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email }) }); const result = await response.json(); message.innerHTML = result.message;//message.textContent message.innerText if (response.ok) { input.value = ''; } }); </script> </body> </html> form.php <?php header('Content-Type: application/json'); $input = json_decode(file_get_contents('php://input'), true); $email = trim($input['email'] ?? ''); if (!$email || !filter_var($email, FILTER_VALIDATE_EMAIL)) { http_response_code(400); echo json_encode(['message' => 'Неверный формат email']); exit; } $file = 'email.json'; if (!file_exists($file)) { file_put_contents($file, json_encode([])); } $emails = json_decode(file_get_contents($file), true); // Проверка на дубликат if (in_array($email, $emails)) { http_response_code(409); echo json_encode(['message' => '<span style="color:red">Email уже существует</span>']); exit; } // Добавление email $emails[] = $email; file_put_contents($file, json_encode($emails, JSON_PRETTY_PRINT)); echo json_encode(['message' => '<span style="color:green">Email успешно сохранён</span>']); Добавить в форму обработку дополнительных форм form.html В form.php получить новые формы полученный $subInput обернуть в $md5sub = md5($subInput ) сохраняем $subInput, $textInput и $md5sub в файле form.json в массиве проверяя есть ли такая запись еще в массиве ранее и заменяя ее по теме письма по $md5sub копируем полученный файл email.json с новым названием файла $md5sub

Чтобы реализовать описанное поведение, нужно:

Расширить JavaScript в form.html, чтобы отправлять данные из всех трёх форм на сервер.
Изменить form.php так, чтобы:
- сохранять $subInput, $textInput и $md5sub в form.json,
- проверять по $md5sub, есть ли такая тема, и заменять при необходимости,
- копировать email.json в новый файл с именем $md5sub.json.

✅ Обновлённый `form.html` (JS часть)

Добавим обработчики для subForm и textForm, объединяя данные и отправляя их на сервер:

html
<script>
  const emailForm = document.getElementById('emailForm');
  const input = document.getElementById('emailInput');
  const message = document.getElementById('message');
  const subForm = document.getElementById('subForm');
  const subInput = document.getElementById('subInput');
  const sub = document.getElementById('sub');
  const textForm = document.getElementById('textForm');
  const textInput = document.getElementById('textInput');
  const text = document.getElementById('text');

  emailForm.addEventListener('submit', async (e) => {
    e.preventDefault();
    const email = input.value.trim();
    message.innerHTML = '';
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(email)) {
      message.textContent = 'Неверный формат email.';
      return;
    }

    const response = await fetch('form.php', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email })
    });

    const result = await response.json();
    message.innerHTML = result.message;
    if (response.ok) input.value = '';
  });

  // Обработка темы и текста письма
  async function handleFormSubmission(e) {
    e.preventDefault();

    const subject = subInput.value.trim();
    const content = tinymce.get('textInput').getContent();

    if (!subject || !content) {
      sub.textContent = 'Заполните тему и текст письма.';
      return;
    }

    const response = await fetch('form.php', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ sub: subject, text: content })
    });

    const result = await response.json();
    if (result.subMessage) sub.innerHTML = result.subMessage;
    if (result.textMessage) text.innerHTML = result.textMessage;

    if (response.ok) {
      subInput.value = '';
      tinymce.get('textInput').setContent('');
    }
  }

  subForm.addEventListener('submit', handleFormSubmission);
  textForm.addEventListener('submit', handleFormSubmission);
</script>

✅ Обновлённый `form.php`

php
<?php
header('Content-Type: application/json');

$input = json_decode(file_get_contents('php://input'), true);

// Обработка email
if (isset($input['email'])) {
    $email = trim($input['email']);
    if (!$email || !filter_var($email, FILTER_VALIDATE_EMAIL)) {
        http_response_code(400);
        echo json_encode(['message' => 'Неверный формат email']);
        exit;
    }

    $emailFile = 'email.json';
    if (!file_exists($emailFile)) file_put_contents($emailFile, json_encode([]));
    $emails = json_decode(file_get_contents($emailFile), true);

    if (in_array($email, $emails)) {
        http_response_code(409);
        echo json_encode(['message' => '<span style="color:red">Email уже существует</span>']);
        exit;
    }

    $emails[] = $email;
    file_put_contents($emailFile, json_encode($emails, JSON_PRETTY_PRINT));
    echo json_encode(['message' => '<span style="color:green">Email успешно сохранён</span>']);
    exit;
}

// Обработка темы и текста письма
if (isset($input['sub']) && isset($input['text'])) {
    $subInput = trim($input['sub']);
    $textInput = trim($input['text']);
    $md5sub = md5($subInput);

    $formFile = 'form.json';
    if (!file_exists($formFile)) file_put_contents($formFile, json_encode([]));

    $forms = json_decode(file_get_contents($formFile), true);

    // Обновление или добавление новой записи по ключу md5
    $forms[$md5sub] = [
        'sub' => $subInput,
        'text' => $textInput,
        'md5' => $md5sub
    ];

    file_put_contents($formFile, json_encode($forms, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE));

    // Копируем email.json в md5sub.json
    $newEmailFile = "$md5sub.json";
    if (file_exists('email.json')) {
        copy('email.json', $newEmailFile);
    }

    echo json_encode([
        'subMessage' => '<span style="color:green">Тема успешно сохранена</span>',
        'textMessage' => '<span style="color:green">Текст письма сохранён</span>'
    ]);
    exit;
}

// Если данные не соответствуют ожидаемым
http_response_code(400);
echo json_encode(['message' => 'Некорректные данные запроса']);

📁 В итоге:

form.json содержит все письма по теме (sub) с md5-ключами.
email.json сохраняет список email-адресов.
Каждый раз при сохранении темы и текста создаётся копия email.json с именем $md5sub.json.

Хочешь также выводить список всех сохранённых тем или текстов прямо на странице?

выводить список всех сохранённых тем и текстов прямо на странице динамически изменяя textInput subInput редактируя текст если один и тот то обновляем запись если разный тогда новая запись

Отлично! Давайте реализуем:

✅ Что нужно сделать:

Сервер (PHP) — form.php:
- добавить обработку GET-запроса для возврата всех сохранённых писем (form.json),
Клиент (JS) — form.html:
- динамически подгружать список тем,
- по клику на тему: заполнять subInput и textInput,
- при редактировании: сохранять обновлённую запись по тому же md5,
- при изменении темы: создать новую запись с новым md5.

✅ Изменения в `form.php`

Добавим в начало form.php обработку GET-запроса:

php
<?php
header('Content-Type: application/json');

if ($_SERVER['REQUEST_METHOD'] === 'GET') {
    if (file_exists('form.json')) {
        echo file_get_contents('form.json');
    } else {
        echo json_encode([]);
    }
    exit;
}

Остальной код (POST-обработка email и sub/text) остаётся без изменений.

✅ Обновления в `form.html`

Добавим в <body> перед <script> элемент для вывода списка тем:

html
<h3>Список сохранённых писем</h3>
<ul id="subjectList" style="list-style: none; padding: 0;"></ul>

Теперь добавим скрипт, который:

Загружает список тем при загрузке,
Позволяет кликнуть по теме, чтобы отредактировать,
При сохранении — обновляет запись или создаёт новую, если тема изменилась.

🔧 Дополнения к JavaScript

Добавьте в <script>:

html
<script>
  let currentMd5 = null; // текущая редактируемая тема

  async function loadSubjects() {
    const res = await fetch('form.php');
    const data = await res.json();

    const list = document.getElementById('subjectList');
    list.innerHTML = '';

    Object.entries(data).forEach(([md5, entry]) => {
      const li = document.createElement('li');
      const btn = document.createElement('button');
      btn.textContent = entry.sub;
      btn.style.margin = '5px';
      btn.onclick = () => {
        subInput.value = entry.sub;
        tinymce.get('textInput').setContent(entry.text);
        currentMd5 = md5;
      };
      li.appendChild(btn);
      list.appendChild(li);
    });
  }

  // Переопределим handleFormSubmission
  async function handleFormSubmission(e) {
    e.preventDefault();

    const subject = subInput.value.trim();
    const content = tinymce.get('textInput').getContent();
    if (!subject || !content) {
      sub.textContent = 'Заполните тему и текст письма.';
      return;
    }

    const md5 = md5Hash(subject);

    const response = await fetch('form.php', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        sub: subject,
        text: content
      })
    });

    const result = await response.json();
    if (result.subMessage) sub.innerHTML = result.subMessage;
    if (result.textMessage) text.innerHTML = result.textMessage;

    if (response.ok) {
      currentMd5 = null;
      subInput.value = '';
      tinymce.get('textInput').setContent('');
      loadSubjects(); // обновить список
    }
  }

  function md5Hash(str) {
    // Простая JS реализация md5 с использованием Web Crypto API
    const encoder = new TextEncoder();
    return crypto.subtle.digest("MD5", encoder.encode(str)).then(buf => {
      return Array.from(new Uint8Array(buf)).map(b => b.toString(16).padStart(2, '0')).join('');
    });
  }

  // Заменим асинхронную генерацию md5 в handleFormSubmission
  async function handleFormSubmission(e) {
    e.preventDefault();
    const subject = subInput.value.trim();
    const content = tinymce.get('textInput').getContent();
    if (!subject || !content) {
      sub.textContent = 'Заполните тему и текст письма.';
      return;
    }

    const newMd5 = await md5Hash(subject);

    // если тема не изменилась — это обновление
    if (currentMd5 === newMd5 || currentMd5 === null) {
      const response = await fetch('form.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ sub: subject, text: content })
      });

      const result = await response.json();
      if (result.subMessage) sub.innerHTML = result.subMessage;
      if (result.textMessage) text.innerHTML = result.textMessage;

      if (response.ok) {
        currentMd5 = null;
        subInput.value = '';
        tinymce.get('textInput').setContent('');
        loadSubjects();
      }
    } else {
      // Тема была изменена — новая запись
      const response = await fetch('form.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ sub: subject, text: content })
      });

      const result = await response.json();
      if (result.subMessage) sub.innerHTML = result.subMessage;
      if (result.textMessage) text.innerHTML = result.textMessage;

      if (response.ok) {
        currentMd5 = null;
        subInput.value = '';
        tinymce.get('textInput').setContent('');
        loadSubjects();
      }
    }
  }

  // Загрузить темы после загрузки страницы
  window.addEventListener('DOMContentLoaded', loadSubjects);
</script>

✅ В результате:

При загрузке страницы — список тем отображается.
Клик по теме — заполняет поля формы.
Изменил текст и нажал "Сохранить" — обновит.
Изменил тему — создаст новую запись.
В form.json хранятся письма по md5-ключу.
Каждый новый md5sub.json — копия email.json.

Хочешь ещё:

Удаление письма,
Предпросмотр,
или даже отправку по email?
Можем добавить.

ChatGPT может допускать ошибки. Рекомендуем проверять важную информацию.

Вы сказали:

ChatGPT сказал:

✅ Обновлённый form.html (JS часть)

✅ Обновлённый form.php