获取表单中选择框的数组值

Question

In the case of having many products, and user can dynamically adding new dropdown box. When I click submit, I want to get the value of "category[]" within the form only.

and this is the code:

<form name="store_category" method="post" enctype="multipart/form-data" action="{{ route('admin.product.category.store') }}">
    {!!csrf_field()!!}
    {!!""; $lang = session('locale') == "" ? "zh" : session('locale'); !!}
    <div class="form-group category-select-container">
        {!! Form::select("categories_$project->id[]", ${"categories_" . $lang}, null, ["class" => "input-sm"]) !!}
        <a href="#" class="btn btn-xs btn-danger btn-remove-category pull-right">{{trans('string.Remove')}}</a>
    </div>
    <div class="form-group">
        <button type="button" class="btn btn-dark btn-add-more-category">{{trans('string.Add More')}}</button>
        <button type="submit" class="btn blue btn-theme-colored">{{trans('string.submit')}}</button>
    </div>
</form>

I've tried to rename the array name to something else, but when the user dynamically adding new dropdown box, it couldn't follow the number of the project for the row.

var template = '<div class="form-group category-select-container">'+
                    '{!! Form::select("categories_$project->id[]", ${"categories_" . $lang}, null, ["class" => "input-sm"]) !!}'+
                    '<a href="#" class="btn btn-xs btn-danger btn-remove-category pull-right">{{trans("string.Remove")}}</a>'+
                '</div>';
$('.btn-add-more-category').on('click', function(e){
    e.preventDefault();
    $(this).before(template);
})

Answer 1

I really would like to know what could be the output of this line in your Form::select() s

categories_$project->id[]

So anyway, if you would like to group your select tags you have to assign each of them with the same name. Suppose you are looping in an array of $projects . Each row would have

<form name="store_category" method="post" enctype="multipart/form-data" action="{{ route('admin.product.category.store') }}"> 
    {!!csrf_field()!!} 
    @php $lang = session('locale') == "" ? "zh" : session('locale'); @endphp
    <div class="form-group category-select-container"> 
        {!! Form::select("category[]", ${"categories_" . $lang}, null, ["class" => "input-sm"]) !!} 
        <a href="#" class="btn btn-xs btn-danger btn-remove-category pull-right">{{trans('string.Remove')}}</a> 
    </div>
    <div class="form-group"> 
        <button type="button" class="btn btn-dark btn-add-more-category">{{trans('string.Add More')}}</button> 
        <button type="submit" class="btn blue btn-theme-colored">{{trans('string.submit')}}</button> 
    </div> 
</form>

Then next, you have to bind a click event to all your .btn-add-more-category . Let's say your parent table has a class of .table

<script>
    $(function () {
        $(".table").on("click", ".btn-add-more-category", function(e) {
            var template = '<div class="form-group category-select-container"> ' +
                '{!! Form::select("category[]", ${"categories_" . $lang}, null, ["class" => "input-sm"]) !!} ' +
                '<a href="#" class="btn btn-xs btn-danger btn-remove-category pull-right">{{trans('string.Remove')}}</a>' +
            '</div>';
            var container = $(this).parent();
            $(template).insertBefore(container);
        });
    });
</script>

Also, I suggest that you move this line to your controller

$lang = session('locale') == "" ? "zh" : session('locale');