Каждый четный раз форма Ajax не отправляется

Есть страничка с несколькими формами и одинаковыми полями, но в js отлавливается событие submit конкретной формы и отправляется на сервер. И первый раз все работает хорошо, а вот если второй раз отправить хоть ту же форму с новыми значениями хоть соседнюю - происходит перезагрузка страницы а в адресной строке появлется get-запрос.Если еще раз отправить - то все будет работать правильно.

Сами формочки:

<form class="kvm-form">
  <div class="form-group row">
    <input type="hidden" value="1" name="kvmid">
    <label class="sr-only" for="time-1">Время</label>
    <div class="input-group input-group-sm time">
      <input type="text" class="form-control" id="time-1" name="timefor" value="02:00">
    </div>
    <div class="ticket">
      <label class="sr-only" for="ticket-1">Тикет</label>
      <div class="input-group input-group-sm">
        <div class="input-group-prepend">
          <span class="input-group-text">#</span>
        </div>
        <input type="num" class="form-control" id="ticket-1" name="ticket">
      </div>
    </div>

    <div class="rack">
      <label class="sr-only" for="rack-1">Стойка</label>
      <div class="input-group input-group-sm rack">
        <div class="input-group-prepend">
          <span class="input-group-text"><i class="fas fa-server"></i></span>
        </div>       
        <input type="text" class="form-control" id="rack-1" name="rack">
      </div>
    </div>

    <button type="submit" class="btn btn-sm btn-primary" style="width: 100px;">Добавить</button>
  </div>
</form>

<form class="kvm-form">
  <div class="form-group row">
    <input type="hidden" value="2" name="kvmid">
    <label class="sr-only" for="time-2">Время</label>
    <div class="input-group input-group-sm time">
      <input type="text" class="form-control" id="time-2" name="timefor" value="02:00">
    </div>
    <div class="ticket">
      <label class="sr-only" for="ticket-2">Тикет</label>
      <div class="input-group input-group-sm">
        <div class="input-group-prepend">
          <span class="input-group-text">#</span>
        </div>
        <input type="num" class="form-control" id="ticket-2" name="ticket">
      </div>
    </div>

    <div class="rack">
      <label class="sr-only" for="rack-2">Стойка</label>
      <div class="input-group input-group-sm rack">
        <div class="input-group-prepend">
          <span class="input-group-text"><i class="fas fa-server"></i></span>
        </div>       
        <input type="text" class="form-control" id="rack-2" name="rack">
      </div>
    </div>

    <button type="submit" class="btn btn-sm btn-primary" style="width: 100px;">Добавить</button>
  </div>
</form>

//итд..

Ajax (Если что, в коде есть специфика JSON-Api October CMS):

$('form.kvm-form').on('submit', function(event) {
  event.preventDefault();
  $form = $(this);
  $form.request('onKvmUpdate', {
   update: {'kvms::kvms-table': '#kvm-table'},
   complete: function(data) {
        //this.success(data);
        //viewKvmModal(data);
        console.log(data);
    },
    });
});

Обработчик просто записывает в БД и отправляет данные для перерендеринга части страниицы.

Я даже специально использовал конструкцию $form = $(this); - но не помогло. Работает ровно через раз. Что может вызвать такое поведение?


Ответы (0 шт):