@alexru3k

Ajax отправка многоступенчатой формы?

Добрый день! Уже неделю бьюсь с этой формой. Делала по образцу с сайта 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); // при отправке формы ошибка в консоли указывает на эту строку
}
  • Вопрос задан
  • 170 просмотров
Пригласить эксперта
Ответы на вопрос 1
@BorisKorobkov
Web developer
Cannot read property 'style' of undefined

Вам перевести? "Не могу прочитать свойство 'style' у неопределенного объекта.
В зависимости от номера строки "неопределенный объект" это
document.getElementById("prevBtn")

или
x[currentTab]


Научитесь пользовать дебаггером
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
Intspirit Краснодар
от 80 000 до 150 000 ₽
22 янв. 2021, в 03:22
3000 руб./за проект
22 янв. 2021, в 02:27
15000 руб./за проект
22 янв. 2021, в 02:25
15000 руб./за проект