1

Boa noite,

Eu tenho uma pagina com 3 divs e dentro de cada div tem um form diferente, eu deixo todas as divs ocultas e faço elas aparecem conforme o valor selecionado em uma primeira comboBox(select)de option que fica visivel. Quando a div oculta aparece, ela vem com outro select de option e um botão para o usuario fazer a busca, Só que a cada click no botão as divs com a option da busca selecionada somem, e não queria que elas sumissem, queria que ao clicar no botão, a div comboBox junto com a div selecionada ficasse visivel e com seus valores selecionado mostrando o resultado, até a pessoa selecionar outra option e fazer outra busca...alguém pode me ajudar: exemplo:

Deixo elas oculta aqui:

<script>
$(document).ready(function() {
    $('#div1').hide();
    $('#div2').hide();
    $('#div3').hide();
    $('#comboBox').change(function() {
        if ($('#comboBox').val() == 'Boletos') {
            $('#div1').show();
            $("#div2").hide();
            $('#div3').hide();
        } else if ($('#comboBox').val() == 'Folhas') {
            $('#div1').hide();
            $("#div2").show();
            $('#div3').hide();
        } else if ($('#comboBox').val() == 'Guias') {
            $('#div1').hide();
            $("#div2").hide();
            $('#div3').show();
        } else {
            $('#div1').hide();
            $("#div2").hide();
            $('#div3').hide();
        }
    });
});
</script>

comboBox que seleciona qual div deve aparecer, conforme seleciona a option dela a div fica visivel:

<select id="comboBox" name="comboBox">
    <option>Selecione sua opção aqui</option>
    <option value='div1'>div1</option>
    <option value='div2'>div2</option>
    <option value='div3'>div3</option>
</select>

E conforme seleciona o valor as divs aparecem:

<form action="div1.php" method="POST">
    <div id="div1">
        <select id="combo1" name="combo1">
            <option value='selecione'>Selecione sua opção aqui</option>
            <option value='Pagamento 1'>Pagamento 1</option>
            <option value='Pagamento 2'>Pagamento 2</option>
        </select>
        <button type="submit" id="btn1" value="btn1">Buscar</button>
    </div>
</form>

<form action="div2.php" method="POST">
    <div id="div2">
        <select id="combo2" name="combo2">
            <option>Selecione sua opção aqui</option>
            <option value='Folha 1'>Folha 1</option>
            <option value='Folha 2'>Folha 2</option>
        </select>
        <button type="submit" id="btn2" value="btn2">Buscar</button>
    </div>
</form>

<form action="div3.php" method="POST">
    <div id="div3">
        <select id="combo3" name="combo3">
            <option>Selecione sua opção aqui</option>
            <option value='Anual 1'>Anual 1</option>
            <option value='Anual 2'>Anual 2</option>
        </select>
        <button type="submit" id="btn3" value="btn3">Buscar</button>
    </div>
</form>

Pra ficar mais claro, quero que quando por exemplo a div3 apareça e a pessoa click no botão3 fazendo uma busca, que a div comboBox,e a div3 e o botão3 continuem visivel e só suma caso a pessoa seleciona a div2 por exemplo. é pro meu tcc se alguém puder ajudar eu agradeço.

4
  • Já tentou colocar return false; ou event.preventDefault(); no botão?
    – hugocsl
    Commented 31/05/2019 às 10:22
  • Joana, o que acha de colocar o código completo aqui jsfiddle.net para a gente te ajudar? Assim fica mais fácil ver o código todo e o que você quer Commented 31/05/2019 às 13:47
  • @hugocsl eu tentei colocar mais não funcionou..
    – Joana
    Commented 31/05/2019 às 17:03
  • @LeonardoNegrão eu não sei mecher nisso, eu sou iniciante kk, to aprendendo ainda
    – Joana
    Commented 31/05/2019 às 17:05

2 Respostas 2

1

Primeiro você vai precisar identificar o clique em cada botão para assim prevenir a submissão do formulário, com isso você "intercepta" essa ação e pode manipular da forma que achar necessário. Abaixo segue um exemplo funcional, no lugar do alert você vai adicionar as ações que vai tomar com os dados do formulário interceptado, presumo pelos actions dos forms você vai buscar algo de algum lugar, então precisará implementar um Ajax para fazer isso.

