Как запустить загрузчик только при успешном отправлении формы?

Я хочу, чтобы загрузчик запускался ТОЛЬКО и ТОЛЬКО тогда, когда форма была успешно отправлена (а не только в событии onclick submit button, как это делает код сейчас). Как я могу это сделать? 

    <div id="loader" class= "lds-dual-ring hidden overlay" >
        <div class="lds-dual-ring hidden overlay"> </div>
       <div class="loadcontent"><div><strong>Working on your request...it may take up to 2 minutes.</strong></div></div>

    </div>

Ниже приведен код, в котором загрузчик срабатывает при событии кнопки submit.


    $('#submitBtn').click(function () {


        $('#loader').removeClass('hidden')
        // $('#loader').html('Loading').addClass('loadcontent')

  


        // $("#loading").html("Loading");

    })
</script>

Ниже приведено одно из полей формы, которое принимает значение от пользователя:

        <div class="form-group">
            <div class="form-control"style="padding: 0;">
                
                    {% ifequal field.name 'Port' %} 

                    {% render_field field class="rowforinput marginforfields form-control" style="height: 23px; margin-left: 0; margin-right: 0" title=" For eg. 1/1/48 or 2/1/16" pattern="^[12]/1/(?:[1-3]\d|4[0-8]|[1-9])$" required=true %}

                {% endifequal %}           </div>
        </div>

Чтобы показать загрузчик при успешном вызове AJAX, вы можете переместить код, который показывает загрузчик, из обработчика события click для кнопки submit в функцию обратного вызова успеха в вызове AJAX. Вот пример того, как вы можете изменить свой код, чтобы сделать это:

$('#submitBtn').click(function () {
    // Submit the form using AJAX
    $.ajax({
        url: $(this).attr('action'),  // The URL to submit the form to
        type: $(this).attr('method'),  // The method to use when submitting the form
        data: $(this).serialize(),  // The data to submit with the form
        success: function (response) {
            // Show the loader
            $('#loader').removeClass('hidden');

            // Handle the successful submission of the form here
            // For example, you can display a success message
        },
        error: function (error) {
            // Handle any errors that occurred when submitting the form here
            // For example, you can display an error message
        }
    });
});

Этот код перемещает код, показывающий загрузчик, из обработчика события click для кнопки submit в функцию обратного вызова success в вызове AJAX. В результате загрузчик будет показан только тогда, когда вызов AJAX будет успешным и будет вызвана функция обратного вызова success.

Обратите внимание, что этот код предполагает, что форма имеет атрибут method и атрибут action, которые определяют метод и URL для отправки формы, соответственно. Вам может понадобиться скорректировать эти значения в зависимости от особенностей вашей формы и настройки.

Вернуться на верх