Freecode Academy

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>

Comments

Николай Ланец
Николай Ланец

У вас ссылка является ссылкой. Переход по ней — это нормально, учитывая, что в href= прописан адрес для перехода. Или пропишите href=«javascript:;», или в обработчике .on(«click»)… return false;

Павел Коломиец

поменял сылку на такую

<a onclick="return false;" href="javascript:void(0);" class="ajax-form call" >Заказать звонок</a>

Но все равно, в открывшемся окне, при нажатии на «Заказать звонок» переадресовует на страницу формы на которой находится сама форма без ничего

oobrun

На сколько я понимаю FormIt (сам его не юзаю) из коробки ajax не умеет… Надо писать надстройку… или не так?

Николай Ланец
Николай Ланец

Все верно. С чего бы это MODX-сущность (пхпшная) отрабатывалась на стороне браузера?

Николай Ланец
Николай Ланец

Можно через AjaxForm (который больше под это заточен). А можно и form-процессор из пакета modxSite взять и написать не сложный JS-код в несколько строк. Кому что больше нравится.

magr0s

для данной задачи можно вообще обойтись без сниппетов

$('#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 файл который:

  1. разберет данные посланные ajax
  2. отправит их с помощь mail()
  3. отправит ответ.
magr0s

А можно и form-процессор из пакета modxSite

лучше