如何将动态添加的行中的值插入数据库

Question

我已经被这个问题困扰了好几天了。非常感谢您的帮助。

• 我正在开发一个 php 表单，当 用户点击按钮ADD。
• 要将值保存到数据库中，用户必须单击SUBMIT 按钮。
• 我面临的问题是数据库不保存 来自动态行的值。

自动完成和动态行

<script>
//autocomplete
  $(function() {
    function log( message ) {
      $( "<div>" ).text( message ).prependTo( "#log" );
      $( "#log" ).scrollTop( 0 );
    }

    $( "#ItemName" ).autocomplete({
      source: "user/requisition_search.php",
      minLength: 1,
      select: function( event, ui ) 
          {
              $('#ItmId').val(ui.item.id);
              $('#StkId').val(ui.item.stkId);
              $('#ItmNameDis').val(ui.item.value);
              $('#ItmUOM').val(ui.item.uom);
              $('#ItmQty').val(ui.item.qty);

          }

    });
  });
//dynamic rows
    $(document).ready(function(){

        $("#add").on("click",function(){

          var rowcount = $("#rowcount").val();
          var row = 
          '<tr id="'+rowcount+'"><td>'+$("#ItmId").val()+'</td><td><input readonly="readonly" name="StkId[]" value="'+$("#StkId").val()+'"/></td><td>'+$("#ItemName").val()+'</td><td>'+$("#ItmUOM").val()+'</td><td>'+$("#ItmQty").val()+'</td><td><input readonly="readonly" name="ReqQty[]" value="'+$("#ReqQty").val()+'"/></td></tr>';

           rowcount = parseInt(rowcount)+1;

           $("#rowcount").val(rowcount);
           $("#dataTab").append(row);
           $("#dataTab").show();
           $("#submit").show();           

        });

    });
</script>

HTML

<form name="jqtest" action="submit.php" method="post">
<label for="ItemName">Search : </label>
<input id="ItemName" size="50"/>

<label for="ItmId">Item Id </label>
<input name="ItmId" id="ItmId" readonly="readonly"/>

<label for="StkId">Stock Id </label></td>
<input name="StkId" id="StkId" readonly="readonly"/>

<label for="ItmNameDis">Item Name </label>
<input name="ItmNameDis" id="ItmNameDis" size="50" readonly="readonly"/></td>

<label for="ItmUOM">Unit Of Measurement </label>
<input name="ItmUOM" id="ItmUOM" readonly="readonly"/>

<td><label for="ItmQty">Quantity Available </label>
<input name="ItmQty" id="ItmQty" readonly="readonly"/>

<label for="ReqQty">Quantity </label>
<input name="ReqQty" id="ReqQty" onkeypress="return numbersOnly(event)" onkeyup="ItmQty_Availability()" disabled="disabled"/>

      <p>
        <input type="reset" name="reset" id="reset" value="RESET"/>
        &nbsp;&nbsp;
        <input type="button" name="add" id="add" value="ADD"/>
      </p>

      <input type="hidden" name="rowcount" id="rowcount" value="1"/>

<table id="dataTab" width="90%" style="display:none;" border="1" cellpadding="0" cellspacing="0">
        <tr>
          <th>Item ID</th>
          <th>Stock ID</th>
          <th>Item name</th>
          <th>UOM</th>
          <th>Quantity Available</th>
          <th>Quantity Requested</th>
        </tr>
      </table>
      <p>&nbsp;</p>
      <p><input style="display:none;" type="submit" name="submit" id="submit" value="SUBMIT"/></p>
    </form>

提交.php

<?php

