Ajax multi-step form submission?

Question

JavaScript

Good afternoon! I've been struggling with this form for a week now. I followed the example from the site https://html5css.ru/howto/howto_js_form_steps.php

but I can’t manage to set up ajax sending this form
the site where I make the form on wordpress
When submitting the form, an error appears in the console:
TypeError
Cannot read property 'style' of undefined
points to lines 3 lines: 1 - where the display block is assigned to the desired stage of the form, 2 - in the nextPrev function where the display of the correct stage of the form is specified, 3 in the form code where the nextPrev function is called

The code of the form itself:

<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 code:

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); // при отправке формы ошибка в консоли указывает на эту строку
}

Answer 1

Cannot read property 'style' of undefined

Would you like to translate? "Can't read the 'style' property of an undefined object.
Depending on the line number "undefined object" this is
or
Learn to use a debugger