使用表單提交從附加字段獲取數組

Question

我有一個表單，我也想附加一個額外的輸入字段，但是由於某種原因，當我提交表單時，這些字段沒有提交，我不明白為什么？

預期行為：單擊按鈕，每次單擊按鈕時將 1x 字段附加到表單的 wrapperVary 中。 這部分工作正常，字段會附加，我可以在框中鍵入一個值。

然后當表單提交時，我希望在一個數組中看到這些字段，例如：

"variant": { "1": { "opt1": "small", "opt2": "blue", "opt3": "cotton", "opt4": "1" }, "2": { "opt4": "2" }, "3": { "opt4": "3" }, "4": { "opt4": "4" } } ` 這里是 HTML：

<form method="POST" action="{{ url('/submit') }}">
            <div class="row">
                <div class="form-group col-md-3">
                    <label>Option 1</label>
                    <select class="form-control" name="variant[1][opt1]">
                        <option value="1"> 1 </option>
                        <option value="2"> 2 </option>
                        <option value="3"> 3 </option>
                    </select>
                </div>

                <div class="form-group col-md-3">
                    <label>Color</label>
                    <select class="form-control" name="variant[1][opt2]">
                        <option value="1"> 1 </option>
                        <option value="2"> 2 </option>
                        <option value="3"> 3 </option>
                    </select>
                </div>


                <div class="form-group col-md-2">
                    <label>Material</label>
                    <select class="form-control" name="variant[1][opt3]">
                        <option value="1"> 1 </option>
                        <option value="2"> 2 </option>
                        <option value="3"> 3 </option>
                    </select>
                </div>
                <div class="form-group col-md-1">
                    <label>Opt4</label>
                    <input type="number" name="variant[1][opt4]" class="form-control">
                </div>
            </div>


            <div class="wrapperVary"></div>
            <a href="javascript:void(0);" class="addVary btn btn-primary btn-sm btn-outline" title="Add field"> <i class="fa fa-plus"></i> Add</a> 


            <div class="card-footer ">
                <button type="submit" class="btn btn-fill btn-info">Submit</button>
            </div>

        </form>

這是用於附加字段的jQuery：

$(document).ready(function(){

//variables
var addButton = $('.addVary');
var Div = $('.wrapperVary');
var maxUse = 10;

var x = 1;
var i = 2;
var HTML = "<input name='variant[${i}][opt1]'>";

//add
$(addButton).click(function(){
    if(x < maxUse){ 
        $(Div).append(HTML);
        x++;
        i++;
    }
});

//remove
$(Div).on('click', '.removeVary', function(e){
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
});

});

我沒有看到任何明顯的東西，我已經仔細檢查了語法/格式是否正確，控制台中沒有顯示任何內容，並且如前所述該字段附加到表單中，但在提交時沒有顯示？

我也歡迎任何有關如何更好地解決此問題的建議。

編輯：

重要的是，提交中唯一不顯示的數據是附加字段，表單中已有的字段顯示在提交的數據中。

所以目前，提交的數據如下所示：

"variant": {
"1": {
  "opt1": "small",
  "opt2": "blue",
  "opt3": "cotton",
  "opt4": "1"
},

Answer 1

嘗試創建新的 DOM 元素。 我過去在加載 DOM 后在表單中添加 html 時遇到過問題。

嘗試這樣的事情。

var element1 = document.createElement("INPUT");         
element1.name="un"
element1.value = un;
element1.type = 'hidden'
form.appendChild(element1);