Вход

Просмотр полной версии : Не работает асинхронная отправка формы

fenix_63
24.08.2016, 13:31
всем привет. Есть сайт http://brasletic.ru/

Там есть форма "Заполни форму сейчаси получи скидку 70 %". Заполняю поля "Имя" и "Телефон", жму "Получить скидку 70%" - по идее должно письмо идти на почту, которая указана в order.php. Но ничего не приходит. Всегда выполняется функция error. Народ, помогите пожалуйста.

Вот сам AJAX метод, содержится прям в index.htm, само собой jQuery предварительно подключен:


<script type="text/javascript">

function AjaxFormRequest() {
jQuery.ajax({
url: 'order.php', //Адрес подгружаемой страницы
type: "POST", //Тип запроса
dataType: "text", //Тип данных
data: jQuery("#order_form").serialize(),
success: function(response) { //Если все нормально
alert('Сообщение отправлено!');
},
error: function(response) { //Если ошибка
alert('Error!');
}
});
}

</script>


Вот файл order.php:


<?php

if (strlen($_POST['phone']) > 5) {



$to = 'моя_почта@mail.ru';


$subject = 'Новая заявка с сайта brasletic.ru';
$headers = "Content-type: text/html; charset=utf-8 \r\n";
$headers .= "From: brasletic\r\n";

$message = '
<html>
<head>
<title>'.$subject.'</title>
</head>
<body>
<p>Имя: '.$_POST['name'].'</p>
<p>Телефон: '.$_POST['phone'].'</p>
</body>
</html>';

$send = mail($to, $subject, $message, $headers);

}
laimas
24.08.2016, 13:44
Нужно блокировать отправку самой формы. А почтовые отправления так оформлять нельзя - заголовок Content-type: text/html; charset=utf-8 не определяет кодировку subject, subject нужно кодировать.
fenix_63
24.08.2016, 13:46
Может ты знаешь как это реализуется?
laimas
24.08.2016, 13:57
Жмете в браузере F12, откроется отладчик, заходим в консоль и смотрим - ошибок куча. Сперва надо с ними разобраться, а уж потом вопросы задавать. Или показывайте код формы, как отправляется и т.д.. Ну или ждите кто в ошибках ваших копаться захочет, ну и т.д..
fenix_63
24.08.2016, 14:09
Вот код самой формы:


<form class="form text-top" method="post" id="order_form">

<div class="fields incon pad-invert"> <div class="incon" style="width: auto;"> <div class="field" data-type="name">


<div class="name"> <div class=""> Имя&nbsp;<span class="required">*</span> </div> </div> <div class="input">

<input type="text" name="name" class="form-control" style="border-radius: 30px; border-color: rgb(220, 220, 220); color: rgb(49, 49, 49); background-color: rgba(246, 246, 246, 0.439216);">

</div> </div> </div><div class="incon" style="width: auto;"> <div class="field" data-type="phone"> <div class="name"> <div class=""> Телефон&nbsp;<span class="required">*</span> </div> </div> <div class="input">

<input type="text" name="phone" class="form-control" style="border-radius: 30px; border-color: rgb(220, 220, 220); color: rgb(49, 49, 49); background-color: rgba(246, 246, 246, 0.439216);">

</div> </div> </div> </div> <div class="macros-button"><div class="btn-out full xs-none"> <div class="btn-inner incon"> <button class="btn submit font-text" id="uid116" data-action="" hack-data-id="" data-ym_goal="" data-ga_category="" data-ga_action="" data-id="">

<span class="text">Получить скидку 70%</span>

<input onclick="AjaxFormRequest();" value=""> </button>

</style>
</div>
</div>

</div>

</form>


До меня делалось, возможно лишнего много.
laimas
24.08.2016, 14:24
Зачем в коде формы <input onclick="AjaxFormRequest();" value="">? Он вообще ничего полезного не делает, выбросить и:

function AjaxFormRequest() {
$(function() {
$("#order_form").submit(function(e) {
e.preventDefault();
jQuery.ajax({
url: 'order.php', //Адрес подгружаемой страницы
type: "POST", //Тип запроса
dataType: "text", //Тип данных
data: jQuery(this).serialize(),
success: function(response) { //Если все нормально
alert('Сообщение отправлено!');
},
error: function(response) { //Если ошибка
alert('Error!');
}
});
});
});
}

Вашу форму можно даже пустой отправить.

PS. dataType - это тип данных ожидаемых от сервера, в коде не видно чтобы сервер вообще отвечал.
fenix_63
24.08.2016, 14:49
А кнопку то зачем удалять? вызов метода - тут ещё понятно. Отправлять данные то надо по событию - т.е. по клику на кнопку. Я оставил кнопку, добавил type="submit", событие oncklick удалил. в тег <form> добавил method="post". Всё равно не работает. Просто перезагружает страницу и всё, никакие данных на почту не приходят.
laimas
24.08.2016, 14:54
А кнопку то зачем удалять?

