动态发票表单字段并过帐到数据库

时间:2016-08-02 13:58:44

标签: javascript php jquery

我正在建立一个表单来创建发票。目前它的表单字段为:

产品名称,数量。

我有一个"添加更多"添加上述表单字段的另一行的按钮。

然后它作为一个数组提交到另一个php页面。我遇到的问题是将每个相关的表单字段相互匹配,因为当我将它保存在数据库中时,我需要正确的产品名称,QTY显然位于表中的同一行。只是不确定如何匹配它们。

目前我在表单字段页面上的代码是:

<html>  
      <head>  
           <title>Invoice Test</title>  
           <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  

           <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
           <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
      </head>  
      <body>  
           <div class="container">  
                <br />  
                <br />  
                <h2 align="center">Invoice Test</h2>  
                <div class="form-group">  
                     <form name="submit" id="submit" action="name.php" method="POST">  
                          <div class="table-responsive">  
                               <table class="table table-bordered" id="dynamic_field">  
                                    <tr>  
                                         <td><input type="text" name="product_name[]" placeholder="Product Name" class="form-control name_list" /></td>  
                                         <td><input type="text" name="qty[]" placeholder="QTY" class="form-control name_list" /></td>  
                                         <td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>  
                                    </tr>  
                               </table>  
                               <input type="submit" name="submit" id="submit" class="btn btn-info" value="Submit" />  
                          </div>  
                     </form>  
                </div>  
           </div>  
      </body>  
 </html>  
 <script>  
 $(document).ready(function(){  
      var i=1;  
      $('#add').click(function(){  
           i++;  
           $('#dynamic_field').append('<tr id="row'+i+'"><td><input type="text" name="product_name[]" placeholder="Product Name" class="form-control name_list" /></td><td><input type="text" name="qty[]" placeholder="QTY" class="form-control name_list" /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');  
      });  
      $(document).on('click', '.btn_remove', function(){  
           var button_id = $(this).attr("id");   
           $('#row'+button_id+'').remove();  
      });  
 });  
 </script>  

在表单提交的name.php页面上。从阵列中获取每个产品和关联数量并将它们放入数据库行的最佳方法是什么。请记住这是动态的。

在name.php上,当我打印出$ _POST时,我目前有这个数组结构:

Array
(
    [product_name] => Array
        (
            [0] => test1
            [1] => test2
            [2] => test3
            [3] => test4
        )

    [qty] => Array
        (
            [0] => 1
            [1] => 2
            [2] => 3
            [3] => 4
        )

    [submit] => Submit
)

我猜我需要计算密钥然后在数组的另一个维度上匹配它们。只是不确定这是最好的方式,甚至不知道如何做到这一点。

2 个答案:

答案 0 :(得分:1)

你可以用这个

$productName = $_POST['productName'];
$qty = $_POST['qty']

foreach($productName as $key => $productName) {
  $productQty = $qty[$key];

  //Use your ORM (or whatever) to inster into DB
  //$productName and $productQty

}

修改

或者,更好的是,您可以使用PHP array_combine

$productName = $_POST['productName'];
$qty = $_POST['qty']

$arryWithTotals  = array_combine($productName, $qty);

foreach($arrayWithTotals as $productName => $productQty) {
  //insert into DB
}

答案 1 :(得分:0)

If you wish you can use like these way.

<html>
<head>
    <title>Invoice Test</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <br />
    <br />
    <h2 align="center">Invoice Test</h2>
    <div class="form-group">
        <form name="submit" id="submit" action="name.php" method="POST">
            <div class="table-responsive">
                <table class="table table-bordered" id="dynamic_field">
                    <tr>
                        <td><?php
                            session_start();

                            if (isset($_SESSION["message"]) && !empty($_SESSION["message"])) {
                                echo $_SESSION["message"];
                                unset($_SESSION["message"]);
                            }

                            ?></td>
                        <td><input type="text" name="product_name[]" placeholder="Product Name" class="form-control name_list" /></td>
                        <td><input type="text" name="qty[]" placeholder="QTY" class="form-control name_list" /></td>
                        <td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
                    </tr>
                </table>
                <input type="submit" name="submit" id="submit" class="btn btn-info" value="Submit" />
            </div>
        </form>
    </div>
</div>
</body>
</html>
<script>
    $(document).ready(function(){
        var i=1;
        $('#add').click(function(){
            i++;
            $('#dynamic_field').append('<tr id="row'+i+'"><td><input type="text" name="product_name[]" placeholder="Product Name" class="form-control name_list" /></td><td><input type="text" name="qty[]" placeholder="QTY" class="form-control name_list" /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');
        });
        $(document).on('click', '.btn_remove', function(){
            var button_id = $(this).attr("id");
            $('#row'+button_id+'').remove();
        });
    });
</script>

PHP
====

$data = $_POST['product_name'];
$data2 = $_POST['qty'];

$product_name = "'" . implode("','", array_values($data)) . "'";
$qty = "'" . implode("','", array_values($data2)) . "'";

$conn = mysql_connect("localhost", "root", "") or die("unable to connect Mysql");
mysql_select_db("Your DB Name called here") or die("unable to connect DB");

$query = "INSERT INTO `Your DB Name called here`.`Your Table Name called here` (`id`, `product_name`,`qty` ) VALUES (NULL, '$product_name', '$qty')";
if (mysql_query($query)) {
    $_SESSION["message"] = "Successfully submitted";
}
header("location:your page name.php");