$num =  $_POST['rowcount'];
for($i=0;$i<$num;$i++)
{

      $strStkId = "";
      if(!empty($_POST)){
          if(isset($_POST["StkId[]"])){
              $strStkId = $_POST["StkId[]"];
          }else{
               echo "<font color=red>Enter the Stock Id</br></font>";
          }

      }
      $strReqQty = "";
      if(!empty($_POST)){
          if(isset($_POST["ReqQty[]"])){
              $strReqQty = $_POST["ReqQty[]"];
          }else{
               echo "<font color=red>Enter the Quantity</font>";
          }

      }

        $tsql =
        "INSERT INTO REQUISITION
        (RequestQuantity, StockId)
        VALUES
        ('$strReqQty','$strStkId')
        ";

        $result = sqlsrv_query($conn, $tsql, array(), array( "Scrollable" => SQLSRV_CURSOR_KEYSET ));   

            if (!$result) {
            die ('<script>
                window.alert("Please enter the requisition details !")
                window.location.href = "requisition.php"; </script>');
            }
            else 
            echo '<script>alert("Your Requisition is In Process"); </script>';
            sqlsrv_close($conn);
}
?>

更新

我了解到 name="StkId" 和 name="StkId[]" 在动态行和输入中发生冲突。 所以我变成了这样的东西：

var row = '<tr id="'+rowcount+'"><td>'+$("#ItmId").val()+'</td><td><input readonly="readonly" name="StkId2" value="'+$("#StkId").val()+'"/></td><td>'+$("#ItemName").val()+'</td><td>'+$("#ItmUOM").val()+'</td><td>'+$("#ItmQty").val()+'</td><td><input readonly="readonly" name="ReqQty2" value="'+$("#ReqQty").val()+'"/></td></tr>';

现在数据被插入数据库但是IF用户输入more than one项目，只有one数据被插入数据库。我做错了什么？我猜它在submit.php 部分，但我不知道为什么。

Answer 1

在提交表单时，您不会在$_POST 中获得动态生成的行值，因为这些根本不是表单输入，而只是在表格中显示为行。但是您可以在 jQuery AJAX 的帮助下实现您的功能。单击提交按钮后，使用 AJAX 调用您的submit.php。下面给出了如何检索这些动态行的值的示例解决方案。您可以根据自己的要求调整此方法。

主页。

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>jQuery Dynamic Rows</title>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script>
    $(document).ready(function(){

        $("#add").on("click",function(){

          var rowcount = $("#rowcount").val();
          var row = '<tr class="dynamic" id="'+rowcount+'"><td>'+$("#itemid").val()+'</td><td>'+$("#itemname").val()+'</td><td>'+$("#uom").val()+'</td><td>'+$("#quantity").val()+'</td></tr>'; 

           rowcount = parseInt(rowcount)+1;

           $("#rowcount").val(rowcount);
           $("#dataTab").append(row);
           $("#dataTab").show();
           $("#submit").show();            

        });

        $("#submit").on("click",function(){
                alert("submit");
                var jsonObj = [];
                i=0;
            $("#dataTab tr.dynamic").each(function(){

               var td = $(this).find('td');

                itemId = td.eq(0).text();
                itemName = td.eq(1).text();
                uom = td.eq(2).text();
                quantity = td.eq(3).text();

                jsonObj.push({
                    itemId: itemId,
                    itemName: itemName,
                    uom: uom,
                    quantity: quantity,
                });
            });

            var dataString = JSON.stringify(jsonObj);


                $.ajax({
                    url: "submit.php",
                    type: "POST",
                    data: {json:dataString},
                    success: function(response){
                               alert(response);
                             }
                });

        });

    });

</script>
    </head>

    <body>


     <form name="jqtest" action="#">

       Item ID : <input type="text" name="itemid" id="itemid"/><br/><br/>
       Item name : <input type="text" name="itemname" id="itemname"/><br/><br/>
       UOM : <input type="text" name="uom" id="uom"/><br/><br/>
       Quantity : <input type="text" name="quantity" id="quantity"/><br/><br/>

       <p> <input type="reset" name="reset" id="reset" value="RESET"/>&nbsp;&nbsp;<input type="button" name="add" id="add" value="ADD"/> </p>
        <input type="hidden" name="rowcount" id="rowcount" value="1"/>
     </form>

     <table id="dataTab" style="display:none;" border="1">

      <tr>
        <th>Item ID</th>
        <th>Item name</th>
        <th>UOM</th>
        <th>Quantity</th>
      </tr>

     </table>

    <p> <input style="display:none;" type="button" name="submit" id="submit" value="submit"/> </p>

    </body>

    </html>

提交.php

<?php

  $arr = json_decode($_POST['json']);


  for($i=0; $i<count($arr); $i++)
   {
     echo "Row ".$i."\n";
     echo "itemId > ".$arr[$i]->itemId.", itemName > ".$arr[$i]->itemName.", uom > ".$arr[$i]->uom.", quantity > ".$arr[$i]->quantity."\n";

   }

?>