Как очищать форму после закрытие модального окна?

Question

[hollanditkzn]

У меня проблема в том что я не могу очистить форму после закрытие модального окна, так как их всего 3 модального окна, то получается когда закрываешь и открываешь заново, то ошибка о том что поле не заполнилось так и остается. Для номера использую inputmask.js
Мой код вот
https://jsfiddle.net/hollanditkzn/3orLu3x0/1/
И вот скриншот

Answer 1

[Kovalsky]

Form.reset()

Comments

[hollanditkzn]

Никита Полевой Нет не помогает данный код

$('#MyMaket').on('hidden.bs.modal', function (e) {
	  document.getElementById("#forma3").reset();
	})

[Kovalsky]

hollanditkzn: потому что элемента с ID "#forma3" не существует, у вас в примере существует элемент с ID "forma3"

[hollanditkzn]

Никита Полевой: нет все равно не получается. Я думаю, может от плагина, хотя форма все стирается, или можно как-то проверить . Потому что так делаю

$('#MyMaket').on('hidden.bs.modal', function (e) {
	  document.getElementById("forma3").reset();
	  alert('Форма стерлась')
	})

alert не выходит

[Kovalsky]

hollanditkzn: я вам ничем не смогу помочь, потому что приведённая мною функция существует именно для того чтобы сбросить форму, и она делает это независимо от любых подключенных валидаторов. Даже в приведенном вами примере эта функция работает правильно - чистит форму. Если у вас на сайте этого не происходит, то вы что-то делаете неправильно и эта функция в результате просто не выполняется. В любом случае, если вы хотите помощи, то стоило дать ссылку на сайт, лично я по этому примеру не могу сказать в чему вас может быть проблема.

[hollanditkzn]

Никита Полевой: Просто в том лане что событие не происходит и alert не срабатывает
holland-store.ru

[devstudent]

