Form with multiple windows

Question

I’m trying to make a form with multiple windows, but I don’t understand what’s going wrong.

Code for testing

What I want to do is that by clicking the buttons it hides and shows the next form.

UPDATE

I followed the suggestion of @Fonso, but it’s not working yet, including updated my codepen, there also does not work.

$( window ).load(function() {
    $('form button').on('click', trataForm);

    function trataForm(event) {
        event.preventDefault();
        var $bloco = $(event.currentTarget).parents('div');

        $bloco.removeClass('active');

        if($(this).hasClass('next')){
            if ($bloco.is(':last-child'))
                $(event.currentTarget).parents('form').submit(); //<-aqui
            else
                $bloco.next().addClass('active');
        }else{
            if (!$bloco.is(':first-child'))
                $bloco.prev().addClass('active');
        }
    }
});

I’m in Wordpress. I’ve made a plugin that adds the css and js. It forces you to make calls within a Function, or $( window ).load, and for some reason it always falls into the first condition (where I put the comment '<-here'). Someone who knows how to solve this?

Answer 1

I suggest a simpler approach (of course, you can complete and increment the code):

$('form button').on('click', trataForm);

function trataForm(event) {
  event.preventDefault();
  var $bloco = $(event.currentTarget).parents('div');

  $bloco.removeClass('active');

  if ($bloco.is(':last-child'))
    $(event.currentTarget).parents('form').submit();
  else
    $bloco.next().addClass('active');
}

form > div {
  display: none;
}
form > div.active {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="bloco1 active">
    <p>Conteúdo do bloco 1</p>
    <button>Next</button>
  </div>
  <div class="bloco2">
    <p>Conteúdo do bloco 2</p>
    <button>Next</button>
  </div>
  <div class="bloco3">
    <p>Conteúdo do bloco 3</p>
    <button type="submit">Next</button>
  </div>
</form>

In short, what happens: all div daughters of form are hidden except the one that is active at the moment (marked with the class active). When clicking the "Next" button, the script looks for the div "parent" of the button that triggered the click, removes the class and arrow active next time div from the list - if it is the last, explicitly apply the class in the first (bloco1).

Answer 2

I had to slightly alter yours HTML but basically what was missing for its code to work was the inclusion of the jQuery. Without him, $(window).load() and more other methods do not exist. I have included a snippet here in reply, and also made a new thumb drive, using the code of your thumb drive ancient.

Note some conceptual errors in HTML. The fact that you are in Wordpress or should not interfere with the functioning of code front end. Also ensure that your version of jQuery will be called and loaded before you run this your routine.

$(window).load(function() {
    $('form button').on('click', trataForm);

    function trataForm(event) {
        event.preventDefault();
        var $bloco = $(event.currentTarget).parents('div');

        $bloco.removeClass('active');

        if ($(this).hasClass('next')) {
            if ($bloco.is(':last-child'))
                $(event.currentTarget).parents('form').submit();
            else
                $bloco.next().addClass('active');
        } else {
            if (!$bloco.is(':first-child'))
                $bloco.prev().addClass('active');
        }
    }
});

div.mult_form {
    border: 1px dotted black;
    padding: 20px;
}

form > div.mult_form {
    display: none;
}

form > div.mult_form.active {
    display: block; 
}

.mf_button {
    display: inline;
    margin-top: 10px !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
    <h2> Meu Formulario </h2>
    <div id="0" class="mult_form active">
        Valor 1: <input type="text" id="idvalor1" name="valor1">
        <button class="mf_button next">next</button>
    </div>
        
    <div id="1" class="mult_form">
        Data de Aniversario: 
        <input type="date" id="idbirthdate" name="birthdate">
        <button class="mf_button preview">voltar</button> 
        <button class="mf_button next">next</button>
    </div>
        
    <div id="2" class="mult_form">
        Produto Usado: 
        <select id="idproduct" name="product">
            <option value="katlei">Katléia</option>
            <option value="kairo">Kairo</option>
        </select>
        <button class="mf_button preview">voltar</button> 
        <button class="mf_button next">submit</button>
    </div>
</form>