2017-12-21 13 views
1

多くの製品がある場合、ユーザーは新しいドロップダウンボックスを動的に追加できます。私がsubmitをクリックすると、フォーム内の "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> 

私は何か他のものに配列名の名前を変更しようとしたが、ユーザが動的に新しいドロップダウンボックスを追加するとき、それは続くことができませんでした行のプロジェクトの番号。あなたがグループにあなたがのそれぞれを割り当てる必要があり、あなたの選択のタグをご希望の場合、私は本当に、とにかくあなたのForm::select()

categories_$project->id[] 

にこのラインの出力何ができるか知りたいのですが

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

答えて

2

それらは同じ名前で。 $projectsの配列でループしているとします。各行は、すべてのあなたの.btn-add-more-categoryにクリックイベントをバインドする必要があり、次その後

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

を持っているでしょう。さんがあなたの親テーブルはまた.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'); 
+0

categories_ $プロジェクト - >のid []それはcategories_298されます[] – 1myb

+0

選択したプロジェクトIDを指定する必要があるのはなぜですか? –

+0

langをコントローラに入れることを提案してくれてありがとう。私はそれをテストしていた、それはまだ最終的なコードではない。私が望むのは、同じフォーム内で複数の選択肢を得ることです。あなたが写真から見ることができるように、1ページには多くのフォームがあります。選択ボックスは動的に追加されます。 – 1myb

関連する問題