如何使用jquery显示多个相同类型的表单字段并在php中获取它们的值

Question

我有一个名为order_master 的表，它存储order_id 列。我还有另一个表order_details，其中包含order_id (FK)、vendor、purchase_date、delivery_date 和person_name 列，其中存储了与order_id 中order_master 表中的order_id 对应的订单的详细信息.

我想显示一个表单，其中将显示一个按钮add new item。每次单击此按钮时，将显示一个新的字段块（如 vendor、purchase_date、delivery_date、person_name）。用户可以单击上面的按钮并在同一个order_id 上输入任意数量的项目。而当他提交表单时，这个表单上的项目必须输入到数据库中。

如何做到这一点？

实际上我正在使用 codeigniter 框架（MVC 架构）。在这里，我附上了视图和 js 文件。

<?php echo form_open(); ?>
        <div id="emp"></div>
        <div class="box">
            <div>                    
            </div>
            <div class="col-lg-12" style="padding-top: 2%;margin-bottom: 3%" id="form-box">
                <div class="col-lg-6 form-group">
                    <select name="item[]" id="item" class="form-control">
                        <option value="">--Select Item--</option>
                        <?php foreach ($items as $item) { ?>
                            <option value="<?php echo $item["id"]; ?>"><?php echo $item["name"]; ?></option>
                        <?php } ?>
                    </select>
                </div>
                <div class="col-lg-6 form-group">
                    <select name="vendor[]" id="vendor" class="form-control">
                        <option value="">--Select Vendor--</option>
                        <?php foreach ($vendors as $vendor) { ?>
                            <option value="<?php echo $vendor["id"]; ?>"><?php echo $vendor["name"]; ?></option>
                        <?php } ?>
                    </select>
                </div>
                <div class="col-lg-4 form-group">
                    <input type="text" name="po_date[]" id="po_date" class="form-control date" placeholder="Purchase Date">
                </div>
                <div class="col-lg-4 form-group">
                    <input type="text" name="quantity[]" id="quantity" class="form-control number" placeholder="Item Quantity Individual">
                </div>
                <div class="col-lg-4 form-group">
                    <input type="text" name="unit_price[]" id="unit_price" class="form-control number" placeholder="Unit Price" style="text-align: left;">
                </div>
                <div class="col-lg-4 form-group">

                </div>
                <div class="col-lg-12 col-md-12 col-sm-12 form-group">
                    <textarea name="description[]" id="description" class="form-control"></textarea>
                </div>
            <div class="col-lg-12 col-md-12 col-sm-12" style="height: 3px;background-color: grey"></div>
                <div class="col-lg-12 col-md-12 col-sm-12 form-group" id="messageBox">

                </div>
            </div>
        </div>

                <a id="add_item" class="col-lg-12" href="">Add new item</a>

        <div class="col-lg-12 col-md-12 col-sm-12 text-center form-group">
            <input type="button" value="Add Purchase Order" id="addpurchaseOrderBtn" class="btn btn-primary">
        </div>
        <?php echo form_close(); ?>


                                                                                            **JS File**                                                                                                      

$("#main_content").css('minHeight', '400px');
$(document).ready(function() {    
    $('#add_item').click(function() {
        var def_ht = $("#main_content").height() + 300;
        $("#main_content").css('minHeight', def_ht);
        $("#form-box").clone(true).appendTo("#form-box");
        return false;
    });

    $("#addpurchaseOrderBtn").click(function() {
        focusId = null;
        var isvalid = false;
        if(validateDropDown('item')){
            isvalid = true;
        }
        if(validateDropDown('vendor')){
            isvalid = true;
        }
        if(validatDate('po_date')){
            isvalid = true;
        }
        if(validateTextbox('quantity')){
            isvalid = true;
        }
        if(validateTextbox('unit_price')){
            isvalid = true;
        }
        if(validateTextbox('description')){
            isvalid = true;
        }
        if(isvalid){
            focusId.focus();
            $("#messageBox").html('<div class="alert alert-danger">There are some error in your submission. Please try again.</div>');
        }else{
            $("#addPurchaseFrm").submit();
        }
    });

});
                                                                                                                          This code works but i am unable to validate all the elements(items) in the form.

Answer 1

你可以试试下面的结构-

<form name="addItem" method="post" action="addItem.php" class="insertItem">
<div class="itemAdd">
<input type="text" name="vendor" >
<input type="text" name="purchase_date" >
<input type="text" name="delivery_date" >
<input type="text" name="person_name" >
</div>
<input type="submit" name="submit" value="Add Item" class="btn btn-primary additem">


$("document").ready(function(){
    $(".additem").click(function(){
        $(".insertItem").append($(".itemAdd").html);
    });
});

然后在 addItem.php 上，您可以执行插入查询将这些数据插入到您的数据库中