Закрытие формы после отправки?

Question

[Денис Трифонов]

Доброго времени суток. Подскажите плиз такую вещицу: Есть форма, которая обрабатывается плагином Remodal, работает нормально и сообщения отсылает, вот только как сделать, чтобы после отправки сообщения она закрывалась, а не висела открытой? В плагине код js минимизирован и разобраться очень сложно что и где. Могу кинуть плагин, какой он есть. Кто подскажет как? Может в php файл нужно что-то дописать?
Пробовал добавить переменную, чтобы работать с формой как с объектом и закрывать его через object.close(); но не силен в js и что то не сработало...

Comments

[ой всё]

а что говорит документация?

[Денис Трифонов]

Да там не понятно...она так же предлагает создать объект, а дальше лес....вот ссылка https://github.com/VodkaBears/Remodal#remodal А в примерах там диалоговые окна, которые и так черт их подери закрываются....Не могу понять просто

[doweb]

Судя по документации
inst.close(); - закрывает окно

Лучше код отправьте на кодпен (или любую другую песочницу), так думаю быстрее разберемся

[Денис Трифонов]

В песочницу грузить много получится, да и откровенно говоря, я не доконца понимаю как ими пользоваться. плагин remodal такой же как и на гите без изменений, php файл думаю тут вообще роли не играет, форма почти стандартная. а вот файл, который обрабатывает ее отправку через аякс
$(document).ready(function(){$("form").submit(function(){var formID=$(this).attr('id');var formNm=$('#'+formID);var message=$(formNm).find(".msgs");var formTitle=$(formNm).find(".formTitle");$.ajax({type:"POST",url:'https://site.ru/mail.php',data:formNm.serialize(),success:function(data){message.html(data);formTitle.css("display","none");setTimeout(function(){$('.formTitle').css("display","block");$('.msgs').html('');$('input').not(':input[type=submit], :input[type=hidden]').val('');},3000);},error:function(jqXHR,text,error){message.html(error);formTitle.css("display","none");setTimeout(function(){$('.formTitle').css("display","block");$('.msgs').html('');$('input').not(':input[type=submit], :input[type=hidden]').val('');},3000);}});return false;});var $input=$('.form-fieldset > input');$input.blur(function(e){$(this).toggleClass('filled',!!$(this).val());});});

[Денис Трифонов]

Буду очень признателен если поможете..Задавал этот же вопрос на стаке, но он в последнее время больше молчит, чем отвечает.

Answer 1

[doweb]

Честно, никогда не пользовался этим модальным окном. Но судя по документации надо делать следующее

var inst = $('[data-remodal-id=modal]').remodal(); // инициализируем окно

//выполняем ajax-запрос
//если на jquery делаете, то выглядит следующим образом
$.post(ajax_url, data, function(result){

  //выполняем действия после успешной отправки
  inst.close();

}, "json")

Comments

[Денис Трифонов]

я примерно так же предполагаю, что надо было бы делать, вот только смотри, вот код для отправки через аякс.. и куда вставить клоз?
$(document).ready(function(){$("form").submit(function(){var formID=$(this).attr('id');var formNm=$('#'+formID);var message=$(formNm).find(".msgs");var formTitle=$(formNm).find(".formTitle");$.ajax({type:"POST",url:'https://site.ru/mail.php',data:formNm.serialize(),success:function(data){message.html(data);formTitle.css("display","none");setTimeout(function(){$('.formTitle').css("display","block");$('.msgs').html('');$('input').not(':input[type=submit], :input[type=hidden]').val('');},3000);},error:function(jqXHR,text,error){message.html(error);formTitle.css("display","none");setTimeout(function(){$('.formTitle').css("display","block");$('.msgs').html('');$('input').not(':input[type=submit], :input[type=hidden]').val('');},3000);}});return false;});var $input=$('.form-fieldset > input');$input.blur(function(e){$(this).toggleClass('filled',!!$(this).val());});});

[doweb]

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

$(document).ready(function() {
	$("form").submit(function() {
		var formID = $(this).attr('id');
		var formNm = $('#' + formID);
		var message = $(formNm).find(".msgs");
		var formTitle = $(formNm).find(".formTitle");
		$.ajax({
			type: "POST",
			url: 'https://site.ru/mail.php',
			data: formNm.serialize(),
			success: function(data) {
				message.html(data);
				formTitle.css("display", "none");
				setTimeout(function() {
					$('.formTitle').css("display", "block");
					$('.msgs').html('');
					$('input').not(':input[type=submit], :input[type=hidden]').val('');

                                        //ваш код

				}, 3000);
			},
			error: function(jqXHR, text, error) {
				message.html(error);
				formTitle.css("display", "none");
				setTimeout(function() {
					$('.formTitle').css("display", "block");
					$('.msgs').html('');
					$('input').not(':input[type=submit], :input[type=hidden]').val('');
				}, 3000);
			}
		});
		return false;
	});
	var $input = $('.form-fieldset > input');
	$input.blur(function(e) {
		$(this).toggleClass('filled', !!$(this).val());
	});
});

[Денис Трифонов]

Понял, учту. А ты тут уже исправил что-то?Смотрю и не вижу изменений..

[Денис Трифонов]

