Question

我正在尝试从表单中获取数据并将其以JSON格式发布到服务器。我面临的问题是，不会获取动态生成的输入字段的值，而只会获取HTML页面中定义的静态字段的值。

下面是我的HTML表单格式

<form class="form-horizontal" id="product-form"> 
        <div class="form-group">
            <label class="control-label col-sm-2">Category</label>
            <div class="dropdown col-sm-2">
                <select class="form-control" id="categories" onchange="displaySub()">
                    <option value="-1">-- Select Category --</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-2" for="category">Sub-category</label>
            <div class="dropdown col-sm-2">
                <select class="form-control" id="sub-categories" name="category" onchange="displayFields()">
                    <option value="-1">-- Select Sub-category --</option>
                </select>
            </div>
        </div>
   </form>

正在生成动态输入字段的jQuery代码

function displayFields(){
var cat_dropdown = document.getElementById("sub-categories");
var cat_selected = cat_dropdown.options[cat_dropdown.selectedIndex].text;
for(d of sub_cat){
    if(d.text == cat_selected){
        for(e of d.fields){
            $("#product-form").append(`
                <div class="form-group">
                    <label class="control-label col-sm-2" for="${e.field}" name="${e.field}">${e.field}</label>
                    <div class="col-sm-2">
                        <input type="text" class="form-control" id="${e.field}" placeholder="Enter ${e.field}">
                    </div>
                </div>
            `)
        }
        $("#product-form").append(`
            <div class="form-group"> 
                <div class="col-sm-offset-2 col-sm-4">
                    <button class="btn btn-default" id="add-product">Add Product</button>
                </div>
            </div>
        `)
    }    
}

}

用于表单提交的JS代码

$("#product-form").submit(function(e){
    e.preventDefault();
    var form = $(this);
    var data = form.serializeArray();

    $.ajax({
                url: 'http://localhost:3000/products',
                dataType: 'json',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(getFormData(data)),
                success: function(data){
                    console.log("DATA POSTED SUCCESSFULLY"+data);
                },
                error: function( jqXhr, textStatus, errorThrown ){
                    console.log( errorThrown );
                }
    });
});


function getFormData(data) {
   var unindexed_array = data;
   var indexed_array = {};

   $.map(unindexed_array, function(n, i) {
    indexed_array[n['name']] = n['value'];
   });

   return indexed_array;
}

现在，每当我提交表单时，仅会提取类别字段。我想要动态生成的所有字段值。

Answer 1

问题已解决。我将name属性赋予了标签，而不是将其赋予动态生成的input字段。

先前的代码

$("#product-form").append(`
            <div class="form-group">
                <label class="control-label col-sm-2" for="${e.field}" name="${e.field}">${e.field}</label>
                <div class="col-sm-2">
                    <input type="text" class="form-control" id="${e.field}" placeholder="Enter ${e.field}">
                </div>
            </div>
        `)

验证码

$("#product-form").append(`
            <div class="form-group">
                <label class="control-label col-sm-2" for="${e.field}">${e.field}</label>
                <div class="col-sm-2">
                    <input type="text" class="form-control" id="${e.field}" name="${e.field}" placeholder="Enter ${e.field}">
                </div>
            </div>
        `)

如何从jQuery获取动态生成的输入字段的值到JSON对象？

1 个答案: