Problems to add products to the page with a form without giving refresh!

Question

I’m having trouble getting this code to work, where I have a form:

        <form action="../procs/proc_entrada-produto.php" method="POST" id="conteudo">
        <a href="../index.php">Voltar</a>
            <select name="conteudo">
            <?php  
            include_once('../procs/proc_conn.php');
            $query = "SELECT * FROM tb_produtos" ; /* Define a query de selecao de dados */
            $select = mysqli_query($conn, $query); /* Execução da query */
            while($dado = mysqli_fetch_array($select)){?>
                <option><?php echo $dado['nome_produto']; ?></option>
            <?php } ?>
            </select>
            <button type="submit" id="addItem">Adicionar</button> <!-- Botão de confirmação -->
        </form>

That adds a "select" field with the value of the products registered in my database and that sends to the file "proc_input-product.php":

<?php
include_once('proc_conn.php');
$conteudo = $_POST['conteudo'];

$query = "SELECT * FROM tb_produtos WHERE nome_produto LIKE '%$conteudo%'";
$select = mysqli_query($conn, $query); 
$dado = mysqli_fetch_assoc($select);

$id = $dado['id_produto'];
$ean = $dado['ean_produto'];
$nome = $dado['nome_produto']; 
$quant= $dado['quant_produto'];


?>

And finally the javascript that makes this form run without refresh, but I’m not receiving the data of the variables:

    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/jquery.form.js"></script>
    <script>
    $(document).ready(function(){
        $("#conteudo").ajaxForm(function(){
            $(".lista").append(
            "<tr>"+
            "<td><?php echo $id; ?></td>"+
            "<td><?php echo $ean; ?></td>"+
            "<td><?php echo $nome; ?></td>"+
            "<td><input type='number'/></td>"+
            "<td><input type='number' readonly='true'/></td>"+
            "<td><input type='number' value='<?php echo $quant; ?>' readonly='true'/></td>"+
            "<tr>");
            });
    });
    </script>

The result I expected was every click on the Ubmit button was to add a field with the values relative to the "select" field that has the product name information, please help me!

Answer 1

While running the php code will process the page, you have to make an ajax query and then refresh the page, not to lose the data write them in the Storage location before updating and grab soon after