jquery - 添加字段不会添加到 POST

问题描述

我正在尝试在表单中添加多种颜色的选项。问题是即使在添加了一个在第一个颜色字段下方添加新字段的按钮之后，后续字段也不会保存在 jQuery 调用和 PHP 控制器上的 dd() 中。

以供参考

<form action="{{ route('item.store') }}" method="POST" enctype="multipart/form-data" id="form"> @csrf
    // trimmed other fields
    <div class="wrapperColor">
        <label for="color">Color/s</label>
        <div class="row" style="padding: 1% 0;">
            <div class="col-9 form-group">
                <input type="text" name="color[]" class="form-control" placeholder="Black" required>
            </div>
        </div>
    </div>

    <button class="add_field_button btn btn-md text-dark">Add More Colors</button>

    // trimmed other fields
    <button type="submit" class="btn btn-success">SUBMIT</button>
</form>

<script>
    $(document).ready(function(e) {
        var wrapper = $(".wrapperColor");
        var add_button = $(".add_field_button");
        var x = 1; //initlal text box count

        $(add_button).click(function(e) { //on add input button click
            e.preventDefault();

            x++;

            var html = '';
            html += '<div class="row form-group" style="padding: 1% 0;">';

                html += '<div class="col-9">';
                    html += '<input type="text" name="color[]" class="form-control">';
                html += '</div>';

                html += '<div class="col-3">';
                    html += '<a href="#" class="remove_field"><i class="fas fa-times fa-lg" style="color: red;"></i></a>';
                html += '</div>';
            html += '</div>';

            $(".wrapperColor").append(html);
        });

        $(".wrapperColor").on("click", ".remove_field", function(e) {
            e.preventDefault();
            $(this).parent('div').parent('div').remove();
            x--;
        });

        $("#form").submit(function(e){
            e.preventDefault();
            console.log($('#form').serializeArray()); // only gets the first field
            return false;
        });

    });
</script>

这是单击提交后我得到的内容。

标签： jquerylaravel

jquery - 添加字段不会添加到 POST

问题描述

解决方案

推荐阅读