I’m developing a new website, with a multi-step form where the steps are all in separated divs. The problem is: when i click in the first button, it shows the second page, but then it goes back to the first.
Here’s my javascript code:
<script>
var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab
function showTab(n) {
// This function will display the specified tab of the form ...
var x = document.getElementsByClassName("tab");
x[n].style.display = "block";
}
function next(n) {
// This function will figure out which tab to display
var x = document.getElementsByClassName("tab");
// Hide the current tab:
x[currentTab].style.display = "none";
// Increase or decrease the current tab by 1:
currentTab = currentTab + n;
// if you have reached the end of the form... :
if (currentTab >= x.length) {
//...the form gets submitted:
document.getElementById("regForm").submit();
return false;
}
// Otherwise, display the correct tab:
showTab(currentTab);
}
</script>
My html/php code for first two divs:
<div class="tab">
<div id="layout">
<div class="main">
<div class="logo">
<img src="pictures/propcomp.png"/>
</div>
<div class="text">
<h3 class="blue">Olá!</h3> <br>
<h3 class="grey">Seja bem vindo(a) à empresa número 1 na pesquisa Google nesse modelo de férias. Bem como já temos mais de 11.300 inscritos no nosso canal no YouTube.</h3>
<h3 class="blue"><strong>Parabéns!</strong></h3>
<h3 class="blue normal"><strong class="negrito">Você foi pré-selecionado pelos nossos Analistas de Férias de Alto Padrão </strong> para
participar de uma consultoria <strong class="negrito">gratuita e exclusiva</strong> de férias onde na mesma você
conhecerá um método de viajar mais e melhor com sua família. Contudo o seu
tempo para gente vale ouro, então vamos te presentear com um brinde para que
você participe da consultoria. Leia até o final se você quiser saber qual é o brinde!</h3> <br>
</div>
<div class="home">
<a href="">
<button class="btn btn-beleza" type="button" id="nextBtn" onclick="next(1)">
<label class="beleza">Beleza! Quero Participar!</label>
<img src="pictures/arrow.svg" />
</button>
</a>
<div class="beneficio">
<a href="" style="display: flex;"><img src="pictures/interrogacao.svg"/><h4 class="blue normal">Por que estou recebendo esse benefício?</h4></a>
</div>
</div>
<div class="footerimg">
<img style="width:30px; height: 44.5px;"src="pictures/logopequeno.png"/>
</div>
</div>
</div>
</div>
<div class="tab">
<div class="layout">
<div class="main">
<div class="text">
<div class="uausorriso">
<h3 class="blue negrito">Uauuuuuuuu, você é demais!!</h3>
<img src="pictures/sorriso.png"/>
</div>
<h3 class="grey normal">Te parabenizamos por priorizar suas férias e novas experiências. Aliás, tudo passa e o
que fica são os momentos que vivemos com as pessoas que amamos. Afinal, qual é
a história que você vai contar?</h3>
<h3 class="blue normal">Para começar, qual é o seu nome?</h3>
</div>
<div class="">
<input class="inputfield" style="margin-left:32%;"type="text" id="nome" name="nome"><br>
<div class="avancar">
<a href="">
<button class="btn" type="button" id="nextBtn" onclick="next(1)">
<h3>Avançar</h3>
<img src="pictures/arrow.svg" />
</button>
</a>
</div>
</div>
</div>
</div>
I’ve put this online so you can see visually: https://testedeferias.000webhostapp.com/