获取表单

时间:2017-12-21 01:38:42

标签: javascript php jquery html laravel

在拥有众多产品的情况下,用户可以动态添加新的下拉框。当我单击提交时,我想仅在表单中获取“category []”的值。

Preview of the dynamic dropdown box

这是代码:

<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>

我尝试将数组名称重命名为其他名称,但是当用户动态添加新的下拉框时,它无法跟随该行的项目编号。

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);
})

1 个答案:

答案 0 :(得分:2)

我真的想知道Form::select()

中此行的输出结果
categories_$project->id[]

所以无论如何,如果你想对你的选择标签进行分组,你必须为每个标签分配相同的名称。假设您循环使用$projects数组。每行都有

<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>

接下来,您必须将点击事件绑定到所有.btn-add-more-category。我们假设您的父表有一个.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>

另外,我建议您将此行移至您的控制器

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