Answer the question
In order to leave comments, you need to log in
Ajax multi-step form submission?
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>
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 the question
In order to leave comments, you need to log in
Cannot read property 'style' of undefined
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question