Как отобразить «Форма отправлена» в AJAX форме в модальном окне, а после закрытия чтобы форма приобретала начальный вид?

Всех приветствую, помогите решить задачу или может направите в нужном направлении.

Задача следующая:
Необходимо сделать АЯКС форму отправки на сайте.
Форма отображается в модальном окне (bootstrap 4).
После отправки формы в этом же окне должен отобразится текст "Форма успешно отправлена ... и какой-то там текст", НО я хочу чтобы размер окна по высоте изменялся в зависимости от содержимого. Т.е. изначально к примеру окно имеет высоту 300 пикс. а после отправки в нём становится меньше текста и соотвественно высота окна становится к примеру 200 пикс.

Я не особо силён в jquery поэтому нагуглил решение и хотел его немного кастомизировать, но не совсем разобрался.

Реализую я это следующим образом:
Сама форма HTML
<div class="modal" id="callback" tabindex="-1" role="dialog" role="dialog" aria-labelledby="callback" aria-hidden="true">
      <div class="modal-dialog modal-callback" role="document">
        <div class="modal-content">
          <div class="modal-content">
            <form class="form_callback">

              <!-- Hidden Required Fields -->
              <input type="hidden" name="project_name" value="Site.ru">
              <input type="hidden" name="admin_email" value="mail@mail.ru">
              <input type="hidden" name="form_subject" value="Заявка с сайта">
              <!-- END Hidden Required Fields -->
              
              <input type="hidden" name="Страница" value="">
              
              <div class="success" >
                <div class="modal-header">
                  <h5 class="modal-title">Зявка отправлена</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                  <div class="succes-description">Ещё какой-то текст</div>
                </div>
              </div>

              <div class="modal-header no-send">
                <h5 class="modal-title">Заказать звонок</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body no-send">
                <input class="input-phone" type="phone" name="Телефон" placeholder="Телефон" required>
                <input class="input-name" type="text" name="Имя" placeholder="Имя" required>
                <div class="agreement">Политика конфиденциальности</div>
                <button class="callback btn btn-danger form-submit" type="submit">Заказать звонок</button>
              </div>
             
            </form>
          </div>
        </div>
      </div>
    </div>


JS с помощью которого реализуется AJAX отправка

//E-mail Ajax Send
  $("form").submit(function() { //Change
    var th = $(this);
    $.ajax({
      type: "POST",
      url: "mail.php", //Change
      data: th.serialize()
    }).done(function() {
      $(th).find('.success').addClass('active').css('display', 'flex').hide().fadeIn();
      $(th).find('.no-send').empty();
      setTimeout(function() {
        // Done Functions
        $(th).find('.success').removeClass('active').fadeOut();
        th.trigger("reset");
      }, 3000);
    });
    return false;
  });


И PHP с помощью которого отправляется всё это дело

<?php

$method = $_SERVER['REQUEST_METHOD'];

//Script Foreach
$c = true;
if ( $method === 'POST' ) {

	$project_name = trim($_POST["project_name"]);
	$admin_email  = trim($_POST["admin_email"]);
	$form_subject = trim($_POST["form_subject"]);

	foreach ( $_POST as $key => $value ) {
		if ( $value != "" && $key != "project_name" && $key != "admin_email" && $key != "form_subject" ) {
			$message .= "
			" . ( ($c = !$c) ? '<tr>':'<tr style="background-color: #f8f8f8;">' ) . "
				<td style='padding: 10px; border: #e9e9e9 1px solid;'><b>$key</b></td>
				<td style='padding: 10px; border: #e9e9e9 1px solid;'>$value</td>
			</tr>
			";
		}
	}
} else if ( $method === 'GET' ) {

	$project_name = trim($_GET["project_name"]);
	$admin_email  = trim($_GET["admin_email"]);
	$form_subject = trim($_GET["form_subject"]);

	foreach ( $_GET as $key => $value ) {
		if ( $value != "" && $key != "project_name" && $key != "admin_email" && $key != "form_subject" ) {
			$message .= "
			" . ( ($c = !$c) ? '<tr>':'<tr style="background-color: #f8f8f8;">' ) . "
				<td style='padding: 10px; border: #e9e9e9 1px solid;'><b>$key</b></td>
				<td style='padding: 10px; border: #e9e9e9 1px solid;'>$value</td>
			</tr>
			";
		}
	}
}

$message = "<table style='width: 100%;'>$message</table>";

function adopt($text) {
	return '=?UTF-8?B?'.Base64_encode($text).'?=';
}

$headers = "MIME-Version: 1.0" . PHP_EOL .
"Content-Type: text/html; charset=utf-8" . PHP_EOL .
'From: '.adopt($project_name).' <'.$admin_email.'>' . PHP_EOL .
'Reply-To: '.$admin_email.'' . PHP_EOL;

mail($admin_email, adopt($form_subject), $message, $headers );


Изначально идея автора который это реализовал, следующая.
Форма отправляется, после отправки поверх неё показывается окно "Форма успешно отправлена", и через 3 сек окно закрывается функцией setTimeout и форма снова готова к работе. =)

Я хотел сделать под себя, но всё на что я додумался это очистить поля после отправки (.empty()) из окна все поля и вставить (.append()) "Форма успешно отправлена" с помощью jquery. Но столкнулся с проблемой после закрытия модального окна, если его повторно открыть (для того чтобы повторно отправить форму) открывается сразу окно с "Форма успешно отправлена".
Я понимаю что логически так и должно это срабатывать.

А как сделать так как я изначально описал не могу додуматься, подскажите пожалуйста. =)

P.S. Да и чуть не забыл, нужно чтобы при отправке формы показывалось "Форма успешно отправлена", а если отправка не произошла по какой-то причине, нужно чтобы показывалось "Форма не отправлена, попробуйте позднее".
  • Вопрос задан
  • 1055 просмотров
Решения вопроса 1
ThunderCat
@ThunderCat Куратор тега JavaScript
{PHP, MySql, HTML, JS, CSS} developer
1) вообще то это должно быть просто 2 модальных окна, одно с формой, другое с надписями,
2) соответственно отправляем форму аяксом, получаем ответ с сервера,
3) в любом случае закрываем модалку с формой, открываем модалку для текста,
4) назначаем таймаут функции, которая закроет модалку с текстом и откроет форму
5) в модалку с текстом вставляем фразу, которую сервер вернет в результате обработки запроса из формы
6) если на сервере все прошло ок - чистим форму: $('form').reset();
7) Profit
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы