modx revo FormIt Ajax
Добрый день. Пытаюсь реализовать ajax отправку писем через FormIt, но что-то, где-то пропустил. При нажатии на submit нас перекидывает на страницу формы(index.php?id=2), хотя поидее мы должны оставаться на первой странице где открыта ajax форма… Код вызова <a href="[[~2]]" class="ajax-form call" >Заказать звонок</a> JS код $(window).ready(function() { $('.ajax-form.call').on("click", function (e) { e.preventDefault(); $.ajax({ type: "POST", cache: false, url: this.href, data: $("#callback").serializeArray(), success: function (data) {
$.fancybox(data, {
}); // fancybox
} // success
}); // ajax
}); // on
//type: 'ajax',
$(window).on('submit', 'form.popup-form', function(e){
var formData = $('form.popup-form').serialize();
console.log(formData);
$.ajax({
url: '[[~2]]',
data: formData,
type: 'post',
success: processServerResponse
})
processServerResponse('<div style="text-align: center"><img src="assets/templates/site/images/spinner.gif" alt="загрузка" /></div>');
e.preventDefault;
return false;
});
function processServerResponse(data) {
$('form.popup-form').html(data);
}
}); Код страницы формы <div class="popup popup-form" id="order" style="display:block">
<p>Заказать звонок</p>
[[!FormIt?
&hooks=`spam,email`
&emailTpl=`emailTpl`
&redirectTo=`[[*id]]`
&emailSubject=`Заказан звонок`
&emailTo=`mail`
&validate=`name:required,phone:isNumber:required`
&errTpl=`error`
&successMessage=`<div class="text-succes">Спасибо! Ваше письмо отправлено.</div>`
&validationErrorMessage=`<div class="text-error">Внимание! Заполните все поля.</div>`
&emailFrom=`mail`
]]
<form action="[[~[[*id]]]]" method="post" class="popup-form" id="callback">
[[!+fi.error_message]]
[[!+fi.successMessage]]
[[!+fi.validation_error_message]]
<input type="text" class="[[!+fi.error.name]]" placeholder="Имя" name="name" value="[[!+fi.name]]">
<input type="text" class="[[!+fi.error.phone]]"placeholder="Телефон" name="phone" value="[[!+fi.phone]]">
<input type="submit" value="заказать звонок">
</form>
</div>
Про подкат не забывайте.
Какой подкат, не совсем понял, точнее вообще не поля
joxi.ru/brRDO4pfpV6y21 joxi.ru/nAyz3VMFBGbkrZ
извиняюсь
У вас ссылка является ссылкой. Переход по ней — это нормально, учитывая, что в href= прописан адрес для перехода. Или пропишите href=«javascript:;», или в обработчике .on(«click»)… return false;
поменял сылку на такую <a onclick="return false;" href="javascript:void(0);" class="ajax-form call" >Заказать звонок</a> Но все равно, в открывшемся окне, при нажатии на «Заказать звонок» переадресовует на страницу формы на которой находится сама форма без ничего
На сколько я понимаю FormIt (сам его не юзаю) из коробки ajax не умеет… Надо писать надстройку… или не так?
Все верно. С чего бы это MODX-сущность (пхпшная) отрабатывалась на стороне браузера?
пока отложил formIt, начал делать через ajaxform
Можно через AjaxForm (который больше под это заточен). А можно и form-процессор из пакета modxSite взять и написать не сложный JS-код в несколько строк. Кому что больше нравится.
для данной задачи можно вообще обойтись без сниппетов $('#btn-order').on('click', function(e){ e.preventDefault(); var $this = $(this);
if ($orderForm.valid()){
$this.prop('disabled', true);
var data = $orderForm.serialize();
$.ajax({
url: 'assets/components/modxsite/connectors/connector.php',
method: 'post',
data: data,
success: function(data){
alert(data.message);
}
})
.done(function(){
var $modal = $orderForm.parents('.modal');
$modal.modal('hide');
$orderForm.trigger('reset');
});
$this.prop('disabled', false);
}
}
); данный js код отправляет запрос в файл. в моем случае коннектор в вашем это может обычный php файл который:
- разберет данные посланные ajax
- отправит их с помощь mail()
- отправит ответ.