Form with multiple windows

Question

Form with multiple windows

Navigation

#1 by (2 votes)
#2 by (0 votes)

0

I'm trying to make a form with multiple windows, but I do not understand what's going wrong.

Test Code

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

UPDATE

I followed @afonso's suggestion, but it still is not working, I even updated my codepen, it does not work there either.

$( 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 on WordPress. I made a plugin that adds 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 '

html jquery css wordpress

asked by anonymous 29.02.2016 / 16:44

2 answers

0

I had to slightly change your% w / o% but basically what was missing for your code to work was the inclusion of HTML . Without it, jQuery and more other methods do not exist. I included a $(window).load() here in the reply, and I also made a new pen , using the code of your pen old.

Note some conceptual errors in snippet . Whether you're in WordPress or not should not interfere with the working of HTML code. Also ensure that your version of front end will be called and loaded before you run this 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>MeuFormulario</h2><divid="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>

29.02.2016 / 19:06

undefined index How to disable and enable the .click () function of a span when I click on another span using on () off ()

score 2 · Accepted Answer

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><divclass="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 summary, what happens: all div daughters of form are hidden except the one that is currently active (marked with the active class). When clicking the "Next" button, the script looks for the% "parent" of the button that triggered the click, removes the class and arrow div to the next active of the list - if it is the last one, explicitly applies the class in the first (% with%).