Div hidden/visible does not disappear when you click the search button

Question

Good night,

I have a page with 3 Divs and within each div has a different form, I leave all the Divs hidden and make them appear as the value selected in a first combobox(select) option that is visible. When the hidden div appears, it comes with another option select and a button for the user to do the search, only that every click on the Divs button with the selected search option disappears, and did not want them to disappear, wanted when clicking the button, the combobox div together with the selected div was visible and with its values selected showing the result, until the person selects another option and makes another search...someone can help me: example:

I keep them hidden here:

<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 that selects which div should appear, as you select her option the div is visible:

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

And as you select the value Divs appear:

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

To be more clear, I want that when for example the div3 appears and the person clicks the button3 doing a search, the div combobox,and the div3 and the button3 remain visible and only disappear if the person selects the div2 for example. is for my tcc if anyone can help I appreciate.

Answer 1

First you will need to identify the click on each button to prevent the submission of the form, with this you "intercept" this action and can handle it in the way you think necessary. Below follows a functional example, in place of the alert you will add the actions you will take with the intercepted form data, I assume by the Forms actions you will fetch something from somewhere, so you will need to implement a Ajax to do this.

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

Answer 2

Hello, first thank you to everyone who responded and are trying to help me... I did it this way that @Darlei showed... I implemented ajax, it really worked only that my action, no longer does the search, it’s like the button is inactive.. I click and he doesn’t answer.. I did so:

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

I put that when I clicked on the div1 button it remained visible, only that the button lost the search action... And my action is doing the same page search as I put there in div1...but stopped searching.. because this happened?