Зачастую при отправке форм с 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">×</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>
Большое спасибо, очень помогли.