There is a form with such a button:

<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>

And the code:

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

There are only two fields on the form: login and password (required). It is necessary that the styles work at the submit event. Tried to change submit to click - everything works as it should. How to solve this problem?

    1 answer 1

    The submit event is generated only for the <form> element, not for the buttons inside it. Accordingly, an event handler must be added for the form itself:

     $("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>

    And when using the disabled boolean property, the value must be assigned to the corresponding one: true or false