Question

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

有添加膳食的按钮，添加另一个用餐场。添加膳食内容，这将为同一餐添加另一餐内容。

因此，当我提交时，发布的数据就是这样。

Breakfast-＆GT;卵形＆GT; 200 - ＆GT; Juice-＆GT; 150

Lunch-＆GT; Pasta-＆GT; 250 - ＆GT; Spaghetti-＆GT; 190

这里的问题是我不能像0那样使用像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"
            }
        ]
    }
]

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

米歇尔

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

2 个答案: