Post a Multi-Dimensional Array from HTML Form with dynamic fields - html

Question

I have a form that is little tricky and I'm hoping to submit it with multi-dimensional array. The form is divided as follows.
The first input is lets say a meal name input like breakfast, lunch or dinner. After it enters it. and click on the button add detail.
A new input field will appear called meal-content. After adding it he clicks the button attached to content. A new input will appear called calories. So I Want to submit it like this.
Meal Name->Content->Calories.
There are button like add meal which will add another meal field.
Add Meal Content which will add another meal content for same meal.
So when I submit it the posted data is like this.
Breakfast->Egg->200
->Juice->150
Lunch->Pasta->250
->Spaghetti->190
The problem here is I cannot use index like 0 for names like
Meal[0][Calories][Content]
Because fields are generated at runtime so i cannot know which meal has how many contents and how many meals are there.
<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">×</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>
My 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

you can use foreach loop within a foreach loop to run all over your array. I would've used an array of objects for this task since its far more easier to parse than multidimensional arrays, they are also very flexible and will save you precious time, one dimension also, consider that.
as for code example:
foreach($mainArray as $childArray=>$someArrayProp){ }

Answer 2

You can create a JSON with all the data you need like this:
[{
"meal": "breakfast",
"content": [{
"name": "egg",
"calories": "200"
}, {
"name": "juice",
"calories": "150"
}
]
}, {
"meal": "lunch",
"content": [{
"name": "pasta",
"calories": "250"
}, {
"name": "spaghetti",
"calories": "190"
}
]
}
]
but I'm not sure if this is what you need, tell me if not!
Michele