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

时间:2014-11-17 03:36:18

标签: javascript php jquery sql-server autocomplete

我已经被困在这几天了。非常感谢您的帮助。

  • 我正在处理一个生成动态添加行的php表单 用户单击按钮ADD
  • 要将值保存到数据库中,用户必须单击SUBMIT 按钮。
  • 我遇到的问题是数据库没有保存 来自动态行的值。

AUTOCOMPLETE&动态行

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

submit.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部分,但我无法弄清楚原因。

1 个答案:

答案 0 :(得分:0)

在提交表单时,您不会在$_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>

submit.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";

   }

?>