День добрый! Создал модальное окно плагином fancybox. Работает все хорошо
<div class="zakaz">
<a class="zakaz2" href="#inline"></a>
</div>
<div id="inline">
<h2>Ваша заявка</h2>
<form id="contact" name="contact" action="#" method="post">
<label for="email">Ваш E-mail</label>
<input type="email" id="email" name="email" class="txt">
<br>
<label for="name">Ваше имя</label>
<input type="text" id="name" name="name" class="txt">
<br>
<label for="phone">Телефон</label>
<input type="text" id="phone" name="phone" class="txt">
<br>
<label style="width: 153px" for="msg">Наименование и количество оборудования</label>
<textarea id="msg" name="msg" class="txtarea"></textarea>
<button id="send">Отправить</button>
</form>
</div>
function validateEmail(email) {
var reg = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return reg.test(email);
}
jQuery(document).ready(function() {
jQuery(".zakaz2").fancybox();
jQuery("#contact").submit(function() { return false; });
jQuery("#send").on("click", function(){
var emailval = jQuery("#email").val();
var msgval = jQuery("#msg").val();
var msglen = msgval.length;
var mailvalid = validateEmail(emailval);
if(mailvalid == false) {
jQuery("#email").addClass("error");
}
else if(mailvalid == true){
jQuery("#email").removeClass("error");
}
if(msglen < 4) {
jQuery("#msg").addClass("error");
}
else if(msglen >= 4){
jQuery("#msg").removeClass("error");
}
if(mailvalid == true && msglen >= 4) {
// если обе проверки пройдены
// сначала мы скрываем кнопку отправки
jQuery("#send").replaceWith("<em>отправка...</em>");
jQuery.ajax({
type: 'POST',
url: 'http://salepump.ru/sendmessage.php',
data: jQuery("#contact").serialize(),
success: function(data) {
if(data == "true") {
jQuery("#contact").fadeOut("fast", function(){
jQuery(this).before("<p><strong>Ваша заявка успешно отправлена. В ближайшее время мы на неё ответим</strong></p>");
setTimeout("$.fancybox.close()", 1000);
});
}
}
});
}
});
});
Но при создании уже второй формы, окно появляется, но не отправляется запрос. Ну у первой, ни у второй формы. Делаю таким образом:
<a class="zvonok" href="#inlinee">Заказать обратный звонок</a>
<div id="inlinee">
<h2>Обратный звонок</h2>
<form id="contact" name="contact" action="#" method="post">
<label for="name">Ваше имя</label>
<input type="text" id="name" name="name" class="txt">
<br>
<label for="phone">Телефон</label>
<input type="text" id="phone" name="phone" class="txt">
<br>
<label style="width: 153px" for="msg">Вопрос</label>
<textarea id="msg" name="msg" class="txtarea"></textarea>
<button id="send">Отправить</button>
</form>
</div>
function validateEmail(email) {
var reg = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return reg.test(email);
}
jQuery(document).ready(function() {
jQuery(".zvonok").fancybox();
jQuery("#contact").submit(function() { return false; });
jQuery("#send").on("click", function(){
var emailval = jQuery("#email").val();
var msgval = jQuery("#msg").val();
var msglen = msgval.length;
var mailvalid = validateEmail(emailval);
if(mailvalid == false) {
jQuery("#email").addClass("error");
}
else if(mailvalid == true){
jQuery("#email").removeClass("error");
}
if(msglen < 4) {
jQuery("#msg").addClass("error");
}
else if(msglen >= 4){
jQuery("#msg").removeClass("error");
}
if(mailvalid == true && msglen >= 4) {
// если обе проверки пройдены
// сначала мы скрываем кнопку отправки
jQuery("#send").replaceWith("<em>отправка...</em>");
jQuery.ajax({
type: 'POST',
url: 'http://salepump.ru/callback.php',
data: jQuery("#contact").serialize(),
success: function(data) {
if(data == "true") {
jQuery("#contact").fadeOut("fast", function(){
jQuery(this).before("<p><strong>Ваша заявка успешно отправлена. В ближайшее время мы на неё ответим</strong></p>");
setTimeout("$.fancybox.close()", 1000);
});
}
}
});
}
});
});