inst.close(); нужно вставить в ajax запрос? во так примерно

$("form").submit(function() {
    var formID = $(this).attr('id');
    var formNm = $('#' + formID);
    var message = $(formNm).find(".msgs");
    var formTitle = $(formNm).find(".formTitle");
    $.ajax({
      type: "POST",
      url: 'https://site.ru/mail.php',
      data: formNm.serialize(),
      success: function(data) {
        message.html(data);
        formTitle.css("display", "none");
        setTimeout(function() {
          $('.formTitle').css("display", "block");
          $('.msgs').html('');
          $('input').not(':input[type=submit], :input[type=hidden]').val('');

                                        //ваш код

        }, 3000);
      },
      error: function(jqXHR, text, error) {
        message.html(error);
        formTitle.css("display", "none");
        setTimeout(function() {
          $('.formTitle').css("display", "block");
          $('.msgs').html('');
          $('input').not(':input[type=submit], :input[type=hidden]').val('');
        }, 3000);
      }
    });
    inst.close();
    return false;
  });

[doweb]

Где стоит комментарий //ваш код
В этом месте вызываете функцию закрытия окна inst.close()

[Денис Трифонов]

Сделал так

$(document).ready(function() {
  $("form").submit(function() {
    var formID = $(this).attr('id');
    var formNm = $('#' + formID);
    var message = $(formNm).find(".msgs");
    var formTitle = $(formNm).find(".formTitle");
    $.ajax({
      type: "POST",
      url: 'https://site.ru/mail.php',
      data: formNm.serialize(),
      success: function(data) {
        message.html(data);
        formTitle.css("display", "none");
        setTimeout(function() {
          $('.formTitle').css("display", "block");
          $('.msgs').html('');
          $('input').not(':input[type=submit], :input[type=hidden]').val('');

                                        //ваш код
        
       inst.close();
        }, 3000);
      },
      error: function(jqXHR, text, error) {
        message.html(error);
        formTitle.css("display", "none");
        setTimeout(function() {
          $('.formTitle').css("display", "block");
          $('.msgs').html('');
          $('input').not(':input[type=submit], :input[type=hidden]').val('');
        }, 3000);
      }
    });
    return false;
  });
  var $input = $('.form-fieldset > input');
  $input.blur(function(e) {
    $(this).toggleClass('filled', !!$(this).val());
  });
});

а вот это вставил в конце html

var inst = $('[data-remodal-id=firstModal]').remodal();

Но теперь вообще не отправляется. Окно просто обнуляет все данные и остается открытым.

[doweb]

Должно все работать.
Проверяйте на реальном хосте, а не на локальной машине.
Если проверяете на локалке, то скорее всего запрос не получает в ответ информацию об успешной отправки, соответственно он выполняет не success, а error
Можете это проверить. эту функцию inst.close(); добавьте в error

Ну и для полной информации желательно увидеть, что в консоли пишет после отправки формы.
Лично протесттировал ваш скрипт, все работает (но так как проводил тест на локалке, закрывал окно в error)

[Денис Трифонов]

хм, тестил на хосте, но не отправило. Вот сам попробуй https://deep-webb.ru первая же кнопка заказ тура..

[Денис Трифонов]

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

[Денис Трифонов]

вопрос, а вот тут

var inst = $('[data-remodal-id=firstModal]').remodal();

после атрибута data-remodal-id нужно указывать data формы или оставлять modal?

[doweb]

var inst = $('[data-remodal-id=firstModal]').remodal();
Сюда записывается data модалки

По поводу сайта. Может я не внимателен, быстро просмотрел, но почему то не увидел у вас скрипта обрабатывающего ajax

Answer 2

[Денис Трифонов]

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

var inst = $('[data-remodal-id=firstModal]').remodal();

Comments

[doweb]

var inst = $('[data-remodal-id=firstModal]').remodal(); Если модалка открывается, то все отлично сделано.

По поводу отправки цифр и прочего бреда...

$(document).ready(function() {
  $("form").submit(function() {
    var formID = $(this).attr('id');
    var formNm = $('#' + formID);
    var message = $(formNm).find(".msgs");
    var formTitle = $(formNm).find(".formTitle");
    $.ajax({
      type: "POST",
      url: 'https://site.ru/mail.php',
      data: formNm.serialize(),
      success: function(data) {
        message.html(data);
        formTitle.css("display", "none");
        setTimeout(function() {
          $('.formTitle').css("display", "block");
          $('.msgs').html('');
          $('input').not(':input[type=submit], :input[type=hidden]').val('');

                                        //ваш код
        
       inst.close();
        }, 3000);
      },
      error: function(jqXHR, text, error) {
        message.html(error);
        formTitle.css("display", "none");
        setTimeout(function() {
          $('.formTitle').css("display", "block");
          $('.msgs').html('');
          $('input').not(':input[type=submit], :input[type=hidden]').val('');
        }, 3000);
      }
    });
    return false;
  });
  var $input = $('.form-fieldset > input');
  $input.blur(function(e) {
    $(this).toggleClass('filled', !!$(this).val());
  });
});

data: formNm.serialize() - здесь содержится то, что уходит на почту. В принципе ничего сложного, если немного разобраться.