如何從jQuery獲取動態生成的輸入字段的值到JSON對象？

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>
        `)