var email = $('#email').val();
var phone = $('#phone').val();
var text = $('#text').val();
Вот эта дичь не нужна!
В полях формы айдишники меняем на атрибут name. Для почты указываем type="email", для телефона type="tel" (на мобильных устройствах будет сразу открыта цифровая клавиатура для ввода телефона).
<form id="sendEmail" action="#" method="POST">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<input type="emal" class="form-control" name="email" placeholder="Email" required />
<input type="tel" class="form-control" name="phone" placeholder="Телефон" required />
<textarea class="form-control" name="text" cols="30" rows="10" placeholder="Сообщение" required></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Отмена</button>
<button type="submit" class="btn btn-primary">Отправить письмо</button>
</div>
</form>
Данные через ajax отправляем на сервер не по клику на кнопку, а по событию submit как это положено для формы.
$(document).ready(function(){
$("form#sendEmail").submit(function(event) {
event.preventDefault();
$.ajax({
type: "POST",
dataType: "html",
url: "page.php",
data: $(this).serializeArray(),
success: function(data) {
$(".modal-header").after(data);
}
});
});
});
P/S: в php обработчик также необходимо добавить проверку и валидацию данных.
