Добрый день! Уже неделю бьюсь с этой формой. Делала по образцу с сайта
https://html5css.ru/howto/howto_js_form_steps.php
но никак не получается настроить ajax отправку этой формы
сайт на котором делаю форму на wordpress
При отправке формы в консоли появляется ошибка:
TypeError
Cannot read property 'style' of undefined
указывает на строчки 3 строчки: 1 - где нужному этапу формы присваивается display block, 2 - в функции nextPrev где прописано отображение правильного этапа формы, 3 в коде формы где вызывается функция nextPrev
Код самой формы:
<form id="regForm" method="post" action="">
<div class="tab">
...
</div>
<div class="tab">
...
</div>
<div class="tab">
...
</div>
<div class="tab tab-3">
...
</div>
<div class="inline-block">
<button type="button" id="nextBtn" onclick="nextPrev(1)">Дальше</button>// при отправке формы ошибка в консоли указывает на эту строку
<button type="button" id="prevBtn" onclick="nextPrev(-1)">Назад</button>
</div>
<!-- Circles which indicates the steps of the form: -->
<div style="opacity: 0;text-align:center;margin-top:40px;">
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
</div>
</form>
js код:
var currentTab = 0;
showTab(currentTab);
function showTab(n) {
var x = document.getElementsByClassName("tab");
x[n].style.display = "block"; // при отправке формы ошибка в консоли указывает на эту строку
if (n === 0) {
document.getElementById("prevBtn").style.display = "none";
} else {
document.getElementById("prevBtn").style.display = "inline";
}
if (n == (x.length - 1)) {
document.getElementById("nextBtn").innerHTML = "Получить КП и каталог";
} else {
document.getElementById("nextBtn").innerHTML = "Дальше";
}
fixStepIndicator(n);
}
function nextPrev(n) {
var x = document.getElementsByClassName("tab");
if (n == 1 && !validateForm()) return false;
x[currentTab].style.display = "none";
currentTab = currentTab + n;
if (currentTab >= x.length) {
document.getElementById("regForm").submit(function(e){
e.preventDefault();
function myform_ajax_send(adress_object,size_object,type_object,form_job,name_test,email_test){
jQuery.ajax({
type: 'POST',
url: myform_Ajax.ajaxurl,
dataType:'json',
data:{
'adress_object' : jQuery('#adress_object').val(),
'size_object' : jQuery('#size_object').val(),
'type_object' : jQuery('#type_object option:selected').val(),
'form_job' : jQuery('input[name=formJob]:checked').val(),
'name_test' : jQuery('#name_test').val(),
'email_test' : jQuery('#email_test').val(),
'nonce': myform_Ajax.nonce,
'action':'myform_send_action'
},
success: function (data) {
if(data.error===""){
alert(data.work);
}else{
alert(data.error);
}
},
error: function () {
alert("Ошибка соединения");
}
});
}
});
}
showTab(currentTab); // при отправке формы ошибка в консоли указывает на эту строку
}
