Question

我的表单中包含输入字段，如下图所示。每次单击“添加”按钮时，都会附加包含输入字段的行。

html代码如下：

<div class="row">
         <div class="row ifields">
                <div class="col-sm-3 form-group">
                </div>
                <div class="col-sm-2 form-group">
                    <input type="text" class="form-control" name="pname" placeholder="Product Name" />
                </div>
                <div class="col-sm-2 form-group">
                    <input type="number" min="1" class="form-control text-center" name="pquantity" placeholder="Product Quantity" />
                </div>
                <div class="col-sm-2 form-group">
                    <select class="form-control text-center" name="qtype">
                        <option value="g">g</option>
                        <option value="Kg">Kg</option>
                        <option value="ml">ml</option>
                        <option value="L">Lt.</option>
                        <option value="pc">Pc</option>
                    </select>
                </div>
                <div class="col-sm-2 form-group">
                    <input type="text" class="form-control text-center" name="pcost" placeholder="Product Cost" />
                </div>
                <div class="col-sm-1"><button class="btn btn-default add-btn">Add</button></div>
              </div>
    </div>
    <div class="row iclone"></div>
 </div>

和Jquery代码：

$(document).ready(function(){
        $('.add-btn').click(function(){
            var cl = $('.ifields').first('.row').clone(true);
            $('.iclone').append(cl);

        });
});

我想浏览每一行并创建一个JSON文件。例如：

[{
  "product" : "A",
  "quantity" : "100",
  "quantitytype" : "g",
  "cost" : "100"
},
...
....
]

如何创建此JSON输出？请指导。

Answer 1

您可以使用map()创建所需的对象数组。试试这个：

var data = $('.row.ifields').map(function() {
    return {
        product: $(this).find('[name="pname"]').val(),
        quantity: $(this).find('[name="pquantity"]').val(),
        quantityttype: $(this).find('[name="qtype"]').val(),
        cost: $(this).find('[name="pcost"]').val()
    };
}).get();

然后，您可以根据需要使用data数组 - 可能是$.ajax()来电。

Working example

多个输入字段到JSON

1 个答案: