当我使用jquery将数据添加到表price和item undefined时

Question

我正在使用jQuery和PHP创建一个简单的库存控制系统。当我选择项目时，它会询问数量。输入数量后，点击“增加”按钮，需要将所有明细添加到表中。但只增加数量，其他明细不增加。我在下面附上了屏幕截图。和代码下面我到目前为止尝试的。

截图

形式

<div class="row">
    <div class="col-sm-3">
        <div class="container">
            <div class="list-group-item list-group-tem-action active">Item</div>
            <div class="panel-body bg-dark" style="color: white">
                <form id="frm-project">
                    <div class="form-group">
                        <div >
                            <img class="photo" id="Chocolate" src="images/chocolate-ice.jpg" width="100" height="100" data-toggle="modal" data-target="#exampleModal">
                            <b>Chocolate</b>
                        </div>
                        <div>
                            <img src="images/mango.jpg" width="100" height="100" data-toggle="modal" data-target="#exampleModal">
                            <b>Mango</b>
                        </div>
                        <div  >
                            <img class="photo" id="Venila" src="images/venila.jpg" width="100" height="100" data-toggle="modal" data-target="#exampleModal">
                            <b>Venila</b>
                        </div>
                        <div >
                            <img class="photo" id="Strawberry" src="images/sww.jpg" width="100" height="100" data-toggle="modal" data-target="#exampleModal">
                            <b>Strawberry</b>
                        </div>
                        <div>
                            <img class="photo" id="MixFruit" src="images/mixfruit.jpg" width="100" height="100" >
                            <b>MixFruit</b>
                        </div>  
                    </div>
                </form>
            <!-- missing div -->
        </div>
    </div>
</div>

表

<div class="col-sm-6">
    <div class="container">
        <div class="list-group-item list-group-tem-action active">AddProducts</div>
        <table id="tbl-item" class="table table-dark table-bordered" cellspacing="0" width="100%" align="center">
            <thead>
                <tr>
                    <th>Delete</th>
                    <th>Item</th>

                    <th>Price</th>
                    <th>Qty</th>
                    <th>Total</th>
                </tr>
            <!-- missing </thead> -->
            <tbody>
            </tbody>
        </table>
    </div>
</div>   

bootsstrip模型点击点击img询问数量

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <label>Qty</label>
                <input type="number" id="qty" name="qty" placeholder="Qty">
            </div>
            <div class="modal-footer">
                <input type="button" class="btn btn-info" value="ADD" onclick="add()">
                <input type="button" class="btn btn-warning" value="Reset" name="reset" id="reset" >
            </div>
        </div>
    </div>
</div>

输入数量后点击“增加”按钮，数据需要增加表jQuery

    function add()
    {
        var price = null;
        var item;

        $(".photo#Chocolate").click(function ()
        {
            item = "Chocolate";
            price =56;
        });

        $(".photo#Venila").click(function ()
        {
            alert("Venila");
        });

        var qty = $('#qty').val();
        tot = qty * price;
        var table1 =
            "<tr>" +
            "<td><button type='button' name='record' class='btn btn-warning' onclick='deleterow(this)'>Delete </td>" +
            "<td>" + item + "</td>" +
            "<td>" +  price +  "</td>" +
            "<td>" +  qty +  "</td>" +
            "<td>" +  tot +  "</td>" +
            "</tr>" ;
        total += Number(tot);
        $('#total').val(total);
        $("table tbody").append(table1);
    }

Answer 1

您只是在代码中显示javascript和html。

通常，Web应用程序会将数据保存到服务器上的数据库（例如MySQL）。否则，您的数据只存储在用户的浏览器中，并将丢失。

从您的问题中，听起来您将使用PHP来实现这一部分（持久性）。

您将需要JavaScript/jQuery将数据发送到php脚本。在您的示例中，您将希望使用类似jquery Post的内容。然后，PHP脚本将获取输入，验证并将其保存到数据库中。

基本的想法是这样运作的。

html页面包含一些JavaScript/jQuery，可以从服务器发送/接收数据。对于发送您，可以使用如下内容。

 $.post('myserver/myapp/submit.php',$('#frm-project').serialize());

目前，您的表单实际上并不包含任何输入字段。你会想要像这样的东西

您的服务器将保存（put/post）或将数据发送回您的Web页面(GET)，您的submit.php将包含一些处理数据的代码。

 ....
 // set up your database connection, etc.
 // $db = mysqli(.....);
 ....

 $mixFruitQty = $_POST['MixFruit'];
 //sanitize your input ! just showing small example of what you might do
 $mixFruitQty = intval($mixFruitQty)
 // save to database
 $db->query("UPDATE myDBTable SET qty = {$mixFruitQty} WHERE id = 'MixFruit'";
 ...