Как сделать появление Pop-up после отправки формы?

Question

[DimaPolishuk]

есть данная форма

<form method="post">
        <input type="text"  placeholder="Your name" autofocus required pattern="[a-z]{1,15}"/> 
        <input type="text" placeholder="Phone-number" required pattern="[0-9]{6,15}"/>
        <input type="email" placeholder="Email" required/> 
        <input class="button" type="submit"  rel="reg_form" value="request call"/>
      </form>

так я реализовал Попап

<div class="popup reg_form">
		  <span class="home"></span>
      <p class="popup_p">Request sent!</p>
      <p>We will call you as soon as we can.</p>
        <a class="close" href="#">Close</a>
        <button class="close">Close</button>
	    </div>

так попап появляется когда нажимаю на Submit

$(function () {
	$('input.button').click(function () {
		$('div.'+$(this).attr("rel")).fadeIn(500);
		$("body").append("<div id='overlay'></div>");
		$('#overlay').show().css({'filter' : 'alpha(opacity=80)'});
		return false;				
	});	
	$('a.close').click(function () {
		$(this).parent().fadeOut(100);
		$('#overlay').remove('#overlay');
		return false;
	});
	$('button.close').click(function () {
		$(this).parent().fadeOut(100);
		$('#overlay').remove('#overlay');
		return false;
	});
	});

но он появляется как только я нажму на submit а надо когда я нажму, пройдет валидация, если все поля заполнены успешно отправит форму и покажет попап, как это осуществить?

Answer 1

[Макс]

аяксом отправлять и слушать ответ, как я понимаю только так...
например:

<form method="post" id="myform">
        <input type="text"  placeholder="Your name" autofocus required pattern="[a-z]{1,15}"/> 
        <input type="text" placeholder="Phone-number" required pattern="[0-9]{6,15}"/>
        <input type="email" placeholder="Email" required/> 
        <input class="button" type="button" onclick="sendMyForm();"  rel="reg_form" value="request call"/>
</form>

<script type="text/javascript" language="javascript">
 	function sendMyForm() {
 	  var msg   = $('#myform').serialize();
        $.ajax({
          type: 'POST',
          url: 'res.php',
          data: msg,
          success: function(data) {

    $('.popup').fadeIn(500);
    $("body").append("<div id='overlay'></div>");
    $('#overlay').show().css({'filter' : 'alpha(opacity=80)'});

          },
          error:  function(xhr, str){
	    alert('Возникла ошибка: ' + xhr.responseCode);
          }
        });
 
    }
</script>

Comments

[DimaPolishuk]

а без аякса возможно?

[Макс]

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

[DimaPolishuk]

выдает ошибку Возникла ошибка:undefined

[DimaPolishuk]

@RozMaks , может можно проще? мне надо,что просто прошла проверка если все поля заполнены и нажали клавишу, показать попап. Если хотя бы одно поле не заполнено не показывать попап

[Макс]

DimaPolishuk: url: 'res.php', там обработчик формы ВАШ , res.php замените на Ваш

Answer 2

[trushka]

надо вешать обработчик не на клик кнопки, а на submit формы:

$("form").submit(function(){
// валидируем форму;
// отправляем данные на сервер;
// показываем попап;
return false // предотвращаем отправку формы и перезагрузку страницы
})

Как вариант, можно показать попап при отправке, потом при ответе от сервера в том же попапе показать результат, типа данные успешно отправились или ошибка.

Кстати, в обработчике сабмита в качестве this будет элемент формы, и очень просто получить доступ к полям: this.inputName.value - это значение содержащегося в форме <input name="inputName">

и ещё, что это за каменный век .css({'filter' : 'alpha(opacity=80)'})? Если даже хочеться, чтоб ие8 показывал, достаточно написать .css({'opacity' :80)}) - jQuery сам разберётся, если это ИЕ8- и задаст фильтр. Или .fadeTo(0, 80) - тогда даже show() можно не писать..

Comments

[Макс]

плюс, но разницы особой не вижу на форму или на кнопку