Блокировка форм, защита от повторных кликов

Зачастую при отправке форм с ajax нужно подстраховаться от их повторной отправки. Можно пойти велосипедами — через объявление некой булевой переменной и контролем над её состоянием. А можно просто добавлять и снимать атрибут disabled для submit кнопки — это блокирует не только саму кнопку, но и всю форму. То есть нажатие Enter в input полях формы также не сработает, когда управляющей submit кнопке присвоен такой атрибут. Управляющей она будет в том случае, если находится в пределах тега form, либо ей назначен id формы в атрибуте form кнопки.

<div class="modal fade" id="add-subject" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Добавить тематику</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="add-subject-form">
                    <div class="form-group">
                        <input type="text" class="form-control" name="name" placeholder="Название..." required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Отмена</button>
                <button form="add-subject-form" type="submit" class="btn btn-success">Добавить</button>
            </div>
        </div>
    </div>
</div>
<script>
        $(document).on("submit", "#add-subject", function(e) {
            e.preventDefault();
            $("#add-subject [type=submit]").attr("disabled", true);
            $.ajax({
                    type: "POST",
                    url: "/api",
                    data: $("#add-subject form").serialize(),
                    dataType: "json"
                })
                .done(function(data) {

                })
                .always(function() {
                    $("#add-subject [type=submit]").removeAttr("disabled");
                });
        });
 </script>

 

Один комментарий

Оставить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *