Problem showing popup when sending forms

Question

I developed a form, when the user clicks on the send button a GIF appears and then a modal has to appear saying that the information has been sent so far all right the GIF works normal but when the form is submitted the GIF goes away and the Popupdoes not appear like to know if I am doing something wrong follows my Javascript code:

 $("#submit-btn").click(function (e) {
    e.preventDefault();

    var data = $('form').serializeArray();

    if ($(this).hasClass('btn-warranty')) {
        var inputRangeValue = $('.final-value').first().text();
        var specialty = {name: 'specialty', value: $('#specialty').val()};
        var value = {name: 'value', value: inputRangeValue + '000'};
        data.push(specialty);
        data.push(value);
    }

    if ($(this).hasClass('btn-indenizometro')) {
        var question_1 = $('input[name=question_1]:checked').val();
        var question_2 = $('input[name=question_2]:checked').val();
        var question_3 = $('input[name=question_3]:checked').val();
        //var reason =  {name: 'reason', value: sessionStorage.tipo };
        var monthly = {name: 'monthly', value: $('#monthly-value').text()};

        data.push(question_1);
        data.push(question_2);
        data.push(question_3);
        data.push(monthly);
        //data.push(reason);
    }

    var product = {name: 'product', value: window.location.pathname};
    data.push(product);
    $('.loaderImage').show();
    //Ajax post data to server
    $.ajax({
        type: 'POST',
        url: '/request',
        data: data,
        dataType: 'json',
        success: function (data) {
            $('.loaderImage').hide();
            $('#modal-success').modal('show');
            $('form')[0].reset();
        },
        error: function (data) {
            //console.log(data);
        }
    });
});

NOTE: just remembering that the modal I’m using is from boostrap

Answer 1

Your logic is not wrong, but I believe this is a loading problem where the id $('#modal-success') was not recognized.

$(document).ready(function(){
        $(#botao).click( function(){
            $('.loaderImage').show();
            //Ajax post data to server
            $.ajax({
            type: 'POST',
            url: '/request',
            data: data,
            dataType: 'json',
            success: function (data) {
                $('.loaderImage').hide();
                $('#modal-success').modal('show');
                $('form')[0].reset();
            },
            error: function (data) {
                //console.log(data);
            }
        });
    });
});

The event ready triggers the loading of Javascript code after the entire HTML document is loaded, thus preventing any element from being recognized. I did some home testing based on your example and it worked