Как обновить форму в модальном окне после отправки?

Question

[De-12]

Приветствую.

Есть скрипт, который отправляет по аякс формы:

<script>
$(document).ready(function () {
    $(".maain form").submit(function () {
        // Получение ID формы
        var formID = $(this).attr('id');
        // Добавление решётки к имени ID
        var formNm = $('#' + formID);
        $.ajax({
            type: "POST",
			url: '/send.php',
            data: formNm.serialize(),
            beforeSend: function () {
                // Вывод текста в процессе отправки
                $(formNm).html('<p class="sendproc" style="text-align:center;">Отправка...</p>');
            },
            success: function (data) {
                // Вывод текста результата отправки
				$(formNm).html('<p class="sendok" style="text-align:center;">'+data+'</p>');
            },
            error: function (jqXHR, text, error) {
                // Вывод текста ошибки отправки
                $(formNm).html(error);
            }
        });
        return false;
    });
});
		</script>

Но проблема в том, что эта форма вызывается по нескольким ссылкам в модальном окне бутстрапа. И если отправить одну, закрыть форму и открыть модальное окно еще раз, там будет не форма, а сообщение об успешной отправки. Как сделать, чтобы форма обновлялась и при открытии по другой ссылке вновь была форма, а не сообщение об отправки.

Answer 1

[King123456]

думаю вам надо создать переменную функцию который вводит сообщение об успешном отправлении,потом очищает форму по setTimeout
Типо вот такого написано на чистом js

function showThanksModal(message) {
        const prevModalDialog = document.querySelector('.modal__dialog');

    prevModalDialog.classList.add('hide');
    openModal();    

    const thanksModal = document.createElement('div');
    thanksModal.classList.add('modal__dialog');
    thanksModal.innerHTML = `
        <div class = "modal__content">
        <button data-close class="modal__close" type="button">
            <svg data-close  class="modal__close-icon">
                <use xlink:href="#close"></use>
            </svg>
        </button>
            <div class="modal__title">${message}</div>
        </div
        `;
        document.querySelector('.modal').append(thanksModal);
        setTimeout( () => {  
            thanksModal.remove(); 
            prevModalDialog.classList.add('show');
            prevModalDialog.classList.remove('hide');
            closeModal('.modal');
        },4000);