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

Question

[hollanditkzn]

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

<button class="call" name="call" data-toggle="modal" data-target="#callCustom"><img src="image/phoneButton.png" class="phoneButton">ЗАКАЗАТЬ ЗВОНОК!</button>
<div class="modal fade" id="callCustom" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modalWindow">				
				<div class="modal-content cintentModal">
					<div class="modal-body callCustomModal" id="callCustomModal">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<div class="textModal">		
							<p class="lead textModalParag">Оставьте, пожалуйста, свой номер телефона, чтобы мы могли оперативно связаться с Вами: </p>
							<div id="callCustomModal1">
								<form id="forma">
									<div id="phone3"></div>
									<input type="phone" id="phoneInput" name="sendPhone" class="callCustomInput" value="sendPhone" placeholder="7(9__) ___-__-__">
									<button type="submit" class="buttonModal" value="call"  id="buttonModalCall" name="buttonModal">Отправить</button>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
<button name="customLayout" class="design buttonLayerForm" data-toggle="modal" data-target="#MyMaket">Заказать <span id="OrderButton1">свой макет</span></button>
<div class="modal fade" id="MyMaket" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modalWindow">				
							<div class="modal-content">
								<div class="modal-body callCustomModal" id="callMaketModal">
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
									<div class="textModal">
										<p class="lead textModalParag">Оставьте свой номер телефона и наш специалист с Вами свяжется</p>
										<div id="phone7" style="font-size: 14px;"></div>
										<form id="forma3">
											<div></div><input type="phone" id="callMaket" class="callCustomInput" placeholder="7(9__) ___-__-__">
											<button type="submit" id="buttonModal3" class="buttonModal">Отправить</button>
										</form>	
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

И вот скриншот на всякий случай

Answer 1

[iBird Rose]

у модалок бутсрапа есть callback при закрытии к примеру такой:

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

вот там и делаешь в нем все что хочешь. ошибки удялешь. инпуты чистишь и т.д.

Comments

[hollanditkzn]

iBird Rose Как то немного не помогает, если конечно я правильно делаю

$('#MyMaket').on('hidden.bs.modal', function (e) {
	  $('form').reset();
	})

[hollanditkzn]

Потому что у меня почему то ничего не получается при таком методе

[hollanditkzn]

iBird Rose То есть во второй раз и последующий раз она так и выводит. Но не знаю относится ли этот код к этому или нет

[iBird Rose]

hollanditkzn: ну попробуй в этой функции прям напрямую input чистить. к примеру:
$('#MyMaket input').val('');
если сработает - значит ты что то делаешь не так

[hollanditkzn]

iBird Rose: Нет не помогло, подсказали что это валидаторы в самом плагине inputmask.js

[hollanditkzn]

iBird Rose: Просто у меня событие даже не срабатывает когда закрывается https://jsfiddle.net/3orLu3x0/3/
Я просто думаю из-за этого ничего не происходит, потому что система не видит это место hidden.bs.modal. Я так думаю и поэтому не срабатывает событие

[iBird Rose]

че за $(document).function(){ ???
все там работает https://jsfiddle.net/3orLu3x0/7/

[hollanditkzn]

iBird Rose: все я ready забыл

[hollanditkzn]

iBird Rose: Я догнал у меня ajax валидация была включена

$("#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')
	});