Всех приветствую, помогите решить задачу или может направите в нужном направлении.
Задача следующая:
Необходимо сделать АЯКС форму отправки на сайте.
Форма отображается в модальном окне (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">×</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">×</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. Да и чуть не забыл, нужно чтобы при отправке формы показывалось "Форма успешно отправлена", а если отправка не произошла по какой-то причине, нужно чтобы показывалось "Форма не отправлена, попробуйте позднее".
