javascript - 在js中插入多个数据，在数据库上

Question

我尝试在 JS 中创建一个 Web 应用程序以同时进行多个预订。我已经构建了这段代码：

<script type="text/javascript">
        var prezzo = Number(6.50).toFixed(2);
</script>

    <a href="#">POSTO 1</a> <span style="display: inline-block;" id="p1"></span>  <button onclick="this.style.visibility='hidden'; fp1();">PRENOTA</button> <br>
    <a href="#">POSTO 2</a> <span style="display: inline-block;" id="p2"></span>  <button id="bp2" onclick="fp2();">PRENOTA</button> <br>
    <a href="#">POSTO 3</a> <br>
    <a href="#">POSTO 4</a> <br>



</body>

<script>
function fp1() {

  document.getElementById("p1").innerHTML = '<input type="text" name="nome" placeholder="Inserisci il tuo Nome" id="nome">' + '<input type="text" name="cognome" placeholder="Inserisci il tuo Cognome" id="cognome">'  + prezzo + " " + "€&quot; + " " +'<button id="invia" onclick="invia()" class="btn">INVIA</button>';

  
}

function fp2() {

  document.getElementById("p2").innerHTML = '<input type="text" name="nome" placeholder="Inserisci il tuo Nome" id="nome">' + '<input type="text" name="cognome" placeholder="Inserisci il tuo Cognome" id="cognome">'  + prezzo + " " + "€&quot; + " " +'<button id="invia2" onclick="invia()" class="btn">INVIA</button>';

    document.getElementById("bp2").style.visibility='hidden'; 
}
</script>

<script type="text/javascript">function invia()
 {
    var nome = document.getElementById('nome').value;
    var cognome = document.getElementById('cognome').value;
    
   {
      $.ajax({
          type: 'POST',
          url: "insert.php",
          data: {"cognome": cognome, "nome":nome, "prezzo":prezzo},
          success: function(data){
            console.log(nome);
          },

          error: function(data) {
            console.log("Dati non inviati");
          }
      });
    }

问题是当我尝试在 db 上插入数据时，该函数没有采用正确的值，而只是第一个插入的值。

标签： javascripthtmljqueryformspost