Как перехватить событие submit

189

21 апреля 2018, 17:23

Есть форма с такой кнопкой:

<button class="btn btn-lg btn-primary btn-block enter" type="submit">
    Войти
    <img src="{{ asset('img/loading.gif') }}" class="img-loader" width="16" height="16" style="display: none;" alt="">
</button>

И код:

(function($, undefined) {
    $('.enter').on('submit', function() {
        $('.img-loader').css('display', 'inline');
        $('.enter').prop('disabled', 'disabled');
    });
})(jQuery);

На форме всего два полям: логин и пароль (required). Нужно чтобы стили срабатывали при событии submit. Пробовал менять submit на click - все работает как надо. Как решить эту проблему?

Answer 1

Событие submit генерируется только для <form> элемента, а не для кнопок внутри него. Соответственно, и обработчик события нужно добавлять для самой формы:

$("form").on("submit", function() { 
  $(".enter").prop("disabled", true); 
  return false; //для наглядности 
});

<form action=""> 
  <button class="btn btn-lg btn-primary btn-block enter" type="submit">Войти</button> 
</form> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>