$(document).ready(function() {
    $('#div1').hide();
    $('#div2').hide();
    $('#div3').hide();
    $('#comboBox').change(function() {
        if ($('#comboBox').val() == 'Boletos') {
            $('#div1').show();
            $("#div2").hide();
            $('#div3').hide();
            acao = 'div1.php';
            form = '#form_1';
        } else if($('#comboBox').val() == 'Folhas'){
            $('#div1').hide();
            $("#div2").show();
            $('#div3').hide();
            acao = 'div2.php';
            form = '#form_2';
        }else if($('#comboBox').val() == 'Guias'){
           $('#div1').hide();
           $("#div2").hide();
           $('#div3').show();
           acao = 'div3.php';
           form = '#form_3';
        }else{ 
           $('#div1').hide();
           $("#div2").hide();
           $('#div3').hide();
        }
    });
    $(document).on('click', '.botao', function(e){
        e.preventDefault();
        $.ajax({
            url: acao,
            type: "post",
            data: $(form).serialize(),
            complete: function (response) {
                $('#output').html(response.algumaCoisa);
            },
            error: function () {
                $('#output').html('Bummer: there was an error!');
            },
        });
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<select id="comboBox" name="comboBox">
    <option>Selecione sua opção aqui</option>
    <option value='Boletos'>Boletos</option>
    <option value='Folhas'>Folhas</option>
    <option value='Guias'>Guias</option>
</select>
<form action="div1.php" id="form_1" method="POST">
    <div id="div1">
        <select id="combo1" name="combo1">
            <option value='selecione'>Selecione sua opção aqui</option>
            <option value='Pagamento 1'>Pagamento 1</option>
            <option value='Pagamento 2'>Pagamento 2</option>
        </select>
        <button type="submit" class="botao" id="btn1" value="btn1">Buscar</button>
    </div>
</form>
<form action="div2.php" id="form_2" method="POST">
    <div id="div2">
        <select id="combo2" name="combo2">
            <option>Selecione sua opção aqui</option>
            <option value='Folha 1'>Folha 1</option>
            <option value='Folha 2'>Folha 2</option>
        </select>
        <button type="submit" class="botao" id="btn2" value="btn2">Buscar</button>
    </div>
</form>
<form action="div3.php" id="form_3" method="POST">
<div id="div3">
    <select id="combo3" name="combo3">
        <option>Selecione sua opção aqui</option>
        <option value='Anual 1'>Anual 1</option>
        <option value='Anual 2'>Anual 2</option>
    </select>
    <button type="submit" class="botao" id="btn3" value="btn3">Buscar</button>
</div>
<div id="output"></div>

1

Olá, primeiramente obrigado a todos que responderam e estão tentando me ajudar...Eu fiz dessa forma que o @Darlei mostrou... implementei o ajax, ele realmente funcionou só que meu action, não faz mais a busca, é como se o botão ficasse inativo..eu clico e ele não responde..eu fiz assim:

$(document).ready(function() {
    $('#div1').hide();
    $('#div2').hide();
    $('#div3').hide();
    $('#comboBox').change(function() {
        if ($('#comboBox').val() == 'Boletos') {
            $('#div1').show();
            $("#div2").hide();
            $('#div3').hide();
        } else if($('#comboBox').val() == 'Folhas'){
            $('#div1').hide();
            $("#div2").show();
            $('#div3').hide();
        }else if($('#comboBox').val() == 'Guias'){
           $('#div1').hide();
           $("#div2").hide();
           $('#div3').show();
        }else{ 
           $('#div1').hide();
           $("#div2").hide();
           $('#div3').hide();
        }
    });
    $(document).on('click', '.botao1', function(e){
        e.preventDefault();
       $('#div1').show();
    });
});

<select id="comboBox" name="comboBox">
                    <option>Selecione sua opção aqui</option>
                    <option value='div1'>Boletos</option>
                    <option value='div2'>Folha</option>
                    <option value='div3'>Guias</option>
                  </select>


               <form action="<?php echo $_SERVER['PHP_SELF'];?>" method="POST">
                  <div id="div1">
                  <select id="combo1" name="combo1">
                    <option value='selecione'>Selecione sua opção aqui</option>
                    <option value='Pagamento 1'>Pagamento 1</option>
                    <option value='Pagamento 2'>Pagamento 2</option>
                  </select>
                   <button type="submit" class="botao1" value="btn1">Buscar</button>
                </div>
                 </form>

                <form action="div2.php" method="POST">
                 <div id="div2">
                  <select id="combo2" name="combo2">
                    <option>Selecione sua opção aqui</option>
                    <option value='Folha 1'>Folha 1</option>
                    <option value='Folha 2'>Folha 2</option>
                  </select>
                  <button type="submit" class="botao2" value="btn2">Buscar</button>
              </div>
            </form>

                 <form action="div3.php" method="POST">
                  <div id="div3">
                  <select id="combo3" name="combo3">
                    <option>Selecione sua opção aqui</option>
                    <option value='Anual 1'>Anual 1</option>
                    <option value='Anual 2'>Anual 2</option>
                  </select>
                  <button type="submit" class="botao3" value="btn3">Buscar</button>
                  </div>

coloquei que quando clicasse no botão da div1 a mesma permanecesse visivél, só que o botão perdeu a ação de busca...E meu action ta fazendo a busca na mesma pagina igual coloquei ali na div1...mas parou de buscar..pq isso aconteceu?

3
  • Porque a submissão foi cancelada, você precisa implementar um ajax para buscar e manipular os dados no retorno. Commented 31/05/2019 às 17:15
  • Editei a resposta anterior com um exemplo simples de ajax Commented 31/05/2019 às 17:24
  • 1
    Olha funcionou, agora só preciso fazer ele trazer minha tabela do banco, vou estudar mais aqui pra fazer ele funcionar do jeito que eu quero, eu sou muito leiga ainda...mas de qualquer forma muito obrigado mesmo @DarleiFernandoZillmer
    – Joana
    Commented 1/06/2019 às 3:46

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 .