使用动态字段从 HTML 表单发布多维数组

Question

我有一个有点棘手的表单，我希望用多维数组提交它。表格划分如下。 第一个输入是让我们说一个膳食名称输入，如早餐、午餐或晚餐。进去之后。并单击按钮添加详细信息。 将出现一个新的输入字段，称为膳食内容。添加后，他单击附加到内容的按钮。将出现一个新的输入，称为卡路里。所以我想这样提交。 膳食名称->含量->卡路里。

有添加餐点之类的按钮，可以添加另一个餐点。 添加膳食内容，这将为同一餐添加另一餐内容。

所以当我提交它时，发布的数据是这样的。

早餐->鸡蛋->200 ->果汁->150

午餐->意大利面->250 ->意大利面->190

这里的问题是我不能使用像 0 这样的索引来表示像这样的名字 膳食[0][卡路里][内容] 因为字段是在运行时生成的，所以我不知道哪顿饭有多少内容，有多少顿饭。

<form action="{{route('add-diet')}}" class="diet-program form-horizontal bordered-row" method="post">
    {{csrf_field()}}
    <div class="tab-content">
        <h3 class="content-box-header bg-default">Diet Program Form</h3>
        <div class="form-group first-group">
            <label class="col-sm-3 control-label">Program Name</label>
            <div class="col-sm-6">
                <input class="form-control" name="name" placeholder="Program Name... (Optional)" type="text" value="">
            </div>
        </div>
        <div class="form-group meal_number">
            <label class="col-sm-3 control-label">Meal Number</label>
            <div class="col-sm-6">
                <div class="input-group">
                    <input class="form-control meal_number_input" name="[number][]" placeholder="Meal Number..." type="text" value=""> <span class="input-group-btn"><button class="btn btn-blue-alt meal_detail" disabled type="button"><span class="input-group-btn"><span class="input-group-btn">Add Details</span></span></button></span>
                </div>
                <div aria-hidden="true" class="modal fade meal_details_modal" role="dialog">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button aria-hidden="true" class="close" data-dismiss="modal" type="button">&times;</button>
                                <h4 class="modal-title">Meal Content</h4>
                            </div>
                            <div class="modal-body">
                                <div class="container-fluid">
                                    <div class="meal_container">
                                        <div class="meal_content-div col-md-12 col-sm-12 col-xs-12">
                                            <div class="form-group input-group meal_name-div">
                                                <input class="form-control meal_name_input" name="content[]" placeholder="Meal Content..." type="text" value=""> <span class="input-group-btn"><button class="btn btn-blue-alt meal_name_detail" disabled type="button"><span class="input-group-btn"><span>Add Details</span> <i class="glyph-icon icon-plus"></i></span></button></span>
                                            </div>
                                            <div class="form-group meal_name_detail-div">
                                                <div class="col-md-10 col-md-offset-1 form-group calories-div">
                                                    <input class="form-control calories" name="calories[]" placeholder="Calories..." type="number" value="">
                                                </div>
                                                <div class="col-md-10 col-md-offset-1 form-group time_taken-div">
                                                    <input class="form-control time_take_input" name="taketime[]" placeholder="Time to take... (Optional)" readonly type="text">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-6">
                                            <button class="btn btn-alt btn-hover btn-primary add_meal_name" type="button"><span>Add Content</span><i class="glyph-icon icon-arrow-up"></i></button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button class="btn btn-default" data-dismiss="modal" type="button">Done</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-6 col-md-offset-3">
                <button class="btn btn-alt btn-hover btn-primary add_meal_number" type="button"><span>Add Meal</span> <i class="glyph-icon icon-arrow-up"></i></button>
            </div>
        </div>
    </div>
    <div class="form-group submit-btn-div">
        <button class="btn ra-100 btn-default" type="submit">Submit</button>
    </div>
</form>

我的 JavaScript

/***
 * Cloned Div for future duplication
 */
var cloned_meal_number = $('.meal_number').clone();
var meal_content = $('.meal_content-div').clone();


/***
 * Enable Meal Number or Meal Name If Entered
 */
$('.tab-content').on('input','.meal_number_input, .meal_name_input',function () {
    if($(this).val()) {
        $(this).siblings('.input-group-btn').children().prop('disabled',false);
    }
    else{
        $(this).siblings('.input-group-btn').children().prop('disabled',true);
    }
});

/***
 * Meal Detail Modal Load
 */
$('.tab-content').on('click','.meal_detail',function () {
    var meal_number_val = $(this).parent().siblings('.meal_number_input').val();
    $(this).closest('.input-group').siblings('.modal').find('.modal-title').html(meal_number_val);
    $(this).closest('.input-group').siblings('.meal_details_modal').modal({
        keyboard: 'false',
        backdrop: 'static'
    })
});
/***
 * Modal Hide
 */
$('.tab-content').on('click','.modal_close, .close',function () {
    $(this).closest('.meal_details_modal').modal('hide');
});




/***
 * Meal Detail Toggle Menu
 */
$('.tab-content').on('click','.meal_name_detail', function () {
    $(this).find('i').toggleClass('icon-plus icon-minus');
    $(this).closest('.meal_name-div').siblings('.meal_name_detail-div').slideToggle();
});

/***
 * Add Meal Number
 */

$('.tab-content').on('click','.add_meal_number',function () {
    cloned_meal_number.clone().insertAfter('.meal_number:last');
});


/***
 * Add Day Button
 */
$('.tab-content').on('click','.add_meal_name',function () {
    meal_content.clone().appendTo($('.meal_container'));
});

Answer 1

您可以在 foreach 循环中使用 foreach 循环在整个数组中运行。我会使用对象数组来完成这项任务，因为它比多维数组更容易解析，它们也非常灵活，可以为您节省宝贵的时间，一维也可以，考虑一下。

至于代码示例： foreach($mainArray as $childArray=>$someArrayProp){ }

Answer 2

您可以像这样使用所需的所有数据创建 JSON：

[{
        "meal": "breakfast",
        "content": [{
                "name": "egg",
                "calories": "200"
            }, {
                "name": "juice",
                "calories": "150"
            }
        ]
    }, {
        "meal": "lunch",
        "content": [{
                "name": "pasta",
                "calories": "250"
            }, {
                "name": "spaghetti",
                "calories": "190"
            }
        ]
    }
]

但我不确定这是否是您需要的，如果不是，请告诉我！

米歇尔