hollanditkzn: а $('#MyMaket').on('hidden.bs.modal', function (e) { - это что за событие сообще, чтобы оно срабатывало?

[devstudent]

hollanditkzn: если по закрытию моддали, то обрабатывайте кли на кнопку, его закрывающую

[Kovalsky]

hollanditkzn: понятно. Я так понимаю вы меня троллите, потому что я выполнил приведённый вами код на вашем же сайте и он работает: алерт выводится, форма чистится. Я надеюсь вы понимаете, что если вы добавляете элементам формы красную обводку, то это не имеет никакого отношения к форме и её содержимому? Form.reset() приводит содержание элементов ввода в форме в первоначальное состояние, никак не затрагивая остальные элементы.

Также, загляните в файл send.js, у вас там код который и добавляет красную обводку.

[Kovalsky]

devstudent:

hidden.bs.modal - This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).

Так что способ выбран правильный.

[devstudent]

Никита Полевой: или способ неправильный, или событие не происходит

[Kovalsky]

devstudent: способ правильный, событие происходит, проверил только что на вашем сайте. Ищите ошибки в консоли или читайте предыдущие комментарии.

[hollanditkzn]

Никита Полевой: там как будто событие вообще не происходит событие

[Kovalsky]

hollanditkzn: я только что проверил.

[hollanditkzn]

а ошибок в консоле не высвечивается. Думаю может переписать лендинг

[Kovalsky]

hollanditkzn: (консоль женского рода). У вас всё прекрасно работает. Разберитесь что вам нужно, что именно вы хотите сделать. Вешайте обработчики не по каким-то магическим правилам, а в соответствии с надобностью - submit на формы, bs.* на .modal, и всё будет хорошо.

[hollanditkzn]

Никита Полевой: Я не могу понять как просто это реализовать. Мне нужно так что когда ты открыл модель, вбил не до конца допустим 7(111)___-__-__, то выходит валидация "Проверьте корректность указанного номера". Потом закрываешь модальное окно и заново открываешь даже это то как было описано также сверху инпута "Проверьте корректность указанного номера". Какой магический метод

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Если да то это в официальной документации bootstrap описана bootstrap-3.ru/javascript.php
А на счет вешать по надобностям

$('#MyMaket').on('hidden.bs.modal', function (e) {
	  $('.modal').clikc(function(){
	  	console.log('Форма стерлась');
	  });
	});

Если я правильно понял или по другому?

[Kovalsky]

hollanditkzn: ну, поняли вы правильно, а код странный. Я представления не имею что это за элемент #MyMaket, поэтому не вижу смысла его использовать. Чтобы выполнить какое-то действие после того как модалка закроется, надо сделать так:

$('.modal').on('hidden.bs.modal', function(e) {
	alert('asdasd');
});

Если вы в эту функцию запихнёте reset, то всё будет работать, форма будет очищаться, но вы что, не понимаете что красная обводка не имеет отношения к форме? Красную обводку вы сами устанавливаете в файле send.js. Посмотрите как она там устанавливается.

[hollanditkzn]

Никита Полевой: Да точно там в файле send.js. используется ajax валидация

[hollanditkzn]

Никита Полевой: Там реализована вот так

$("#forma4").on("submit", function(e){
		e.preventDefault();
		var callPhone=this.procent35Phone.value;
		$.ajax({
			url: "sendEmail.php",
			type: "POST",
			data: {call0: callPhone},
			beforeSend: function(data){
				var send = true;
					$("#phoneInput1").each(function(){
						if (!$(this).val() || $(this).val() == "") {
							$("#phone4").text("Проверьте корректность указанного номера").css("color", "red");
							$(this).css("border-color", "red");
							send = false;
						}
					})
					if (!send) return false;
		    		$("#buttonModal4").text("Ожидайте...")
		    	},
			success: function(data){
				$("#procent35Modal").html(data);
			} 
		});
	});

Просто я пробую сделать так

$('.modal').on('hidden.bs.modal', function (e) {
	  	$('#phone3').text('').css('color', 'white');
	});

То она не перекрашивает

[hollanditkzn]

Никита Полевой: Просто я доконца не понимаю как устроена эта функция в бутсрапа что я просто ее не вижу как подцеплять событие
https://jsfiddle.net/3orLu3x0/4/

[Kovalsky]

hollanditkzn:

$('#phone3').text('').css('color', 'white');

Этот код работает с элементом у которого ID phone3.

А приведенный вами пример на фиддле банально нерабочий, посмотрите в консоль.

[hollanditkzn]

Никита Полевой:

Этот код работает с элементом у которого ID phone3.

Не совсем понял этот момент

[hollanditkzn]

Никита Полевой: Или мне надо как-то очищать ajax запрос?

[Kovalsky]

hollanditkzn: я не знаю как сказать понятнее. Вы мне приводите код:

$('#phone3').text('').css('color', 'white');

Я вам говорю, что этот код работает с элементом у которого ID равен phone3. Что именно здесь непонятно?

"Или мне надо как-то очищать ajax запрос?"

Вам всего лишь нужно при закрытии модалки взять нужный элемент и поменять ему стиль. Какой элемент вам нужен?

[hollanditkzn]

Никита Полевой: #phone3 вот этот стиль надо изменить, потому что в файле send.js реализована это так

$("#phone3").text("Проверьте корректность указанного номера").css("color", "red");
							$(this).css("border-color", "red");

[Kovalsky]

hollanditkzn: Хорошо, захожу на ваш сайт, ищу элемент #phone3, выглядит он вот так:



Далее пробую в рамках эксперимента установить например цвет и текст элемента с помощью кода $("#phone3").text('Test').css('color', 'red');, после чего он выглядит вот так:



То есть всё работает, прекрасно! Дальше, выполняю ваш код, который по закрытию модалки что-то делает с #phone3:

$('.modal').on('hidden.bs.modal', function (e) {
	$('#phone3').text('').css('color', 'white');
});

Открываю модалку, закрываю, смотрю результат:



Всё получилось, текст удалился, а цвет установлен белый.

[hollanditkzn]

Никита Полевой: Странно что у меня не так и не так все выглядит и как было

<div id="phone3" "style="color: rgb(255, 0, 0);"><div>

так он и остался. Ладно думаю что-то не так в компе. А это ты менял в файле send.js?

[Kovalsky]

hollanditkzn: нет, всё выполнялось через консоль.

[hollanditkzn]

все понял, ладно буду искать проблему тогда

Answer 2

[yakupov112]

https://jsfiddle.net/3orLu3x0/2/

Comments

[Игорь Петров]

Там, видимо, проблема валидацию сбросить, а не просто очистить форму.

Решается чтением документации по плагину-валидатору.

[hollanditkzn]

Игорь Петров: Типо так пробовал

$('#MyMaket').on('hidden.bs.modal', function (e) {
	  $('input').inputMask({
	  	definitions: {
	  		validator: remove,
	  	}
	  });
	})

Но так не получилось. Я правильно понял документацию? или нет

[hollanditkzn]

Игорь Петров: Или как я понял у меня старая версия

[hollanditkzn]

Игорь Петров: Если так делаю, то ничего не происходит

$('#MyMaket').on('hidden.bs.modal', function (e) {
	  document.getElementById("forma3").reset();
	  alert('Форма стерлась')
	})

Answer 3

[ev09]

На jQuery
$("#adminForm").trigger("reset");