@gretyl007

Как заблокировать повторную отправку данных из контактной формы?

Добрый день. На сайте есть небольшой тест-опрос, после которого появляется контактная форма. Данные из формы отправляются с задержкой и пользователь может нажать на кнопку отправки повторно.
У меня два вопроса:
Из-за чего форма может отправляться с задержкой?
Как добавить блокировку повторного нажатия на кнопку отправки данных?
Код формы:
"use strict" 
var Test = {
    jsonText: null,
    curQ: 0, 
    result: [],
    isTestActive: false,

    init: function() {
        this.isTestActive = true;
        this.curQ = 0; 
        // загружаем json файл
        $.ajax({
            url: '/test/json/date.json',
            dataType: 'json',
            async: false,
            cache: false,
            success: function(data) {
                Test.jsonText = data
            }
        });

      
        for (var i = 0; i < this.jsonText.questions.length; i++) {
            this.result[i] = 1;
        }
        // биндим кнопку закрыти теста
        $('#close-t').on('click', function() {
            Test.cancelTest();
        });
        $('#test-type').text(this.jsonText.title);
        this.showCurQuestion(0); 

        Test.checkLimit(); 
        $('#test').fadeIn(); 

        $('#nextQ').on('click', function() {
            Test.result[Test.curQ] = $('#variants').find(':checked').data('r'); 
            Test.curQ += 1; 
            Test.checkLimit(); 
            Test.showCurQuestion(Test.curQ); 

        });
        // событие кнопки пред. вопрос
        $('#prevQ').on('click', function() {
            Test.curQ -= 1;
            Test.checkLimit();
            Test.showCurQuestion(Test.curQ);
        });
    },
    checkLimit: function() {
        this.curQ <= 0 ? $('#prevQ').prop('disabled', true) : $('#prevQ').prop('disabled', false);

    },

    // вывод текущего вопроса
    showCurQuestion: function(curQ) {
        var self = this;
        var delay;
        (curQ == 0) ? delay = 0 : delay = 300;
        $('#curQ').fadeOut(delay);
        setTimeout(function() {
            if (curQ == self.jsonText.questions.length) {
                $('#curQ').fadeIn(delay);
                self.showResult();
                return;
            }
        if(curQ !=5 ){
                $('.test-contacts-block').css('background-image', 'url(' + self.jsonText.questions[curQ].img[self.result[curQ]-1] + ')');
        }
        else {
            $('.test-contacts-block').css('background-image', 'url(/test/date-img/price.png)');
        }
        $('#q-pos').text(curQ + 1);
        // общее кол-во вопросов
        $('#number').text(self.jsonText.questions.length);
            $('#curQ-title').text(self.jsonText.questions[curQ].q); // заголовок вопроса
            $('#variants').text(''); // очищаем блок #variants
            // наполняем блок вариантами ответов
            $(self.jsonText.questions[curQ].ans).each(function(k, v) {
                $('#variants').append('<p><input type="radio" name="vars" id="' + (k + 1) + '" data-r="' + (k + 1) + '">' +
                    '<label for="' + (k + 1) + '">' + v + '</label>' + '</p>');
                    if(curQ != 5){
                    $('#'+(k+1)).on('click', function(){
                        $('.test-contacts-block').css('background-image', 'url(' + self.jsonText.questions[curQ].img[k]+ ')');
                    });
                    }
            });
            // если вопросов больше 2 меняем их ширину
            if (self.jsonText.questions[curQ].ans.length > 2) {
                $('#variants > p').css('width', 94 / (Test.jsonText.questions[curQ].ans.length / 2) + '%');
            }
            // присваиваем значение checked согласно массиву result
            $('#variants>p>input').eq(Test.result[curQ] - 1).prop('checked', true);
            $('#curQ').fadeIn(delay);
        }, delay);
        // двигаем прогресс-бар
        $('.progress-bar > span').css('width', curQ * 100 / self.jsonText.questions.length + '%');
    },

    showResult: function() {
        var jsonResult = this.jsonText.result;
        var result = this.result.slice();
        result.pop(); 
        var resultToString = result.join('');
        $('#variants').css('justify-content', 'center');
        $('#curQ-title').html('Спасибо за прохождение теста,' + '</br>' + ' вам подходят услуги:').css({
            'text-align': 'center',
            'margin-bottom': 8
        });
        $('.control-btns').hide();
        $('.progress-bar > span').css('width', '100' + '%');
        $('.test-type-wrapper').html('</br>' + 'Тест завершен').css('text-align', 'right');
        $('#curQ').css('margin-top', 8);
        var userResult;
        // находим соответствие результата
        for (var i = 0; i < jsonResult.length; i++) {
            userResult = jsonResult[i];
            if (userResult.id == resultToString) {
                userResult = i;
                break;
            }
        }
        $('#variants').text('');
        for (var i = 0; i < jsonResult[userResult].pages.length; i++) {
            $('#variants').append(
                '<div class="user-result-item" target="_blank">' +
                '<img src="/' + jsonResult[userResult].pages[i].img + '" class="absolute-item">' +
                '<div class="user-result-item_text absolute-item">' +
                '<div class="user-result-item_title">' + jsonResult[userResult].pages[i].title +
                '</div>' +
                '</div>' +
                '</div>'
            );
        }

        $('.test-contacts-block').css('background-image', 'none').css('background-color', '#f5f5f5').css('display', 'flex').append(
            '<div class="test-form_wrapper">' +
            '<div class="test-form_title">Оставьте заявку, чтобы узнать подробнее о выигранных услугах и получить скидку <span>5%</span> на любую из них</div>' +
            '<form action="" method="post" id="test-submit">' +
            '<label class="label label-nature-footer">' +
            '<input name="name" type="text" class="input input-nature-footer input-text-nature-footer input-text-name-nature-footer test-input" placeholder="Введите имя" pattern="[А-Яа-яЁёA-Za-z]{3,}[А-Яа-яЁёA-Za-z\s]*" required="" autocomplete="off">' +
            '<i class="icon icon-form-nature-footer-user label__icon label-nature-footer__icon-user"></i>' +
            '</label>' +

            '<label class="label label-nature-footer">' +
            '<input name="phone" id= type="text" class="input input-nature-footer input-text-nature-footer input-text-phone-nature-footer test-input" placeholder="Введите телефон" required="" autocomplete="off">' +
            '<i class="icon icon-form-nature-footer-phone label__icon label-nature-footer__icon-phone"></i>' +
            '</label>' +
            '<input type="submit" class="input input-nature-footer input-submit-nature-footer test-input-submit" value="Отправить">' +
            '</form>' +
            '</div>'
        );
        var mailResult = '';
        for (var i = 0; i < this.result.length; i++) {
            mailResult += this.jsonText.questions[i].ans[this.result[i] - 1] + '\n';
        }
        mailResult += 'Услуги: ';
        for (var i = 0; i < jsonResult[userResult].pages.length; i++) {
            mailResult += jsonResult[userResult].pages[i].title + ', ';
        }
        //отправка ajax
        $('#test-submit').on('submit', function(e) {
            e.preventDefault();
            $.ajax({
                url: '/crm/mail-test.php',
                type: "POST",
                data: {
                    name: $(this).find('input[name="name"]').val(),
                    phone: $(this).find('input[name="phone"]').val(),
                    type_form: window.location.pathname,
                    comment: mailResult
                },
                success: function(data) {
                    document.location.href = '/spasibo_test';
                },
                error: function(response) { 

                }
            });
        });
    },
    cancelTest: function() {
        this.jsonText = null;
        this.curQ = 0;
        this.result = [];
        this.isTestActive = false;
        $("#test").fadeOut(400);
    }
};

$(document).ready(function() {
    $.ajaxSetup({
        cache: false
    });
    $('body').append(
        '<button id="t-init" style="position:fixed;bottom:30px;right:80px;width:auto;font-size: 16px;background-image: linear-gradient(to bottom, #ff7544, #ff7949, #fe7d4f, #fe8054, #fd8459);border:none;padding: 18px 21px;border-radius:25px;color:#fff">Пройдите тест</button>'
    ).append('<div id="test-container"><div>');


    $('#t-init').bind('click', function() {
        $('#test-container').load('/test/tpl.html', function() {
            Test.init();
        });

    });
    setTimeout(function() {
        if (Cookies.get('tested') == undefined && Test.isTestActive == false) {
            $('#test-container').load('/test/tpl.html', function() {
                Test.init();
            });
            Cookies.set('tested', 'value', {
                expires: 1,
                path: '/'
            });
        }

    }, 7000);


    $(document).on('click', function(e) {
        var container = $(".test-wrapper");
        if (container.has(e.target).length === 0) {
            Test.cancelTest();
        }
    });
});
  • Вопрос задан
  • 255 просмотров
Решения вопроса 1
@ar2rsoft
PHP-developer
Сразу после клика на кнопку, добавить ей аттрибут disabled.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы