Form Repeater only POST first values - php

Question

I'm using Form Repeater in a simple HTML page, when I send the form, I only get the first values (First line).
HTML:
<div id="kt_repeater_1">
<div class="form-group row" id="kt_repeater_1">
<div data-repeater-list="product_list" class="col-lg-12">
<div data-repeater-item class="form-group row">
<div class="col-md-9">
<label>Produit:</label>
<select class="form-control selectpicker" name="product">
<option value="1">Product 1</option>
<option value="2">Product 2</option>
<option value="3">Product 3</option>
</select>
<div class="d-md-none mb-2"></div>
</div>
<div class="col-md-2">
<label>Qte:</label>
<input type="text" name="qty" class="form-control" />
<div class="d-md-none mb-2"></div>
</div>
<div class="col-md-1">
<a href="javascript:;" data-repeater-delete="" style="margin-top: 25px;" class="btn btn-sm font-weight-bolder btn-light-danger">
<i class="la la-trash-o"></i>
</a>
</div>
</div>
</div>
</div>
<div class="form-group row" style="margin-top: -20px;">
<label class="col-lg-2 col-form-label text-right"></label>
<div class="col-lg-12">
<a href="javascript:;" data-repeater-create="" class="btn btn-sm font-weight-bolder btn-light-primary">
<i class="la la-plus"></i>Add Product
</a>
</div>
</div>
</div>
JS:
var KTFormRepeater = function() {
// Private functions
var demo1 = function() {
$('#kt_repeater_1').repeater({
initEmpty: false,
defaultValues: {
},
show: function() {
$(this).slideDown();
},
hide: function(deleteElement) {
$(this).slideUp(deleteElement);
},
});
}
return {
// public functions
init: function() {
demo1();
}
};
}();
$(document).ready(function() {
KTFormRepeater.init();
});
PHP when I print_r($_POST[]) AND send 2 Lines
(Product 1, QTY: 10 - Product 1, QTY: 20):
"product_list":[{"product":"1","qty":"10"}]
Can anyone help me with this, please?

Answer 1

correct :
name="product[0][qty]"
not correct
name="qty"

Answer 2

I am a little late here but I am uploading a complete solution to how to add form repeater in your page if you are using metronic keen theme version 8.*.
< script >
var hostUrl = "assets/"; < /script> <
script src = "{{ asset('assets/Metronic-Theme/plugins/global/plugins.bundle.js') }}" > < /script> <
script src = "{{ asset('assets/Metronic-Theme/js/scripts.bundle.js') }}" > < /script> <
script src = "{{asset('assets/Metronic-Theme/plugins/custom/prismjs/prismjs.bundle.js')}}" > < /script> <
script src = "{{asset('assets/Metronic-Theme/plugins/custom/formrepeater/formrepeater.bundle.js')}}" > < /script> <
script src = "{{asset('assets/Metronic-Theme/js/custom/documentation/documentation.js')}}" > < /script> <
script src = "{{asset('assets/Metronic-Theme/js/custom/documentation/search.js')}}" > < /script>
<
script >
"use strict";
var KTFormRepeaterBasic = {
init: function() {
$("#kt_docs_repeater_basic").repeater({
initEmpty: !1,
defaultValues: {
"text-input": "foo"
},
show: function() {
$(this).slideDown()
},
hide: function(t) {
$(this).slideUp(t)
}
})
}
};
KTUtil.onDOMContentLoaded((function() {
KTFormRepeaterBasic.init()
}));
<
/script>
<link href="{{ asset('assets/Metronic-Theme/plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css" /><link href="{{ asset('assets/Metronic-Theme/plugins/global/plugins.bundle.css') }}" rel="stylesheet" type="text/css" /><link href="{{ asset('assets/Metronic-Theme/css/style.bundle.css') }}" rel="stylesheet" type="text/css" />
<!--begin::Repeater-->
<div id="kt_docs_repeater_basic">
<!--begin::Form group-->
<div class="form-group">
<div data-repeater-list="kt_docs_repeater_basic">
<div data-repeater-item>
<div class="form-group row">
<div class="col-md-3">
<label class="form-label">Accessory</label> {{-- <input type="email" class="form-control mb-2 mb-md-0" placeholder="Enter full name" name="name1" id="check1" /> --}}
<select class="form-control mb-2 mb-md-0" placeholder="Select Accesory" id="sel1" name="accessory">
<option value="" disabled selected>Select Accessory</option>
#foreach ($shop->getCrmSetting('Accessory',$shop->id) as $item)
<option>{{$item->accessory}}</option>
#endforeach
</select>
</div>
<div class="col-md-3">
<label class="form-label">Accessory Serial Number</label>
<input type="text" class="form-control mb-2 mb-md-0" placeholder="Enter Accessory Serial Number" name="accessoryserialno" />
</div>
<div class="col-md-4">
<a href="javascript:;" data-repeater-delete class="btn btn-sm btn-light-danger mt-3 mt-md-8">
<i class="la la-trash-o"></i>Delete
</a>
</div>
</div>
</div>
</div>
</div>
<!--end::Form group-->
<!--begin::Form group-->
<div class="form-group mt-5">
<a href="javascript:;" data-repeater-create class="btn btn-light-primary">
<i class="la la-plus"></i>Add
</a>
</div>
<!--end::Form group-->
</div>
<!--end::Repeater-->
and now the code from backened server
just to tell how you can retrieve data.
Remember to add name="" attribute to html element to retrieve data in backend server.as i have added it to select and input elements.
foreach ($request->kt_docs_repeater_basic as $key => $value) {
CustomerAccessory::create([
'order_id' => $order->id,
'accessory' => $value['accessory'],
'accessoryserialno' => $value['accessoryserialno'],
]);
}
this project is in laravel so code is from controller.
In this way you can loop through the form repeater
and then can store and use the values any way you like in the backend.
You can make changes according to your theme and layout.
but you have to add the form repeater scripts and css and jquery.
and if you only want to use first row from foreach you can either put a break statement or you can do this.
$request->kt_docs_repeater_basic[0]['accessory'];
$request->kt_docs_repeater_basic[0]['accessoryserialno'];
or
foreach ($request->kt_docs_repeater_basic as $key => $value) {
CustomerAccessory::create([
'order_id' => $order->id,
'accessory' => $value['accessory'],
'accessoryserialno' => $value['accessoryserialno'],
]);
break;
}