Segeja
@Segeja
Дизайнер

Как реализовать отправку письма в модальном окне с помощью ajax?

Всем добрый вечер! У меня такая проблема, пытаюсь сделать отправку заявки заказа, вроде бы сделал, но страница перезагружалась. Тогда я решил это реализовать с помощью ajax, но не получается, заявка просто напросто не отправляется.

Код заявки:
<!----Само окно--->
		<div class="md-modal md-effect-1" id="modal-1">
			<div class="md-content">
				<div id="heading">Оформление заказа<span style="position:relative;top:-10px;font-size:11px;text-shadow: 0 1px 0 #61a961;background:#7dc37e;color:#fff;padding: 1px 4px 1px 4px;border-radius: 2px;left: 3px;font-weight: normal;">Beta</span></div>
				<div>
			
                   
                   
<div style="background: #FFEEB6;padding: 10px;font-size: 13px;margin-bottom: 6px;color: #756755;text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.44);border-radius: 2px;">Данный заказ придет на нашу почту: </div>
                 
                   <?php
$db=new mysqli ("localhost","dbdlestormik","4fb3phz5n4jg","dbdlestormik");
if (mysqli_connect_errno($db)) {echo " Ошибка подключения к базе данных";}

	$query="select * from dle_users where `user_id`=".$id;
	$result=mysqli_query($db,$query);
	$r=mysqli_fetch_assoc($result);
	$email=$r['email'];
	$name=$r['name'];
	
	@$contact_type=$_POST['contact_type'];
	@$contact=$_POST['contact'];
	@$cont=$contact_type.$contact;
	@$type=$_POST['type'];
	@$description=$_POST['description'];
	@$date=date("Y-m-d H:i:s");
	if ($name AND $email AND $cont AND $type AND $description) {
		$query2="insert into dle_orders (`Id`,`User_id`,`Name`,`Email`,`Contact`,`Type`,`Description`,`Date`,`Status`) values (Null,'$id','$name','$email','$cont','$type','$description','$date','1')";
		$result2=mysqli_query($db,$query2);
		if ($result2) {echo "<strong>Заявка успешно подана</strong>";}
	}
	else { echo '
<form id="contact" name="contact" action="#" method="post">
 <label for="">Контакт</label>
<select name="contact_type">
<option value="Skype: ">Skype</option>
<option value="ICQ: ">ICQ</option>
<option value="VK: ">Вконтакте</option>
</select>
<input type="text" name="contact" />

<select name="type">
<option value="Макет">Макет</option>
<option value="Верстка">Верстка</option>
<option value="Дизайн программ для Windows">Дизайн программ для Windows</option>
<option value="Дизайн программ для IOS/Android">Дизайн программ для IOS/Android</option>
</select>
<label for="email">Тест</label>
<input type="email" id="email" name="email" class="txt">
<label for="msg">Сообщение</label>
<textarea id="msg" name="description"  cols="50" rows=""></textarea>
<div style="padding-bottom: 15px;"></div>
<center><span class="buttons">
<input type="submit" class="md-submit" id="end" value="Заказать" />
</form>
';}
?>
               
                   <span class="buttons">
                     
       <button class="md-close">Отмена</button>           
</span>
					
                    <div style="padding-bottom: 24px;"></div>
				</div>
			</div>
		</div>
        <!----Само окно--->
     <div class="md-overlay"></div>


<script type="text/javascript">
	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(".modalbox").fancybox();
		jQuery("#contact").submit(function() { return false; });

		
		jQuery("#end").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("#end").replaceWith("<em>Отправка...</em>");
				
				jQuery.ajax({
					type: 'POST',
					//url: 'zak/sendmessage.php', мне надо как то без подгружаемой страницы, т.к у меня уже 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);
							});
						}
					}
				});
			}
		});
	});
</script>


Подскажите пожалуйста, что исправить.
  • Вопрос задан
  • 3420 просмотров
Пригласить эксперта
Ответы на вопрос 2
@frees2
www.infotuts.com/demo/form-post-json
-------------
E-mail: <input type="email" name="email">
Ответ написан
jt3k
@jt3k
Фронтендер, люблю работать и получать удовольствия
думаю в вашем коде ошибка в логике. Действительно почитайте как происходят асинхронные запросы к серверу
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы