Send form without updating page and show hidden div

Question

Good guys I have a form that saves the data in the database and works fine , but I need to click submit the form appear a div hidden with the list of data saved in the database (I already have the right list) my big problem and the div appear as soon as you submit the form without updating the page , I tried some codes in Javascript and jQuery that did not work. Can someone help me ?

This and the form to enter the data :

<form action="" method="post" id="meufrm" enctype="multipart/form-data">
<fieldset>

    <legend style="color: #ffffff" class="btn btn-inverse">Cadastro </legend>



    <label for="nome" style="color: #000"><strong>Nº da Venda :</strong> </label>
    <input type="number" name="num_venda"></br></br>


    <div id="datavenda">
        <label for="nome" style="color: #000"><strong>Data :</strong> </label>
        <input type="date" name="data_venda"></br></br>
    </div>


    <div id="placavenda">
        <label for="nome1" style="color: #000"><strong>Placa :</strong> </label>
        <input type="text"  name="placa" ></br></br>
    </div>

    <div id="kmvenda">
        <label for="imagem" style="color: #000"><strong>KM : </strong></label>
        <input type="number"  name="km"></br></br>
    </div>

    <?php

    mysql_connect('127.0.0.1','root','');

    //escolher a base de dados
    mysql_select_db('mecanica');
    $query='Select * from produtos';

    ?>



    <label for="produtos" style="color: #000"><strong>Produto : </strong></label>
    <select name="produtos">
        <?php

        $resultado=mysql_query($query);

        while($linha=mysql_fetch_array($resultado))
        { 

            echo '<option  value="' . $linha['id_produto'] . '">' . $linha['produtos'] . '</option>';
        }
        echo '</select>';
        ?>

    </select><br><br>


    <div id="servicovenda">
        <?php
        mysql_connect('127.0.0.1','root','');


        mysql_select_db('mecanica');

        $query='Select * from servicos';

        ?>



        <label for="servicos" style="color: #000"><strong>Serviços : </strong></label>
        <select name="servicos">
            <?php

            $resultado=mysql_query($query);


            while($linha=mysql_fetch_array($resultado))
            {

                echo '<option  value="' . $linha['id_servico'] . '">' . $linha['servicos'] . '</option>';
            }
            echo '</select>';
            ?>
        </select><br><br>
    </div>

           <div id="enviarvenda">
        <input type="submit" class="btn btn-inverse" value="Enviar" name="send" >

        <a href="listadevendas.php" class="btn btn-inverse" >Cancelar</a>
    </div>

</fieldset>

and as soon as I sent the data I would have q list the results of the hidden div on the same page

Answer 1

I advise sending the data to the server-side via AJAX, so you better control the behavior of your page, and do not give that Reload bore with the submit of the form.

$('#divOculta').hide();
function salvarExemplo(){

  $.ajax({
    url: "index.php", //Form que recebe o "submit"
    data: {id:1,nome:'Ragnar'} //Aqui vai seus parametros
  }).success(function(data) {
    $('#divOculta').html(data.lista); //Aqui vc recebe o retorno e monta sua lista na div oculta

    //Caso queira mostrar a div oculta.
    $('#divOculta').show();

  });
}

_{Ajax is the way of force, learn to use and respect force. ;-)}