Всем добрый день! Есть html форма на NetCat. Как переделать форму и сделать скрипт на js, чтобы при нажатии на кнопку Отправить страница не перезагружалась, и при успешной отправки формы внизу страницы выводилось сообщение Форма успешно отправлена. Пожалуйста помогите сделать, очень мало знаний по js и ajax.
Код самой формы:
Я использую 2 подхода:
1. Более простой:
- отправляйте форму ajax'ом на стандартный скрипт add.php указав GET-параметр isNaked=1
, что получить "голый" контент (без стандартного шаблона страницы).
- укажите обработчику ответа, что ожидаете HTML-контент (т.к. неткат по-умолчанию отдаст вам "голый" чистый HTML-кусок разметки
- распарсите этот кусок как вам надо, например в настройках шаблона вывода инфоблока в поле "Действие после добавления объекта" добавьте какой-нибудь индикатов успешного добавления объекта, вроде Заказ успешно отправлен
Общий вид js функции (jQuery 3+)
$("#OrderForm").submit(function {
var form = $("#OrderForm");
$.post(form.attr('action'), form.serialize() +"&isNaked=1", null, 'html')
.done(function(response) {
if($("#PlaceOrderSuccess", response).length!=-1){
alert('Заказ успешно отправлен');
}
else alert('Произошла ошибка\n\r'+$(".warnText", response));
})
.fail(function(response) {
alert('Произошла ошибка при отправке формы');
}
return false;
});
2. Второй способ более сложный
и заключается в частичной доработке исходного скрипта add.php, но позволяет получать ответ в JSON-формате. В том же каталоге /netcat/add.php можете создать дубликат файла, например ajax_add.php и исправить в нем некоторые строки ближе к концу файла:
if ($File_Mode) {
require_once $INCLUDE_FOLDER . 'index_fs.inc.php';
if (!$templatePreview) {
$nc_result_msg = preg_replace("/(\r\n|\n|\r|\t)/", "", nc_result_msg);
$nc_result_msg = preg_replace("/\s{2,}/", " ", $nc_result_msg);
$data['content'] = $nc_result_msg;
if ($warnText) {
$data['warnText'] = $warnText;
}
echo nc_array_json($data);
} else {
...
}
} else { ...
Все в тех же настройках шаблона вывода инфоблока в поле "Действие после добавления объекта" укажите какую-нибудь индикацию статуса успешной отправки формы, вроде:
$data['Status'] = 1; // заказ сохранен успешно
echo json_encode($data); //отдать ответ в JSON-формате
В отличии от первого способа, в js здесь отправляйте данные на новый скрипт и укажите, что ждете JSON-объект
$.post("/netcat/ajax-add.php", form.serialize() +"&isNaked=1", null, 'html')
Далее без лишних проблем обращайтесь сразу к нужным переменным в ответе:
if(response.status==1){
alert('Заказ успешно отправлен');
}
|
|
|
|