Form with multiple windows

Asked

Viewed 114 times

0

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?

2 answers

2


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).

  • Much simpler guy. What if in the last div I want him a Ubmit with all the information?

  • @Marciusleandro changed the logic to, instead of sending back to the first block, the last button submit the form.

  • @afonoso was badly its answer is very good, but still not solved my problem, although it works here in the stack, does not work neither in the code open, nor on my page.

0

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>

  • What Voce changed in html, aside from taking the <br>? Because I kept my html I only added above the ajax form scrip, but it still didn’t work. And I also don’t understand why my codepen doesn’t work and your yes.

  • My pen and my snippet work because of the inclusion of jQuery, as I mentioned in the reply. Amendments to HTML were the withdrawal of <br> and, if I’m not mistaken, the closing of some <div> in the right places

  • Do you have to add Jquery? Does it no longer have by default? Can you tell me where you had the wrong closed div? Because it can be this, the wordpress that generates this html and it generates chei of <p> that not plug and </br>

  • I found in the codeopen where you have to add the jQuery ai the codeopen started to work. Good I have to see how my wordpress plugin add the Jquery maybe that’s it.

  • I found out what the error is exactly having the <br>, because it gets the next wrong.

  • @Marciusleandro glad it worked. No pen, you have to add any library you will use. If the answer helped you, mark it as correct

Show 1 more comment

Browser other questions tagged

You are not signed in. Login or sign up in order to post.