<input onclick="AjaxFormRequest();" value=""> - это разве кнопка? Фрма отправляется button, вот что в форме кнопка, а input по умолчанию есть тип text. Вот чего он делает в форме?

Просто перезагружает страницу и всё, никакие данных на почту не приходят.

Потому и перегружает страницу, потому как форма отправляется button, а чего вы там наколбасили, ей по барабану. )

PS. Чуть не забыл - сюда (http://validator.w3.org/#validate_by_input) и проверить <button><input /></button>
fenix_63
24.08.2016, 15:04
Убрал полностью input, оставил только button - всё равно данные не отправляются, и страница перезагружается. Я уж прям и не знаю что делать :(
laimas
24.08.2016, 15:13
$(function() {//это обработка события onload документа, не будет работать, если есть конфликт с JQ по использованию $. Есть такая ошибка в консоли?
$("#order_form").submit(function(e) { //а это установка обработчика отправки формы после готовности документа.
//берем и проверяем просто
alert(1); //сюда то хоть попадаем?
e.preventDefault(); //это предотвращает естественную отправку формы

jQuery.ajax({
url: 'order.php', //Адрес подгружаемой страницы
type: "POST", //Тип запроса
dataType: "text", //Тип данных
data: jQuery(this).serialize(),
success: function(response) { //Если все нормально
alert('Сообщение отправлено!');
},
error: function(response) { //Если ошибка
alert('Error!');
}
});
});
});
fenix_63
24.08.2016, 15:25
Конфликтов с jQuery нет, консоль смотрел. Но скрипт не выполняет даже alert(1). Похоже что submit не происходит. Сейчас попробую button добавить type="submit", да и форме method="post".

Похоже я чего то не понимаю, но раньше делал примерно также - всё нормально отправлялось, и без перезагрузки страницы.
laimas
24.08.2016, 15:36
Похоже что submit не происходит.

Если бы события не было, то форма не отправлялась бы, а страница бы не перегружалась.

Проблема в jQ, у вас версия 3.1.0, а она может быть разной сборки, да Ajax в ней может и отсутствовать. Заремируйте ее подключение и подключите другую версию, например:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

Проверьте отправку запроса.
fenix_63
24.08.2016, 15:49
Не помогло. Но помог вот этот способ, собственно откуда я изначально пример и брал: http://blog.ox2.ru/php/ajax-form/
laimas
24.08.2016, 16:11
Ну если такими костылями решать проблемы, то зачем в этом случае jQuery нужен?
fenix_63
24.08.2016, 16:22
нуу не знаю, мне главное чтоб работало.
laimas
24.08.2016, 16:33
мне главное чтоб работало.

Если это считать работой, то что же тогда есть не работа? :)

Сначала нужно убрать причину ошибок, две простые, это подключение файлов, которых нет на сервере. Связанны с js, это посложнее.

Ну и выяснить баги с jQ, иначе от него толку не будет. Например вот такое будет работать?

jQuery(document).ready(function(){
alert(1)
});
warren buffet
25.08.2016, 09:00
fenix_63, зачем мозг выносишь? Отгружай форму через объект после проверок на клиенте.


x.open(this.method||'post',this.action||location.h ref);
x.onreadystatechange = onload;
x.setRequestHeader("X-Requested-With","XMLHttpRequest");
x.send(new FormData(this)); /* вот соль */
laimas
25.08.2016, 11:48
fenix_63,
из-за кучи ошибок в консоли я вчера поленился все просмотреть, а форм то оказывается две, и поведение второй указывает на то, что формы на страницу что-то добавляет динамически. А значит то, что писал вчера и не будет работать.

И если использовать функцию AjaxFormRequest(), то лучше это сделать так:

<form id="order_form" class="form text-top" onsubmit="yaCounter39237950.reachGoal('order_form', function () {alert('Заявка отправлена!');}"

Зачем этои и зачем здесь разбирайтесь, alert('Заявка отправлена!') по крайней мере здесь точно лишнее. Но если так:

onsubmit="return AjaxFormRequest(this)", а в функции:

function AjaxFormRequest(f) {
jQuery.ajax({
url: 'order.php', //Адрес подгружаемой страницы
type: "POST", //Тип запроса
dataType: "text", //Тип данных
data: jQuery(f).serialize(),
success: function(response) { //Если все нормально
alert("Сообщение отправлено!");
},
error: function(response) { //Если ошибка
alert('Error!');
}
});
return false
}

то отправка формы естественным путем будет отменена.

jQuery("#order_form").serialize() - так не получится, всегда будут отправляться данные первой формы, хотя отправляться будет вторая - id должно быть уникальным, а у вас они одинаковы у обеих форм.

И добавьте хотя бы атрибут required полям формы, иначе ее свободно и пустую отправить можно, а код проверки данных на сервере изменить, иначе все это халтура. Ошибки заполнения формы сервер должен возвращать клиенту, то есть не

success: function(response) { //Если все нормально alert("Сообщение отправлено!");

а диалог.