不要刷新以保持表单打开

Question

我有这个代码来创建表单：

<select id="mudar_produto"> 
    <option value="#produto_1">Novo Produto Higiene</option> 
    <option value="#produto_2">Entrada de Produtos Higiene</option>  
</select> 
<section class="hide-section" id="produto_1"> 
<form name="primeiro" id="primeiro" method="POST" action="./inserir">
    <div class="campo">
        <fieldset> 
            <h1>
                <legend>
                    <center>
                        <strong>Produtos de Higiene</strong>
            </center>
        </h1><br> 
        </div>
        <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="segundo" id="segundo" method="POST" action="./inserir"> 
         <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>

然后我有这个脚本，第一个是更改表单，第二个是不刷新页面并保持表单打开，但它不起作用：

<script type="text/javascript"> 
$(document).ready(function(){ 
    $(".hide-section:not(:first)").hide();
    $('#mudar_produto').change(function(){
        $('.hide-section').hide();
        $($(this).val()).show();
    });
    $('#first_dd').change(function(){ 
        var id = $('#first_dd option:selected').val(); 
        $.each($('#second_dd option'),function(){ 
            if($(this).attr('data-id')==id){ 
                $(this).attr('selected',true); 
            }
        }); 
    });
    //Adicona o ouvinte de evento
document.getElementById('primeiro').addEventListener('submit', async function(e) {
    //Cria uma variável response 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();
});
});
</script>

在teste2页面中，我将数据插入到数据库的表中：

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

$conn->close();
return "completed";
}
?>

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

$conn->close(); 
return "completed";
}
?>

当我点击注册按钮时，脚本没有保持表单打开，而是插入到数据库表中

Answer 1

后跟

e.preventDefault();

放入

return false;

e.preventDefault();防止任何其他元素获取事件。返回 false 防止提交完成。

或者试试：

<button type="submit" name="submit" class="botao submit" onclick="return false;">Registo</button>

或者试试：

<input type="button" class="botao submit">Registo</input>