0

Estou tentando fazer um formulário com múltiplas janelas, mas não entendo o que está dando de errado.

Codigo para teste

O que quero fazer é que ao clicar nos botões ele esconda e mostra o próximo formulário.

UPDATE

Segui a sugestão do @afonso, mas ainda não está funcionando, inclusive atualizei meu codepen, lá também não funciona.

$( 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');
        }
    }
});

Eu estou no WordPress. Fiz um plugin que adiciona o css e js. Ele obriga você a fazer as chamadas dentro de uma function, ou $( window ).load, e por algum motivo ele sempre cai na primeira condição (onde coloquei o comentário '<-aqui'). Alguém que sabe como resolver isso?

2 Respostas 2

2

Sugiro uma abordagem mais simples (claro, você pode completar e incrementar o código):

$('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>

Em resumo, o que acontece: todas as div filhas do form estão ocultas, exceto aquela que está ativa no momento (marcada com a classe active). Ao clicar no botão "Next", o script procura a div "pai" do botão que disparou o clique, remove a classe e seta active para a próxima div da lista - se for a última, explicitamente aplica a classe na primeira (bloco1).

3
  • Cara muito mais simples. E se na último div eu quiser que ele de um submit com todas as informações? Commented 29/02/2016 às 16:27
  • @MarciusLeandro alterei a lógica para, ao invés de mandar de volta ao primeiro bloco, o último botão submeter o formulário.
    – Afonso
    Commented 29/02/2016 às 16:33
  • @afonoso foi mal suas resposta é muito boa, mas ainda assim não resolveu meu problema, apesar de funcionar aqui no stack, não funciona nem no code open, nem na minha pagina. Commented 29/02/2016 às 17:17
0

Tive que alterar levemente o seu HTML mas, basicamente, o que estava faltando para o seu código funcionar era a inclusão do jQuery. Sem ele, $(window).load() e mais outros métodos não existem. Incluí um snippet aqui na resposta, e também fiz uma nova pen, usando o código da sua pen antiga.

Atente para alguns erros conceituais no HTML. O fato de você estar no WordPress ou não não deve interferir com o funcionamento de código front end. Garanta também que a sua versão do jQuery será chamada e carregada antes de você rodar esta sua rotina.

$(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>

6
  • O que voce alterou no html, fora tirar os <br>? Porque eu mantive meu html só adicionei acima do form scrip do ajax, mas mesmo assim não funcionou. E também não entendi porque o meu codepen não funciona e o seu sim. Commented 29/02/2016 às 18:33
  • Minha pen e meu snippet funcionam por conta da inclusão do jQuery, conforme mencionei na resposta. As alterações do HTML foram sim a retirada dos <br> e, se não me engano, o fechamento de algumas <div> nos locais corretos Commented 29/02/2016 às 18:40
  • No pen tem que adicionar o JQuery? Ele já não tem por padrão? Você pode me dizer onde tinha div fechada errada? Porque pode ser isso, o wordpress que gera esse html e ele gera chei de <p> que não ficha e </br> Commented 29/02/2016 às 18:48
  • Achei no codeopen onde que tem de add o jQuery ai o codeopen passou a funcionar. Bom tenho que ver como o meu plugin add wordpress o Jquery talvez seja isso. Commented 29/02/2016 às 18:53
  • Descobri qual o erro é exatamente ter os <br>, Porque ele pega o next errado. Commented 29/02/2016 às 19:04

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .