Why is an Ajax form in MODX submitting/arriving 5 times?

Question

JavaScript

Maybe someone faced a similar problem,
the form magically comes 5 times to the mail.

The mechanism itself looks standard.
Powered by FormIt.
Through Ajax.

Modal window:

<div class="popup-uniq">
  <img src="/assets/images/close.png" class="close">
  <div class="text col-md-7 col-sm-7">
      <h3>День открытых дверей</h3>
    <p>дата место</p>
        
        <div class="radio-list">
            <input type="radio" id="radio01" name="address" value="адрес 1" form="krsndr-form" checked />
            <label for="radio01"><span></span>адрес 1</label><br>
            <input type="radio" id="radio02" name="address" value="адрес 2" form="krsndr-form" />
            <label for="radio02"><span></span>адрес 2</label>
        </div>
        
        <p>текст</p>
  </div>
  
</div>

Form Processing:

The form itself:

<form id="krsndr-form" method="POST" action="" class="col-md-offset-1 col-md-4 col-sm-4">
  <h3>Заголовок</h3>
  <h3 class="special"></h3>
  <div class='block'>
    <input type="hidden" name="typeform" value="Всплывающее окно">
    <!--label for="name">Введите Ваше имя</label-->
    <input required type="text" class="name" name="name" placeholder="Введите Ваше имя">
    <!--label for="phone">Введите Ваш телефон</label-->
    <input required class='phone' type="text" name="phone" class="phone" placeholder="Введите Ваш телефон">
    <input required class='email' type="text" name="email" class="email" placeholder="Введите Ваш e-mail">
  </div>
  
  <div class='block'>
    <button type='submit'>Записаться</button>
    <button type='submit' class="special"></button>
  </div>	
</form>

Text of the letter:

<h1>Заявка с сайта </h1>

Пользователь оставил заявку

<br />
<br />
<b>Имя:</b> <br>
<b>Телефон:</b> <br>
<b>Email:</b> <br>
<b>Адрес:</b> 
<br />
<br />

Страница на которой находится посетитель: <a href="">Вопрос</a><br />
Адрес веб сайта с которого пришел  посетитель:<a href=""></a><br />
IP - адрес: <br />
Дата: 

Send script:

$(function() {
      $('form').submit(function(e) {
        var $form = $(this);
        $.ajax({
          type: $form.attr('method'),
          url: $form.attr('action'),
          data: $form.serialize(),
        }).done(function(data) {
        	if(data){
        	//$('form button').after('<div class="success"><p>Сообщение отправлено</p></div>');
        	$('.popup').fadeOut();
        	$('.popup-point').fadeOut();
          $('.popup-uniq').fadeOut();
        	$('.popup-success').fadeIn();
        	$('section.popup_bg').fadeIn();
          //console.log('success');
          ga('send', 'event', 'Forms', 'submit', 'Kursi');
         	}
        }).fail(function() {
         // console.log('fail');
        });
        //отмена действия по умолчанию для кнопки submit
        e.preventDefault(); 
      });

});

The script is not in the document-ready. but just as a function in a file.
I checked if the file is called several times, it seems to be pulled only once.

help advice please.

Answer 1

Wait, why hang up an ajax request on form submit if AjaxForm is already in use? Just specify an action on the form on the same page:action=""