jQuery: мультиклик ломает анимацию

Question

У меня есть простая форма:

<form id="form" action="file.php" method="POST">

  <input class="form-control" type="number"  name="p"  value="0">
  <label for="p">Text</label>

  <input class="form-control" type="number"  name="b"  value="0">
  <label for="b">Text 2</label>

  <input id="submit" type="submit" name="save" value="Save" tabindex="10"/>

  <div id="msg" class="alert-success" style="visibility: hidden;">Saved.</div>

</form>

После того, как пользователь отправит эту форму (может отправлять неограниченное количество раз), он получит сообщение об успехе, которое будет постепенно исчезать.

jQuery:

   $(document).ready()
    {
        $("#form").submit(function (event) {
            event.preventDefault();
            let url = $(this).attr("action");
            $.ajax({
                url: url,
                type: 'POST',
                data: $('#form').serialize(),
                success: function () {
                    $('#msg').css({opacity: 1.0, visibility: "visible"}).animate({opacity: 0}, 1500);
                },
                error: function () {
                    $('#error-msg').css({opacity: 1.0, visibility: "visible"}).animate({opacity: 0}, 1500);
                }
            });
        });
    }

Я использовал animate, потому что в этом случае другие элементы в Layout не будут прыгать вверх после исчезновения сообщения div.

, но проблема в том, когда пользователь нажимает паруслишком быстро (пока сообщение все еще исчезает), сообщение об успехе больше не будет отображаться в будущем, когда он щелкнет.Чтобы это сообщение снова отображалось, страница должна быть обновлена.

К сожалению, я не смог заставить работать код на jsfiddle, потому что я получаю ошибку: {"error":"key missing: title"} (но это не вопрос моего вопроса)

Вопрос: как исправитьэта ошибка с пропавшим сообщением об успешном завершении, если пользователь нажимает много раз, пока происходит исчезновение?

ОБНОВЛЕНИЕ:

Итак, благодаря @Kishan проблема решена.Добавлен идентификатор для кнопки отправки и в AJAX.

$.ajax({
        url: url,
        type: 'POST',
        data: $('#form').serialize(),
        beforeSend : function(){
            $("#submit").prop('disabled',true);
        },
        success: function () {
            $('#msg').css({opacity: 1.0, visibility: "visible"}).animate({opacity: 0}, 1500);
            setTimeout(function(){
                $("#submit").prop('disabled',false);
            },1500);
        },
        error: function () {
            $('#error-msg').css({opacity: 1.0, visibility: "visible"}).animate({opacity: 0}, 1500);
            setTimeout(function(){
                $("#submit").prop('disabled',false);
            },1500);
        }
    });

Answer 1

Просто отметьте это.

$(document).ready()
{
    $("#form").submit(function (event) {
        event.preventDefault();
        let url = $(this).attr("action");
        $.ajax({
            url: url,
            type: 'POST',
            data: $('#form').serialize(),
            beforeSend : function(){
                $("#msg").prop('disabled',true);
            },
            success: function () {
                $('#msg').css({opacity: 1.0, visibility: "visible"}).animate({opacity: 0}, 1500);
                setTimeout(function(){
                    $("#msg").prop('disabled',false);
                },1500);
            },
            error: function () {
                $('#error-msg').css({opacity: 1.0, visibility: "visible"}).animate({opacity: 0}, 1500);
                setTimeout(function(){
                    $("#msg").prop('disabled',false);
                },1500);
            }
        });
    });
}