Как сделать всплывающее модальное окно, после успешной отправки формы?

Question

[IsayR]

Всем привет! Подскажите, пожалуйста, какой код я должна написать, чтобы после успешной отправки формы, у меня выскочило модальное окно? Можно просто div был изначально как display:none, а после отправки привязать к div класс active и так он станет display:block.

<div class="wrapper">
                        <div class="form">
                            <form action="#" id="form" class="form__body d-flex flex-column">
                                <h2 class="form__title_two">
                                    Subscribe to my newsletter
                                </h2>
                                <p class="form__text">
                                    Get my announcements about coming workshops & services direct to your inbox.
                                </p>
                                <div class="form__item">
                                    <input type="text" name="name" class="form__body_input _req" placeholder="First name">
                                </div>
                                <div class="form__item">
                                    <input type="text" name="email"class="form__body_input _req _email" placeholder="Email">
                                </div>
                                <button type="submit" class="form__btn subscribe btn">
                                    Subscribe
                                </button>
                            </form>
                        </div>
                    </div>

"use strict"

document.addEventListener('DOMContentLoaded', function () {
    const form = document.getElementById('form');
    form.addEventListener('submit', formSend);

     async function formSend(e) {
        e.preventDefault();

        let error = formValidate(form);

        let formData = new FormData(form);

        if (error === 0) {
            form.classList.add('_sending');
            let response = await fetch('../sendmail.php', {
                method: 'POST',
                body: formData
            });
            if (response.ok) {
                let result = await response.json();
                alert(result.message);
                form.reset();
                form.classList.remove('_sending');
            } else {
                alert("Error");
                form.classList.remove('_sending');
            }
        } else {
            alert('Fill in required fields');
        }
    }

    function formValidate(form) {
        let error = 0;
        let formReq = document.querySelectorAll('._req');

        for (let index = 0; index < formReq.length; index++) {
            const input = formReq[index];
            formRemoveError(input);

            if (input.classList.contains('_email')) {
                    if (emailTest(input)) {
                        formAddError(input);
                        error++;
                    }
            } else {
                if (input.value === '') {
                    formAddError(input);
                    error++;
                }
            }
        }
        return error;
    }
    function formAddError(input) {
        input.parentElement.classList.add('_error');
        input.classList.add('_error');
    }
    function formRemoveError(input) {
        input.parentElement.classList.remove('_error');
        input.classList.remove('_error');
    }
    function emailTest(input) {
        return !/^\w+([\.-]?\w+)*@\w([\.-]?\w+)*(\.\w{2,8})+$/.test(input.value);
    }
});

<?php 
....
	// Тема письма 
	$mail->Subject = 'Hello! I`m Julie Visotski';

	//Тело письма 
	$body = '<h1>Meet the letter</h1>';

	if(trim(!empty($_POST['subject']))){
		$body.='<p><strong>Subject:</strong> '.$_POST['subject'].'</p>';
	}
	if(trim(!empty($_POST['name']))){
		$body.='<p><strong>Name:</strong> '.$_POST['name'].'</p>';
	}
	if(trim(!empty($_POST['email']))){
		$body.='<p><strong>E-mail:</strong> '.$_POST['email'].'</p>';
	}
	if(trim(!empty($_POST['message']))){
		$body.='<p><strong>Message:</strong> '.$_POST['message'].'</p>';
	}

	$mail->Body = $body; 

	//Отправляем
	if (!$mail->send()) {
		$message = 'Error';
	} else {
		$message = 'Data sent!';
	}

	$response = ['message' => $message];

	header('Content-type: application/json');
	echo json_encode($response);
?>

Comments

[Антон Литвиненко]

вы же сами себе все сказали. на успешную отправку в конце вызывыаете функцию, которая откроет модалку. которая банально добавит класс с видимостью на скрытый блок

[IsayR]

Антон Литвиненко, Да просто в js малознающая, но я уже разобралась)

Answer 1

[Антон Романков]

Это делается в функции onSubmit, которая вешается на форму.
Например, есть есть обработчик, который отвечает за отправку данных на сервер и onSubmit. Тогда можно сделать так:

const sendForm = async (data) => await api.post(data)

const onSubmit = async (data) => {
  // добавить сюда получение данных из формы
  try {
    const res = await sendForm(data)
    document.querySelector('#your-form').classList.add('active')
  } catch (error) {
    console.error(error)
  }
}