Problem displaying popup when sending forms

Question

Problem displaying popup when sending forms

Navigation

#1 by (1 votes)

0

I developed a form, when the user clicks on the send button, a GIF appears and then it has to appear a modal saying that the information has been sent up, so the GIF works normally, however when the form is submitted the GIF is added and the POPUP is not appears I would like to know if I am doing something wrong follow 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 remember that the modal you are using is boostrap

javascript ajax popup

asked by anonymous 11.08.2017 / 19:30

1 answer

Create different indexes for different searches - MongoDB Array of data retrieved from a response

score 1 · Answer 1

Your logic is not wrong, but I think this is a loading issue 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 ready event triggers loading of JavaScript code after the entire HTML document is loaded, thus preventing any element from being recognized. I did some testing at home based on your example and it worked