Ошибка:
Локально:
XMLHttpRequest cannot load file:///C:/Users/Artem/Desktop/AJAX/order%20form/mail.php. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
На сервере пишет так:
ошибка POST 500 ()
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Order form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form action="" id="form" class="form">
<div class="place-input">
<label for="name">Как Вас зовут?</label>
<input type="text" name="name" id="name" placeholder="" required /><br />
</div>
<div class="place-input">
<label for="phone">Моб. телефон: </label>
<input type="text" name="phone" id="phone" placeholder="" required /><br />
</div>
<div class="place-input">
<label for="sity">Ваш город: </label>
<input type="text" name="sity" id="sity" placeholder="" required /><br />
</div>
<div class="place-input">
<label for=""></label>
<button>Заказать книгу</button><br />
</div>
</form>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="script.js"></script>
</body>
</html>
.form{
display: teble;
margin: auto;
}
.place-input{
display: table-row;
}
label, input{
display: table-cell;
}
label{
text-align: right;
padding: 10px;
}
$(document).ready(function(){
$('#form').submit(function(){
$.ajax({
type: 'POST',
url: 'mail.php', // наш файл на сервере, который обрабатывает наши данные и отправляет нам на почту заказ!
data: $(this).serialize() // собираем все данные формы
}).done(function(){
alert("Спасибо за заказ! В течении дня с Вами свяжется автор книги и уточнит детали заказа");
});
return false;
});
});
<?php
$recipient = "belyh.books@gmail.com";
$sitename = "MicroBook.com.ua";
$name = trim($_POST["name"]);
$phone = trim($_POST["phone"]);
$sity = trim($_POST["sity"]);
$message = "ФИО: $name \n Телефон: $phone \n Город: $sity";
$pagetitle = "Новая заявка с сайта \"$sitename\"";
mail($recipient, $pagetitle, $message "Content-type: text/plain; charset:\"utf-8\"\n From: $recipient");
?>