Как внедрить JS код закрытия формы после успешной отправки данных?

Question

[Андрей Филимонов]

Здравствуйте, помогите пожалуйста на этой странице правильно вставить Java Script код, чтобы после успешной отправки, выскакивало сообщение о успешности, и всплывающая форма автоматически закрывалась. Форма:

<a href="#win1" style="color:#fff;" class="box-button2" >Запись</a> 

<a href="#x" class="overlay_det" id="win1"></a> 
<div class="popup_det"> 
<form method="post" action="javascript:void(0);" onsubmit="send_form_gruppa();" id="forma-gruppa"> 
<input id="na-glav" name="fio" placeholder="Ф.И.О" /> 
<input id="na-glav" type="text" name="phone" placeholder="Телефон" /> 
<input id="na-glav" type="text" name="age" placeholder="Возраст девочки" /> 
	<!--Взял от сюда https://html5book.ru/sozdanie-html-form/-->
	 <select name="zal" type="text">
        <option name="zal" type="text">Адрес зала</option>
		 <option value="Белградская 28к2">Белградская 28к2, м.Международная</option> 
        <option value="Рижский 8">Рижский 8, м.Балтийская</option> 
        <option value="Лесной 59к7">Лесной 59к7, м.Лесная</option>
		  <option value="Л.Пилютова 50к3">Л.Пилютова 50к3, м.Проспект Ветеранов</option> 
      </select> 
<textarea id="comment1" name="comment" type="text" placeholder="Комментарий"></textarea> 
<br/> 
<button type="submit" id="submit1" value="отправить" /> Записаться </button> 
</form> 
<a class="close_det" title="Закрыть" href="#close_det"></a>
	</div>

код отправки

<script>
function send_form_gruppa() { 
var msg = $("#forma-gruppa").serialize();
$.ajax({
type: "POST",
url: "/wp-content/themes/gymbalance/sends/send-gruppa.php",
data: msg,
success: function(data) {
alert("Заявка отправлена, мы скоро с вами свяжемся)");
setTimeout(function () {
$(".feedback_form_bg").fadeOut();}, 1000);
},
error:  function(xhr, str){
alert("Возникла ошибка!");
setTimeout(function () {$(".feedback_form_bg").fadeOut();}, 1000);
}
});
}

</script>

а код, из которого пытаюсь выцепить закрытие взял здесь

$('#твоя-форма').submit(function() {
  $.ajax({
    type   : 'POST',
    url: $ajax_url,
    data : {
      name: $name_value ,
      email: $email_value,
      message: $message_value,
      subject: $subject_value,
      task: 'sendmail'
    },
    beforeSend: function(data){
      $('#submit').before('<div class="loading"></div>');
    },
    success: function (data){
      $('.loading').fadeOut(function(){
        $(this).remove();
      }); //прячется gif-ка какая-нибудь
      setTimeout(function(){
      document.forms['твоя-форма'].reset(); // очищается форма методом .reset()
      $('#myModal').modal('hide'); 
      }, 3000); // здесь закрывается модальное окно через 3 секунды
    },
    complete:function(data){
     $form.each(function(){
      this.reset();  // или так очищается форма методом .reset()
    });
    },
  });
  return false;
});

Answer 1

[Павел]

у тебя ведь все есть берешь в свой код послеsuccess: function(data) {
ставишь
$('#myModal').modal('hide');
только с твоим id формы

Comments

[Андрей Филимонов]

так ставил, но тога не всплывает окно о успешности, то есть нажимаю записаться и ничего не происходит, а на почту заявка поступает и если 5 раз нажать, то 5 и придут

[Андрей Филимонов]

вот так работает:

<script>
function send_form_gruppa() { 
var msg = $("#forma-gruppa").serialize();
$.ajax({
type: "POST",
url: "/wp-content/themes/gymbalance/sends/send-gruppa.php",
data: msg,
success: function(data) {
alert("Заявка отправлена, мы скоро с вами свяжемся)");
setTimeout(function () {
$(".overlay_det").fadeOut();}, 10);
	setTimeout(function () {
		$(".popup_det").fadeOut();}, 10);
},
error:  function(xhr, str){
alert("Возникла ошибка!");
setTimeout(function () {$(".overlay_det").fadeOut();}, 10);
		setTimeout(function () {
		$(".popup_det").fadeOut();}, 10);
}
});
}

[Павел]

Андрей Филимонов: надо бы ваш код на https://codepen.io , тогда быстро подсказка найдется)
что то у вас воооообще везде разные id и class