Keep the form open when sending data to the table

Question

I have this code with multiple forms inside the same page:

• page teste1:

<select id="mudar_produto"> 
    <option value="#produto_1">Novo Produto Higiene</option> 
    <option value="#produto_2">Entrada de Produtos Higiene</option> 
    <option value="#produto_3">Novo Produto Nutricia</option> 
</select> 

<section class="hide-section" id="produto_1">
    <form id="form3" action="./teste2" method="POST" onsubmit="return form_validation()"> 
        <fieldset> 
            <h1>
                <legend>
                    <center>
                        <strong>Produtos de Higiene</strong>
            </center>
        </h1><br> 
        <fieldset class="grupo">
    <div class="campo">
            <strong><label for="Nome do Produto">Nome do Produto</label></strong> 
            <input type="text" id="DescricaoProd" name="DescricaoProd" required="" style="width:350px">
        </div>
    <div class="campo"> 
        <strong><label for="Unidade">Unidade</label></strong> 
            <input type="text" id="DescricaoUnid" name="DescricaoUnid" style="width:160px" required="" size="120">
        </div>
        </fieldset>
        <button type="submit" name="submit" class="botao submit">Registo</button>
    </form> 
</section>

<section class="hide-section" id="produto_2"> 
    <form name="form4" action="./teste2" method="POST" onsubmit="return form_validation()"> 
         <fieldset> 
            <h1>
                <legend>
                    <center>
                        <strong>Entrada de Produtos de Higiene</strong>
            </center>
        </h1><br>       
        <fieldset class="grupo">
    <div class="campo">
            <strong><label for="Data Entrada">Data Entrada</label></strong>
            <input id="DataEntrada" type="date" name="DataEntrada" required="" style="width:180px" value="<?php echo date("Y-m-d");?>">
        </div>
        </fieldset>
        <fieldset class="grupo">
    <div class="campo"> 
        <strong><label for="Produto">Produto</label></strong>
        <select id="first_dd" name="Produto" style="width:250px" required> 
            <option></option> 
            <?php 
                $sql = "SELECT * FROM centrodb.ProdHigieneteste WHERE Ativo = 1 ORDER BY DescricaoProd ASC"; 
                $qr = mysqli_query($conn, $sql); 
                while($ln = mysqli_fetch_assoc($qr)){ 
                    echo '<option value="'.$ln['IDProd'].'"> '.$ln['DescricaoProd'].'</option>'; 
                    $valencia[$ln['IDProd']]=array('DescricaoUnid'=>$ln['DescricaoUnid'],'DescricaoUnid'=>$ln['DescricaoUnid']); 
                } 
            ?> 
        </select> 
        </div>
    <div class="campo"> 
        <strong><label for="Unidade">Unidade</label></strong>
        <select id="second_dd" name="Unid" style="width:150px" required> 
            <option></option> 
            <?php
                foreach ($valencia as $key => $value) { 
                    echo '<option data-id="'.$key.'" value="'.$value['DescricaoUnid'].'">'.$value['DescricaoUnid'].'</option>'; 
                }
            ?> 
        </select><br> 
        </div>
        </fieldset>
        <fieldset class="grupo">
    <div class="campo"> 
        <strong><label for="Quantidade">Quantidade</label></strong>
            <input type="text" id="Quantidade" name="Quantidade" style="width:80px" required="" size="40">
        </div>
    <div class="campo"> 
        <strong><label for="Preço">Preço</label></strong>
            <input type="text" id="Preco" name="Preco" style="width:100px" value="0.00">
        </div> 
    </fieldset>
        <button type="submit" name="submit1" class="botao submit">Registo</button>
    </form>
</section>   

<section class="hide-section" id="produto_3"> 
    <form id="form3" name="form3" action="./teste2" method="POST" onsubmit="return form_validation()" > 
        <fieldset> 
            <h1>
                <legend>
                    <center>
                        <strong>Produtos de Nutricia</strong>
            </center>
        </h1><br> 
        <fieldset class="grupo">
    <div class="campo">
            <strong><label for="Nome do Produto">Nome do Produto</label></strong>
                <input type="text" id="ProdNutricia" name="ProdNutricia" style="width:350px" required="" size="120" />
            </div> 
    </fieldset>
        <button type="submit" name="submit2" class="botao submit">Registo</button>
    </form> 
</section> 

On the page teste2 I insert the data into the database table:

<script language="javascript" type="text/javascript">
document.location = "teste1";
</script>

<?php

if(isset($_POST['submit'])){

  $name = $_POST['DescricaoProd'];
  $unid = $_POST['DescricaoUnid'];    

$sql = "INSERT INTO ProdHigieneteste (DescricaoProd,DescricaoUnid) 
VALUES ('$name','$unid')";

if ($conn->query($sql) === TRUE);

$sql1 = "INSERT INTO StockHigieneteste (DescricaoProd,DescricaoUnid) 
VALUES ('$name','$unid')";

if ($conn->query($sql1) === TRUE);

    //Count total number of rows
    $rowCount = $query->num_rows;

header("Location: teste1");

$conn->close();
}
?>

<?php
if(isset($_POST['submit1'])){

  $data = $_POST['DataEntrada'];
  $produto = $_POST['Produto'];  
  $unidade = $_POST['Unid'];   
  $quantidade = $_POST['Quantidade'];
  $preco = $_POST['Preco']; 


$sql = "INSERT INTO regEntradahigieneteste (DataEntrada,Produto,Unid,Quantidade,Preco) 
VALUES ('$data','$produto','$unidade','$quantidade','$preco')";

if ($conn->query($sql) === TRUE);

$sql1 = "UPDATE StockHigieneteste SET Quantidade = Quantidade +" . $quantidade . " WHERE StockHigieneteste.IDProd =" . $produto;

 if ($conn->query($sql1) === TRUE);

    //Count total number of rows
    $rowCount = $query->num_rows;

header("Location: teste1");

$conn->close(); 
}
?>

<?php
if(isset($_POST['submit2'])){

    $name = $_POST['ProdNutricia'];  

$sql = "INSERT INTO ProdNutriciateste (ProdNutricia) 
VALUES ('$name')";

if ($conn->query($sql) === TRUE);

$sql1 = "INSERT INTO StockNutriciateste (ProdNutricia) 
VALUES ('$name')";

if ($conn->query($sql1) === TRUE);

    //Count total number of rows
    $rowCount = $query->num_rows;

header("Location: teste1");

$conn->close();
}
?>

Everything is working correctly with the insertion of data in the table, but when I do the insertion and do the header("Location: teste1"); closes the form I was filling out and I want you to keep it open, since I may have to insert several types of products in the same form.

Answer 1

In this script you add a commit event listener to the form that executes a fetch, there are other options like Xmlhttprequest

//Adicona o ouvinte de evento
document.getElementById('id_do_form').addEventListener('submit', async function(e) {
    //Cria uma variável res com a resposta do fetch
    //this.action pega o action do form e seta como url de envio
    res = await fetch(this.action, {
        //this.method pega o atributo method do form e seta no method da requisição
        method: this.method,
        //O body contém os dados que devem ser enviados, o FormData(this) passa os dados com o nome e valor de cada entrada do form 
        body: new FormData(this)
    })
    //Retorna os dados para a variável res
    .then(data => data)
    //Se ocorrer algum erro mostra no console
    .catch(error => console.log(error));

    //Impede que o form seja submetido e mude de página
    e.preventDefault();
});