Добрый день. На сайте есть небольшой тест-опрос, после которого появляется контактная форма. Данные из формы отправляются с задержкой и пользователь может нажать на кнопку отправки повторно.
У меня два вопроса:
Из-за чего форма может отправляться с задержкой?
Как добавить блокировку повторного нажатия на кнопку отправки данных?
Код формы:
"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();
}
});
});
Простой